@utrecht/web-component-library-stencil 1.0.0-alpha.99 → 1.0.0

package/dist/components/utrecht-emphasis.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const emphasisCss = ".utrecht-emphasis--stressed{font-style:var(--utrecht-emphasis-stressed-font-style, italic)}.utrecht-emphasis--strong{font-weight:var(--utrecht-emphasis-strong-font-weight, bold)}:host{display:inline}:host([hidden]){display:none !important}";
+
+const Emphasis = /*@__PURE__*/ proxyCustomElement(class Emphasis extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("em", { class: "utrecht-emphasis" }, h("slot", null)));
+  }
+  static get style() { return emphasisCss; }
+}, [1, "utrecht-emphasis"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-emphasis"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-emphasis":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Emphasis);
+      }
+      break;
+  } });
+}
+
+const UtrechtEmphasis = Emphasis;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtEmphasis, defineCustomElement };
+
+//# sourceMappingURL=utrecht-emphasis.js.map

package/dist/components/utrecht-emphasis.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-emphasis.js","mappings":";;AAAA,MAAM,WAAW,GAAG,iPAAiP;;MCaxP,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,kBAAkB,IAC1B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/emphasis.scss?tag=utrecht-emphasis&encapsulation=shadow","src/components/emphasis.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/emphasis/css\";\n\n:host {\n  display: inline;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-emphasis',\n  styleUrl: 'emphasis.scss',\n  shadow: true,\n})\nexport class Emphasis {\n  render() {\n    return (\n      <em class=\"utrecht-emphasis\">\n        <slot></slot>\n      </em>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-flex-wrap-fallback.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFlexWrapFallback extends Components.UtrechtFlexWrapFallback, HTMLElement {}
+export const UtrechtFlexWrapFallback: {
+  prototype: UtrechtFlexWrapFallback;
+  new (): UtrechtFlexWrapFallback;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-flex-wrap-fallback.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const flexWrapFallbackCss = ":host{display:block}:host([hidden]){display:none !important}.utrecht-flex-wrap-fallback__content--hidden,.utrecht-flex-wrap-fallback__fallback--hidden{block-size:0;opacity:0%;outline:0;overflow:hidden;pointer-events:none;position:relative;user-select:none}";
+
+/**
+ * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines
+ */
+const hasFlexboxWrap = (el) => {
+  var _a;
+  const win = (_a = el === null || el === void 0 ? void 0 : el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  const style = win === null || win === void 0 ? void 0 : win.getComputedStyle(el);
+  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {
+    // TODO: Account for writing-mode vertical
+    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;
+  }
+  else {
+    return false;
+  }
+};
+const FlexWrapFallback = /*@__PURE__*/ proxyCustomElement(class FlexWrapFallback extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.flexTarget = undefined;
+    this.resizeObserver = undefined;
+    this.contentWraps = undefined;
+  }
+  connectedCallback() {
+    if (!this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match
+        // TODO: Escape ID selector CSS query
+        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';
+        const flexTargetEl = this.hostElement.querySelector(cssSelector);
+        console.log(cssSelector, flexTargetEl);
+        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);
+      });
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.hostElement);
+  }
+  render() {
+    const { contentWraps } = this;
+    return (h("div", null, h("div", { id: "wrap", class: `utrecht-flex-wrap-fallback__content ${contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''}`, "data-inert": contentWraps, "aria-hidden": contentWraps }, h("slot", null)), h("div", { id: "nowrap", class: `utrecht-flex-wrap-fallback__fallback ${contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'}`, "data-inert": !contentWraps, hidden: !contentWraps }, h("slot", { name: "fallback" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return flexWrapFallbackCss; }
+}, [1, "utrecht-flex-wrap-fallback", {
+    "flexTarget": [513, "flextarget"],
+    "resizeObserver": [32],
+    "contentWraps": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-flex-wrap-fallback"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-flex-wrap-fallback":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlexWrapFallback);
+      }
+      break;
+  } });
+}
+
+const UtrechtFlexWrapFallback = FlexWrapFallback;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFlexWrapFallback, defineCustomElement };
+
+//# sourceMappingURL=utrecht-flex-wrap-fallback.js.map

