@gemeentenijmegen/web-components
Version:
Web components for the gemeente Nijmegen design system
112 lines (95 loc) • 21 kB
JavaScript
(function () {
'use strict';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n.nijmegen-toolbar-button {\n /*\n `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.\n The hint color takes priority over the appearance color.\n\n `--_utrecht-button-appearance` is the internal prefix for the appearance\n (primary-action, secondary-action or subtle), it is not an API.\n */\n --_utrecht-button-background-color: var(\n --_utrecht-button-hint-background-color,\n var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))\n );\n --_utrecht-button-color: var(\n --_utrecht-button-hint-color,\n var(--_utrecht-button-appearance-color, var(--utrecht-button-color))\n );\n --_utrecht-button-border-color: var(\n --_utrecht-button-hint-border-color,\n var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))\n );\n --_utrecht-button-border-bottom-color: var(\n --_utrecht-button-hint-border-bottom-color,\n var(\n --_utrecht-button-hint-border-color,\n var(\n --_utrecht-button-appearance-border-bottom-color,\n var(\n --_utrecht-button-appearance-border-color,\n var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))\n )\n )\n )\n );\n --_utrecht-button-disabled-background-color: var(\n --_utrecht-button-hint-disabled-background-color,\n var(\n --_utrecht-button-appearance-disabled-background-color,\n var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))\n )\n );\n --_utrecht-button-disabled-border-color: var(\n --_utrecht-button-hint-disabled-border-color,\n var(\n --_utrecht-button-appearance-disabled-border-color,\n var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))\n )\n );\n --_utrecht-button-disabled-color: var(\n --_utrecht-button-hint-disabled-color,\n var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))\n );\n --_utrecht-button-pressed-background-color: var(\n --_utrecht-button-hint-pressed-background-color,\n var(\n --_utrecht-button-hint-background-color,\n var(\n --_utrecht-button-appearance-pressed-background-color,\n var(\n --_utrecht-button-appearance-background-color,\n var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))\n )\n )\n )\n );\n --_utrecht-button-pressed-border-color: var(\n --_utrecht-button-hint-pressed-border-color,\n var(\n --_utrecht-button-hint-border-color,\n var(\n --_utrecht-button-appearance-pressed-border-color,\n var(\n --_utrecht-button-appearance-border-color,\n var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))\n )\n )\n )\n );\n --_utrecht-button-pressed-color: var(\n --_utrecht-button-hint-pressed-color,\n var(\n --_utrecht-button-hint-color,\n var(\n --_utrecht-button-appearance-pressed-color,\n var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))\n )\n )\n );\n --_utrecht-button-focus-background-color: var(\n --_utrecht-button-hint-focus-background-color,\n var(\n --_utrecht-button-hint-background-color,\n var(\n --_utrecht-button-appearance-focus-background-color,\n var(\n --_utrecht-button-appearance-background-color,\n var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))\n )\n )\n )\n );\n --_utrecht-button-focus-border-color: var(\n --_utrecht-button-hint-focus-border-color,\n var(\n --_utrecht-button-hint-border-color,\n var(\n --_utrecht-button-appearance-focus-border-color,\n var(\n --_utrecht-button-appearance-border-color,\n var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))\n )\n )\n )\n );\n --_utrecht-button-focus-color: var(\n --_utrecht-button-hint-focus-color,\n var(\n --_utrecht-button-hint-color,\n var(\n --_utrecht-button-appearance-focus-color,\n var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))\n )\n )\n );\n --_utrecht-button-hover-background-color: var(\n --_utrecht-button-hint-hover-background-color,\n var(\n --_utrecht-button-hint-background-color,\n var(\n --_utrecht-button-appearance-hover-background-color,\n var(\n --_utrecht-button-appearance-background-color,\n var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))\n )\n )\n )\n );\n --_utrecht-button-hover-border-color: var(\n --_utrecht-button-hint-hover-border-color,\n var(\n --_utrecht-button-hint-border-color,\n var(\n --_utrecht-button-appearance-hover-border-color,\n var(\n --_utrecht-button-appearance-border-color,\n var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))\n )\n )\n )\n );\n --_utrecht-button-hover-color: var(\n --_utrecht-button-hint-hover-color,\n var(\n --_utrecht-button-hint-color,\n var(\n --_utrecht-button-appearance-hover-color,\n var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))\n )\n )\n );\n --_utrecht-button-active-background-color: var(\n --_utrecht-button-hint-active-background-color,\n var(\n --_utrecht-button-hint-background-color,\n var(\n --_utrecht-button-appearance-active-background-color,\n var(\n --_utrecht-button-appearance-background-color,\n var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))\n )\n )\n )\n );\n --_utrecht-button-active-border-color: var(\n --_utrecht-button-hint-active-border-color,\n var(\n --_utrecht-button-hint-border-color,\n var(\n --_utrecht-button-appearance-active-border-color,\n var(\n --_utrecht-button-appearance-border-color,\n var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))\n )\n )\n )\n );\n --_utrecht-button-active-color: var(\n --_utrecht-button-hint-active-color,\n var(\n --_utrecht-button-hint-color,\n var(\n --_utrecht-button-appearance-active-color,\n var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))\n )\n )\n );\n --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));\n --_utrecht-button-border-block-end-width: var(\n --utrecht-button-border-bottom-width,\n var(--_utrecht-button-border-width, 0)\n );\n --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));\n --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));\n --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);\n align-items: center;\n background-color: var(--_utrecht-button-background-color);\n block-size: fit-content;\n border-block-end-color: var(--_utrecht-button-border-bottom-color);\n border-block-end-width: var(--_utrecht-button-border-block-end-width);\n border-color: var(--_utrecht-button-border-color);\n border-radius: var(--utrecht-button-border-radius);\n border-style: solid;\n border-width: var(--_utrecht-button-border-width);\n box-sizing: border-box;\n color: var(--_utrecht-button-color);\n column-gap: var(--utrecht-button-column-gap);\n cursor: var(--utrecht-action-activate-cursor, revert);\n display: inline-flex;\n font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));\n font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));\n font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));\n inline-size: var(--utrecht-button-inline-size, auto);\n justify-content: center;\n line-height: var(--_utrecht-button-line-height);\n max-inline-size: var(--utrecht-button-max-inline-size, fit-content);\n min-block-size: var(--utrecht-button-min-block-size, 44px);\n min-inline-size: var(--utrecht-button-min-inline-size, 44px);\n padding-block-end: var(--utrecht-button-padding-block-end);\n padding-block-start: var(--utrecht-button-padding-block-start);\n padding-inline-end: var(--utrecht-button-padding-inline-end);\n padding-inline-start: var(--utrecht-button-padding-inline-start);\n scale: 1;\n text-transform: var(--utrecht-button-text-transform);\n -webkit-user-select: none;\n user-select: none;\n --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);\n --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);\n --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);\n --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);\n --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);\n --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);\n --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);\n --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);\n --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);\n --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);\n --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);\n --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);\n --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);\n --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);\n --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);\n --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);\n --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);\n --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);\n --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);\n --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);\n --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);\n --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);\n column-gap: var(--nijmegen-toolbar-button-column-gap);\n cursor: pointer;\n padding-block-end: var(--nijmegen-toolbar-button-padding-block-end);\n padding-block-start: var(--nijmegen-toolbar-button-padding-block-start);\n padding-inline-end: var(--nijmegen-toolbar-button-padding-inline-end);\n padding-inline-start: var(--nijmegen-toolbar-button-padding-inline-start);\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu::before {\n mask-image: var(--nijmegen-toolbar-button-menu-icon-image, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" className=\"icon icon-tabler icons-tabler-outline icon-tabler-menu-2\" > <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" /> <path d=\"M4 6l16 0\" /> <path d=\"M4 12l16 0\" /> <path d=\"M4 18l16 0\" /> </svg>'));\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu::before {\n background-color: var(--_utrecht-button-appearance-color);\n content: \"\";\n display: inline-block;\n flex-shrink: 0;\n /* stylelint-disable-next-line property-disallowed-list */\n height: var(--nijmegen-toobar-button-menu-icon-height, 1.5rem);\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n width: var(--nijmegen-toobar-button-menu-icon-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu[aria-expanded=true]::before {\n mask-image: var(--nijmegen-toolbar-button-close-icon-image, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-x\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 6l-12 12\" /><path d=\"M6 6l12 12\" /></svg>'));\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search::before {\n mask-image: var(--nijmegen-toolbar-button-search-icon-image, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" /><path d=\"M21 21l-6 -6\" /></svg>'));\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search::before {\n background-color: var(--_utrecht-button-appearance-color);\n content: \"\";\n display: inline-block;\n flex-shrink: 0;\n /* stylelint-disable-next-line property-disallowed-list */\n height: var(--nijmegen-toobar-button-menu-icon-height, 1.5rem);\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n width: var(--nijmegen-toobar-button-menu-icon-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search[aria-expanded=true]::before {\n mask-image: var(--nijmegen-toolbar-button-close-icon-image, url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-x\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 6l-12 12\" /><path d=\"M6 6l12 12\" /></svg>'));\n}\n.nijmegen-toolbar-button:focus-visible, .nijmegen-toolbar-button.nijmegen-toolbar-button--focus-visible {\n background-color: var(--_utrecht-button-focus-background-color);\n border-color: var(--_utrecht-button-focus-border-color);\n color: var(--_utrecht-button-focus-color);\n scale: var(--utrecht-button-focus-scale, 1);\n /* the pseudo-class for `:focus-visible` is implemented via the mixin */\n /* - The browser default focus ring should apply when these CSS custom properties are not set.\n * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n * can combine it with the focus ring box shadow.\n */\n --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);\n box-shadow: var(--_utrecht-focus-ring-box-shadow);\n outline-color: var(--utrecht-focus-outline-color, revert);\n outline-offset: var(--utrecht-focus-outline-offset, revert);\n outline-style: var(--utrecht-focus-outline-style, revert);\n outline-width: var(--utrecht-focus-outline-width, revert);\n z-index: 1;\n}\n.nijmegen-toolbar-button:active:not(:disabled, [aria-disabled=true]), .nijmegen-toolbar-button.nijmegen-toolbar-button--active {\n background-color: var(--_utrecht-button-active-background-color);\n border-color: var(--_utrecht-button-active-border-color);\n color: var(--_utrecht-button-active-color);\n}\n.nijmegen-toolbar-button:hover:not(:disabled, [aria-disabled=true]), .nijmegen-toolbar-button.nijmegen-toolbar-button--hover {\n background-color: var(--_utrecht-button-hover-background-color);\n border-color: var(--_utrecht-button-hover-border-color);\n color: var(--_utrecht-button-hover-color);\n scale: var(--utrecht-button-hover-scale, 1);\n}";
styleInject(css_248z);
var html = "<button class=\"nijmegen-toolbar-button\" type=\"button\" part=\"button\">\n <slot></slot>\n</button>\n";
class NijmegenToolbarButton extends HTMLElement {
constructor() {
super();
const template = document.createElement('template');
template.innerHTML = html;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(css_248z);
shadowRoot.adoptedStyleSheets = [stylesheet];
}
static get observedAttributes() {
return ['type', 'aria-controls'];
}
connectedCallback() {
let typedButton = this.shadowRoot.querySelector('[class*="nijmegen-toolbar-button--icon"]');
if (typedButton) {
typedButton.addEventListener('click', (event) => {
let target = event.target;
if (event.target.nodeName === 'SLOT') {
target = event.target.parentElement;
}
target.ariaExpanded = target.ariaExpanded === 'true' ? 'false' : 'true';
// control mobile menu visibility
if (target.getAttribute('aria-controls')) {
const elementId = target.getAttribute('aria-controls');
if (elementId === 'mobile-menu') {
const mobileMenu = document.getElementById(elementId);
const visibleClass = 'nijmegen-header__mobile-menu--visible';
const isExpanded = target.getAttribute('aria-expanded') === 'true';
// Toggle menu visibility
mobileMenu.classList.toggle(visibleClass, isExpanded);
}
}
});
}
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'type') {
this.#handleType(newValue);
} else if (name === 'aria-controls') {
const button = this.shadowRoot.querySelector('.nijmegen-toolbar-button');
button.setAttribute('aria-controls', newValue);
}
}
#handleType(type) {
const button = this.shadowRoot.querySelector('.nijmegen-toolbar-button');
if (type === 'menu') {
button.classList.add('nijmegen-toolbar-button--icon-menu');
button.classList.remove('nijmegen-toolbar-button--icon-search');
button.ariaExpanded = 'false';
button.ariaLabel = 'Menu openen';
} else if (type === 'search') {
button.classList.add('nijmegen-toolbar-button--icon-search');
button.classList.remove('nijmegen-toolbar-button--icon-menu');
} else {
if (button.classList.contains('nijmegen-toolbar-button--icon-menu')) {
button.classList.remove('nijmegen-toolbar-button--icon-menu');
button.ariaLabel = 'Menu sluiten';
} else if (button.classList.contains('nijmegen-toolbar-button--icon-search')) {
button.classList.remove('nijmegen-toolbar-button--icon-search');
button.ariaLabel = 'Zoeken sluiten';
}
}
}
}
customElements.define('nijmegen-toolbar-button', NijmegenToolbarButton);
})();