@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
118 lines (113 loc) • 9.01 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.js';
const linkButtonCss = ".utrecht-link-button{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));--_utrecht-link-forced-colors-color:linktext;text-decoration-color:var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));text-decoration-line:var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset);--utrecht-icon-size:var(--utrecht-button-icon-size, 1em);align-items:center;border-radius:var(--utrecht-button-border-radius, 0);cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size, var(--utrecht-document-font-family));font-weight:var(--utrecht-button-font-weight);gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size, auto);justify-content:center;line-height:inherit;min-block-size:var(--utrecht-button-min-block-size, 44px);min-inline-size:var(--utrecht-button-min-inline-size, 44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}.utrecht-link-button--hover,.utrecht-link-button--html-button:not(:disabled):hover{--_utrecht-link-forced-colors-color:linktext;--_utrecht-link-state-color:var(--utrecht-link-hover-color);--_utrecht-link-state-text-decoration:var(--utrecht-link-hover-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-hover-text-decoration-thickness);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--disabled{--_utrecht-link-forced-colors-color:GrayText;--_utrecht-link-state-color:var(--utrecht-link-placeholder-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed);font-weight:var(--utrecht-link-placeholder-font-weight);text-decoration-line:none}.utrecht-link-button--focus,.utrecht-link-button--html-button:not(:disabled):focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);background-color:var(--utrecht-link-focus-background-color, transparent);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link-button--focus-visible,.utrecht-link-button--html-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1;--_utrecht-link-state-text-decoration:var(\n --utrecht-link-focus-visible-text-decoration,\n var(--utrecht-link-focus-text-decoration)\n );--_utrecht-link-state-text-decoration-thickness:var(\n --utrecht-link-focus-visible-text-decoration-thickness,\n var(--utrecht-link-focus-text-decoration-thickness)\n );z-index:var(--utrecht-stack-focus-z-index, 1)}.utrecht-link-button--active,.utrecht-link-button--html-button:not(:disabled):active{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--inline{--utrecht-icon-inset-block-start:var(--utrecht-icon-baseline-inset-block-start);min-block-size:auto;min-inline-size:auto;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.utrecht-link-button--pressed{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--html-button{background-color:transparent;border-width:0}:host{display:inline-flex}:host([hidden]){display:none !important}";
const UtrechtLinkButtonStyle0 = linkButtonCss;
const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.disabled = undefined;
this.type = undefined;
this.inline = undefined;
this.pressed = undefined;
this.form = undefined;
this.formAction = undefined;
this.formEnctype = undefined;
this.formMethod = undefined;
this.formNoValidate = undefined;
this.formTarget = undefined;
this.popoverTarget = undefined;
this.popoverTargetAction = undefined;
this.name = undefined;
this.value = undefined;
}
render() {
const { hostElement, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
const handleClick = () => {
const button = this.hostElement.querySelector('button[hidden]');
if (button) {
button.click();
}
};
let button = hostElement.querySelector('button[hidden]');
const needsButton = !!(name ||
form ||
formTarget ||
formEnctype ||
formMethod ||
formNoValidate ||
popoverTarget ||
popoverTargetAction ||
type === 'submit');
if (button && !needsButton) {
button.parentNode.removeChild(button);
}
if (!button && needsButton) {
button = hostElement.ownerDocument.createElement('button');
button.hidden = true;
button.tabIndex = -1;
button.ariaHidden = 'true';
hostElement.appendChild(button);
}
const setAttribute = (el, name, value) => {
if (typeof value === 'string') {
el.setAttribute(name, value);
}
else {
el.removeAttribute(name);
}
};
if (button) {
setAttribute(button, 'name', name);
setAttribute(button, 'type', type);
setAttribute(button, 'form', form);
setAttribute(button, 'formaction', formAction);
setAttribute(button, 'form', form);
setAttribute(button, 'formtarget', formTarget);
setAttribute(button, 'formenctype', formEnctype);
setAttribute(button, 'formmethod', formMethod);
setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);
setAttribute(button, 'popovertargetaction', popoverTargetAction);
setAttribute(button, 'popovertarget', popoverTarget);
setAttribute(button, 'type', type);
button.style.display = 'none';
button.value = value || '';
}
return (h("button", { key: '54e516e8ca6e356cc0b173bc47133487086af4d1', class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '52574b1a99e1dcba32c042f8b8f847e760e5b4db' })));
}
get hostElement() { return this; }
static get style() { return UtrechtLinkButtonStyle0; }
}, [1, "utrecht-link-button", {
"disabled": [4],
"type": [1],
"inline": [4],
"pressed": [4],
"form": [513],
"formAction": [513, "formaction"],
"formEnctype": [513, "formenctype"],
"formMethod": [513, "formmethod"],
"formNoValidate": [516, "formnovalidate"],
"formTarget": [513, "formtarget"],
"popoverTarget": [513, "popovertarget"],
"popoverTargetAction": [513, "popovertargetaction"],
"name": [1],
"value": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-link-button"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-link-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, LinkButton);
}
break;
} });
}
const UtrechtLinkButton = LinkButton;
const defineCustomElement = defineCustomElement$1;
export { UtrechtLinkButton, defineCustomElement };
//# sourceMappingURL=utrecht-link-button.js.map