package/dist/components/utrecht-flex-wrap-fallback.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-flex-wrap-fallback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,kQAAkQ;;ACQ9R;;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAW;;EACjC,MAAM,GAAG,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,0CAAE,WAAW,CAAC;EAE3C,MAAM,KAAK,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;EAExC,IAAI,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,MAAM,EAAE;;IAE3G,OAAO,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;GAC7G;OAAM;IACL,OAAO,KAAK,CAAC;GACd;AACH,CAAC,CAAC;MAOW,gBAAgB;;;;;;;;;EAQ3B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;;;QAGvC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,cAAc,CAAC;QAC7E,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACjE,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;OACpE,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC/C;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAClD;EACD,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,QACE,eACE,WACE,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,uCACL,YAAY,GAAG,6CAA6C,GAAG,EACjE,EAAE,gBACU,YAAY,iBACX,YAAY,IAEzB,eAAa,CACT,EACN,WACE,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,wCACL,YAAY,GAAG,EAAE,GAAG,8CACtB,EAAE,gBACU,CAAC,YAAY,EACzB,MAAM,EAAE,CAAC,YAAY,IAErB,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/flex-wrap-fallback.scss?tag=utrecht-flex-wrap-fallback&encapsulation=shadow","src/components/flex-wrap-fallback.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n.utrecht-flex-wrap-fallback__content--hidden,\n.utrecht-flex-wrap-fallback__fallback--hidden {\n  block-size: 0;\n  opacity: 0%;\n  outline: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: relative;\n  user-select: none;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, Element, h, Prop, State } from '@stencil/core';\n\n/**\n * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines\n */\nconst hasFlexboxWrap = (el: Element) => {\n  const win = el?.ownerDocument?.defaultView;\n\n  const style = win?.getComputedStyle(el);\n\n  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {\n    // TODO: Account for writing-mode vertical\n    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;\n  } else {\n    return false;\n  }\n};\n\n@Component({\n  tag: 'utrecht-flex-wrap-fallback',\n  styleUrl: 'flex-wrap-fallback.scss',\n  shadow: true,\n})\nexport class FlexWrapFallback {\n  @Element() hostElement: HTMLElement;\n\n  /* ID reference for element with `display: flex;` or `display: inline-flex` and `flex-wrap: wrap` */\n  @Prop({ attribute: 'flextarget', reflect: true }) flexTarget?: string;\n  @State() resizeObserver: ResizeObserver;\n  @State() contentWraps: boolean;\n\n  connectedCallback() {\n    if (!this.resizeObserver) {\n      this.resizeObserver = new ResizeObserver(() => {\n        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match\n        // TODO: Escape ID selector CSS query\n        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';\n        const flexTargetEl = this.hostElement.querySelector(cssSelector);\n        console.log(cssSelector, flexTargetEl);\n        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);\n      });\n    }\n\n    this.resizeObserver.observe(this.hostElement);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.unobserve(this.hostElement);\n  }\n  render() {\n    const { contentWraps } = this;\n    return (\n      <div>\n        <div\n          id=\"wrap\"\n          class={`utrecht-flex-wrap-fallback__content ${\n            contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''\n          }`}\n          data-inert={contentWraps}\n          aria-hidden={contentWraps}\n        >\n          <slot></slot>\n        </div>\n        <div\n          id=\"nowrap\"\n          class={`utrecht-flex-wrap-fallback__fallback ${\n            contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'\n          }`}\n          data-inert={!contentWraps}\n          hidden={!contentWraps}\n        >\n          <slot name=\"fallback\"></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldCheckbox extends Components.UtrechtFormFieldCheckbox, HTMLElement {}
+export const UtrechtFormFieldCheckbox: {
+  prototype: UtrechtFormFieldCheckbox;
+  new (): UtrechtFormFieldCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-checkbox.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$2 } from './form-field-description.js';
+
+const formFieldCheckboxCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.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);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))}.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)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_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)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;block-size:var(--utrecht-checkbox-size, 1em);border-color:var(--utrecht-checkbox-border-color);border-style:solid;border-width:var(--utrecht-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);inline-size:var(--utrecht-checkbox-size, 1em);margin-block-start:var(--utrecht-checkbox-margin-block-start);min-block-size:24px;min-inline-size:24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
+
+const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class FormFieldCheckbox 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.label = '';
+    this.disabled = false;
+    this.checked = false;
+    this.invalid = false;
+    this.required = false;
+    this.name = '';
+    this.value = '';
+  }
+  render() {
+    const { checked, disabled, hostElement, label, name, invalid, required, value } = this;
+    let input = hostElement.querySelector('input[type="hidden"]');
+    if (input && !name) {
+      input.parentNode.removeChild(input);
+    }
+    if (!input && name) {
+      input = hostElement.ownerDocument.createElement('input');
+      input.type = 'hidden';
+      hostElement.appendChild(input);
+    }
+    if (input && name) {
+      input.name = name;
+      input.value = checked ? value || '' : '';
+    }
+    return (h("div", { class: clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {
+        'utrecht-form-field--invalid': invalid,
+      }) }, h("p", { class: "utrecht-form-field__label utrecht-form-field__label--checkbox" }, h("label", { class: clsx('utrecht-form-label', {
+        'utrecht-form-label--disabled': disabled,
+      }), htmlFor: "input" }, h("input", { id: "input", type: "checkbox", class: clsx('utrecht-form-field__input', 'utrecht-checkbox', 'utrecht-checkbox--custom', 'utrecht-checkbox--html-input', {
+        'utrecht-checkbox--disabled': disabled,
+        'utrecht-checkbox--invalid': invalid,
+        'utrecht-checkbox--required': required,
+      }), "aria-invalid": invalid || undefined, disabled: disabled, required: required, checked: checked, 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);
+      } }), ' ', label, h("slot", { name: "label" })), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__description utrecht-form-field__description--invalid", id: "error-message" }, h("slot", { name: "error-message" })))), h("utrecht-form-field-description", { class: "utrecht-form-field__description", id: "description" }, h("slot", { name: "description" })), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return formFieldCheckboxCss; }
+}, [1, "utrecht-form-field-checkbox", {
+    "label": [1],
+    "disabled": [516],
+    "checked": [516],
+    "invalid": [516],
+    "required": [516],
+    "name": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-form-field-checkbox", "utrecht-form-field-description"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-form-field-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FormFieldCheckbox);
+      }
+      break;
+    case "utrecht-form-field-description":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UtrechtFormFieldCheckbox = FormFieldCheckbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldCheckbox, defineCustomElement };
+
+//# sourceMappingURL=utrecht-form-field-checkbox.js.map

