@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
54 lines (49 loc) • 3.44 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.js';
const checkboxCss = ".utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert);-webkit-user-select:none;user-select:none}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--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-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input :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}:host{display:block}:host([hidden]){display:none !important}";
const UtrechtCheckboxStyle0 = checkboxCss;
const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.utrechtBlur = createEvent(this, "utrechtBlur", 7);
this.utrechtChange = createEvent(this, "utrechtChange", 7);
this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
this.utrechtInput = createEvent(this, "utrechtInput", 7);
this.disabled = false;
this.readOnly = false;
this.checked = false;
this.value = '';
}
render() {
const { checked, disabled, value } = this;
return (h("input", { key: '237941bf96815e3a5f4934d79c081c0771f63348', class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
this.checked = evt.target.checked;
this.utrechtInput.emit(evt);
} }));
}
static get style() { return UtrechtCheckboxStyle0; }
}, [1, "utrecht-checkbox", {
"disabled": [516],
"readOnly": [516, "readonly"],
"checked": [4],
"value": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-checkbox"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-checkbox":
if (!customElements.get(tagName)) {
customElements.define(tagName, Checkbox);
}
break;
} });
}
const UtrechtCheckbox = Checkbox;
const defineCustomElement = defineCustomElement$1;
export { UtrechtCheckbox, defineCustomElement };
//# sourceMappingURL=utrecht-checkbox.js.map