@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
38 lines (34 loc) • 2.89 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.js';
const formFieldDescriptionCss = ".utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
const UtrechtFormFieldDescriptionStyle0 = formFieldDescriptionCss;
const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class FormFieldDescription extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.status = null;
}
render() {
const { status } = this;
return (h("div", { key: 'e062a67c985b1469c913801052e7c1561ebeb8d5', class: clsx('utrecht-form-field-description', status === 'valid' && 'utrecht-form-field-description--valid', status === 'invalid' && 'utrecht-form-field-description--invalid') }, h("slot", { key: '18b196a06f50b68a7eff779a96bcd075d803ea4a' })));
}
static get style() { return UtrechtFormFieldDescriptionStyle0; }
}, [1, "utrecht-form-field-description", {
"status": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-form-field-description"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-form-field-description":
if (!customElements.get(tagName)) {
customElements.define(tagName, FormFieldDescription);
}
break;
} });
}
export { FormFieldDescription as F, defineCustomElement as d };
//# sourceMappingURL=form-field-description.js.map