package/dist/components/utrecht-form-field-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-form-field-checkbox.js","mappings":"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","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/checkbox/css\";\n@import \"~@utrecht/components/custom-checkbox/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-checkbox',\n  styleUrl: 'form-field-checkbox.scss',\n  shadow: true,\n})\nexport class FormFieldCheckbox {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() label: string = '';\n  @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n  @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n  @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n  @Prop() name: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled, hostElement, label, name, invalid, required, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = checked ? value || '' : '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            <input\n              id=\"input\"\n              type=\"checkbox\"\n              class={clsx(\n                'utrecht-form-field__input',\n                'utrecht-checkbox',\n                'utrecht-checkbox--custom',\n                'utrecht-checkbox--html-input',\n                {\n                  'utrecht-checkbox--disabled': disabled,\n                  'utrecht-checkbox--invalid': invalid,\n                  'utrecht-checkbox--required': required,\n                },\n              )}\n              aria-invalid={invalid || undefined}\n              disabled={disabled}\n              required={required}\n              checked={checked}\n              value={value}\n              onBlur={(evt) => this.utrechtBlur.emit(evt)}\n              onChange={(evt) => this.utrechtChange.emit(evt)}\n              onFocus={(evt) => this.utrechtFocus.emit(evt)}\n              onInput={(evt) => {\n                this.checked = (evt.target as HTMLInputElement).checked;\n                this.utrechtInput.emit(evt);\n              }}\n            />{' '}\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n          {invalid && (\n            <utrecht-form-field-description\n              status=\"invalid\"\n              class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n              id=\"error-message\"\n            >\n              <slot name=\"error-message\"></slot>\n            </utrecht-form-field-description>\n          )}\n        </p>\n        <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-description.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldDescription extends Components.UtrechtFormFieldDescription, HTMLElement {}
+export const UtrechtFormFieldDescription: {
+  prototype: UtrechtFormFieldDescription;
+  new (): UtrechtFormFieldDescription;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-description.js

@@ -0,0 +1,8 @@
+import { F as FormFieldDescription, d as defineCustomElement$1 } from './form-field-description.js';
+
+const UtrechtFormFieldDescription = FormFieldDescription;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldDescription, defineCustomElement };
+
+//# sourceMappingURL=utrecht-form-field-description.js.map

package/dist/components/utrecht-form-field-description.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-form-field-description.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/utrecht-form-field-error-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldErrorMessage extends Components.UtrechtFormFieldErrorMessage, HTMLElement {}
+export const UtrechtFormFieldErrorMessage: {
+  prototype: UtrechtFormFieldErrorMessage;
+  new (): UtrechtFormFieldErrorMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-error-message.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const formFieldErrorMessageCss = ".utrecht-form-field-error-message{--utrecht-document-color:currentColor;background-color:var(--utrecht-form-field-error-message-background-color);color:var(--utrecht-form-field-error-message-color);display:block;font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-error-message-font-size, inherit);font-style:var(--utrecht-form-field-error-message-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));padding-block-end:var(--utrecht-form-field-error-message-padding-block-end);padding-block-start:var(--utrecht-form-field-error-message-padding-block-start);padding-inline-end:var(--utrecht-form-field-error-message-padding-inline-end);padding-inline-start:var(--utrecht-form-field-error-message-padding-inline-start)}.utrecht-form-field-error-message>*{--utrecht-space-around:1}:host{--utrecht-document-color:currentColor;background-color:var(--utrecht-form-field-error-message-background-color);color:var(--utrecht-form-field-error-message-color);display:block;font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-error-message-font-size, inherit);font-style:var(--utrecht-form-field-error-message-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));padding-block-end:var(--utrecht-form-field-error-message-padding-block-end);padding-block-start:var(--utrecht-form-field-error-message-padding-block-start);padding-inline-end:var(--utrecht-form-field-error-message-padding-inline-end);padding-inline-start:var(--utrecht-form-field-error-message-padding-inline-start)}:host>*{--utrecht-space-around:1}:host([hidden]){display:none !important}";
+
+const FormFieldErrorMessage = /*@__PURE__*/ proxyCustomElement(class FormFieldErrorMessage extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get style() { return formFieldErrorMessageCss; }
+}, [1, "utrecht-form-field-error-message"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-form-field-error-message"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-form-field-error-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FormFieldErrorMessage);
+      }
+      break;
+  } });
+}
+
+const UtrechtFormFieldErrorMessage = FormFieldErrorMessage;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldErrorMessage, defineCustomElement };
+
+//# sourceMappingURL=utrecht-form-field-error-message.js.map

package/dist/components/utrecht-form-field-error-message.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-form-field-error-message.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,4oEAA4oE;;MCYhqE,qBAAqB;;;;;;EAChC,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-error-message.scss?tag=utrecht-form-field-error-message&encapsulation=shadow","src/components/form-field-error-message.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/form-field-error-message/css\";\n\n:host {\n  @include utrecht-form-field-error-message;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-form-field-error-message',\n  styleUrl: 'form-field-error-message.scss',\n  shadow: true,\n})\nexport class FormFieldErrorMessage {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldTextarea extends Components.UtrechtFormFieldTextarea, HTMLElement {}
+export const UtrechtFormFieldTextarea: {
+  prototype: UtrechtFormFieldTextarea;
+  new (): UtrechtFormFieldTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-textarea.js

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$2 } from './form-field-description.js';
+
+const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.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);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))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--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)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
+
+const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextarea 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.invalid = false;
+    this.label = '';
+    this.name = '';
+    this.readOnly = false;
+    this.placeholder = '';
+    this.required = false;
+    this.value = '';
+  }
+  render() {
+    const { disabled, hostElement, invalid, label, name, placeholder, readOnly, required, value } = this;
+    let input = hostElement.querySelector('input[type="hidden"]');
+    if (input && !name) {
+      input.parentNode.removeChild(input);
+    }
+    if (!input && name) {
+      input = hostElement.ownerDocument.createElement('input');
+      input.type = 'hidden';
+      hostElement.appendChild(input);
+    }
+    if (input && name) {
+      input.name = name;
+      input.value = value || '';
+    }
+    return (h("div", { class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
+        'utrecht-form-field--invalid': invalid,
+      }) }, h("p", { class: "utrecht-form-field__label" }, h("label", { class: clsx('utrecht-form-label', {
+        'utrecht-form-label--disabled': disabled,
+      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), h("p", { class: "utrecht-form-field__input" }, h("textarea", { id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.value = evt.target.value;
+        this.utrechtInput.emit(evt);
+      } }, value)), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return formFieldTextareaCss; }
+}, [1, "utrecht-form-field-textarea", {
+    "disabled": [516],
+    "invalid": [516],
+    "label": [1],
+    "name": [1],
+    "readOnly": [516, "readonly"],
+    "placeholder": [1],
+    "required": [516],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-form-field-textarea", "utrecht-form-field-description"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-form-field-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FormFieldTextarea);
+      }
+      break;
+    case "utrecht-form-field-description":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UtrechtFormFieldTextarea = FormFieldTextarea;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldTextarea, defineCustomElement };
+
+//# sourceMappingURL=utrecht-form-field-textarea.js.map

package/dist/components/utrecht-form-field-textarea.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-form-field-textarea.js","mappings":"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","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textarea/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-textarea',\n  styleUrl: 'form-field-textarea.scss',\n  shadow: true,\n})\nexport class FormFieldTextarea {\n  @Element() hostElement!: HTMLElement;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() name: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { disabled, hostElement, invalid, label, name, placeholder, readOnly, required, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <p class=\"utrecht-form-field__input\">\n          <textarea\n            id=\"input\"\n            class={clsx(\n              'utrecht-textarea',\n              'utrecht-textarea--html-textarea',\n              disabled && 'utrecht-textarea--disabled',\n              invalid && 'utrecht-textarea--invalid',\n              readOnly && 'utrecht-textarea--readonly',\n            )}\n            aria-invalid={invalid}\n            disabled={disabled}\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            onBlur={(evt) => this.utrechtBlur.emit(evt)}\n            onChange={(evt) => this.utrechtChange.emit(evt)}\n            onFocus={(evt) => this.utrechtFocus.emit(evt)}\n            onInput={(evt) => {\n              this.value = (evt.target as HTMLTextAreaElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          >\n            {value}\n          </textarea>\n        </p>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-textbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldTextbox extends Components.UtrechtFormFieldTextbox, HTMLElement {}
+export const UtrechtFormFieldTextbox: {
+  prototype: UtrechtFormFieldTextbox;
+  new (): UtrechtFormFieldTextbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;