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

package/dist/collection/components/form-field-textbox/index.stencil.js

@@ -0,0 +1,306 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { h } from '@stencil/core';
+import clsx from 'clsx';
+export class FormFieldTextbox {
+  constructor() {
+    this.autoComplete = '';
+    this.disabled = false;
+    this.invalid = false;
+    this.min = '';
+    this.max = '';
+    this.pattern = '';
+    this.placeholder = '';
+    this.readOnly = false;
+    this.required = false;
+    this.type = '';
+    this.value = '';
+  }
+  render() {
+    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+    return (h("div", { class: "utrecht-form-field-textbox utrecht-form-field--textbox" }, h("input", { id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, 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);
+      } }), h("label", { class: "utrecht-form-field__label utrecht-form-label", htmlFor: "input" }, h("slot", null))));
+  }
+  static get is() { return "utrecht-form-field-textbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoComplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "autocomplete",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pattern",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "utrechtBlur",
+        "name": "utrechtBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtChange",
+        "name": "utrechtChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtFocus",
+        "name": "utrechtFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtInput",
+        "name": "utrechtInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=index.stencil.js.map

package/dist/collection/components/form-field-textbox/index.stencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stencil.js","sourceRoot":"","sources":["../../../../src/components/form-field-textbox/index.stencil.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,gBAAgB;;wBACgD,EAAE;oBAChC,KAAK;mBACN,KAAK;eAC3B,EAAE;eACF,EAAE;mBACE,EAAE;uBACE,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBACV,EAAE;iBAClB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAElH,OAAO,CACL,WAAK,KAAK,EAAC,wDAAwD;MACjE,aACE,EAAE,EAAC,OAAO,EACV,KAAK,EAAE,IAAI,CACT,2BAA2B,EAC3B,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAChD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EACrB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EACrB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;UACf,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;UACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9B,CAAC,GACD;MACF,aAAO,KAAK,EAAC,8CAA8C,EAAC,OAAO,EAAC,OAAO;QACzE,eAAa,CACP,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-textbox',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class FormFieldTextbox {\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: 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 { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;\n\n    return (\n      <div class=\"utrecht-form-field-textbox utrecht-form-field--textbox\">\n        <input\n          id=\"input\"\n          class={clsx(\n            'utrecht-form-field__input',\n            'utrecht-textbox',\n            'utrecht-textbox--html-input',\n            disabled && 'utrecht-textbox--disabled',\n            invalid && 'utrecht-textbox--invalid',\n            readOnly && 'utrecht-textbox--readonly',\n          )}\n          type={type || 'text'}\n          autoComplete={autoComplete ? autoComplete : null}\n          disabled={disabled}\n          min={min ? min : null}\n          max={max ? max : null}\n          pattern={pattern ? pattern : null}\n          placeholder={placeholder || null}\n          readonly={readOnly}\n          required={required}\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.value = (evt.target as HTMLInputElement).value;\n            this.utrechtInput.emit(evt);\n          }}\n        />\n        <label class=\"utrecht-form-field__label utrecht-form-label\" htmlFor=\"input\">\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/form-toggle/index.css

@@ -0,0 +1,116 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-form-toggle {
+  align-items: center;
+  border-color: var(--utrecht-form-toggle-border-color, currentColor);
+  border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
+  border-style: var(--utrecht-form-toggle-border-style, solid);
+  border-width: var(--utrecht-form-toggle-border-width, 1px);
+  color: var(--utrecht-form-toggle-color);
+  cursor: var(--utrecht-action-activate-cursor);
+  display: flex;
+  height: var(--utrecht-form-toggle-height, 2em);
+  padding-block-end: var(--utrecht-form-toggle-padding-block-end);
+  padding-block-start: var(--utrecht-form-toggle-padding-block-start);
+  padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
+  padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
+  position: relative;
+  user-select: none;
+  width: var(--utrecht-form-toggle-width, 6em);
+}
+
+.utrecht-form-toggle--focus, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {
+  border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
+  border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
+}
+
+.utrecht-form-toggle--hover, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {
+  background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
+  color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
+}
+
+.utrecht-form-toggle--disabled {
+  border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
+  border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-form-toggle__thumb {
+  /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
+  background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
+  border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
+  box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
+  margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
+  margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
+  min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
+  min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
+  z-index: 20;
+}
+
+.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  margin-inline-start: auto;
+}
+
+.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  margin-inline-end: auto;
+}
+
+.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
+  box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
+}
+
+.utrecht-form-toggle__track {
+  align-items: center;
+  background-color: var(--utrecht-form-toggle-accent-color);
+  border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
+  background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
+}
+
+.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
+  background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
+  color: var(--utrecht-form-toggle-disabled-color, black);
+}
+
+.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
+  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: -1px !important;
+  overflow: hidden !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
+  outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
+  outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
+}
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/components/form-toggle/index.stencil.js

@@ -0,0 +1,153 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { h } from '@stencil/core';
+import clsx from 'clsx';
+export class FormToggle {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    const { checked, disabled } = this;
+    const toggleInteraction = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.utrechtInput.emit(this);
+        this.utrechtChange.emit(this);
+      }
+    };
+    const handleClick = () => {
+      toggleInteraction();
+    };
+    const handleKeyPress = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        // Do not scroll the page using Space when the toggle is focussed
+        evt.preventDefault();
+      }
+    };
+    const handleKeyUp = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        toggleInteraction();
+      }
+    };
+    return (h("div", { class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+  }
+  static get is() { return "utrecht-form-toggle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "utrechtBlur",
+        "name": "utrechtBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtChange",
+        "name": "utrechtChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtFocus",
+        "name": "utrechtFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "utrechtInput",
+        "name": "utrechtInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=index.stencil.js.map

package/dist/collection/components/form-toggle/index.stencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stencil.js","sourceRoot":"","sources":["../../../../src/components/form-toggle/index.stencil.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,UAAU;;oBACwB,KAAK;mBACN,KAAK;;EAMjD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAEnC,MAAM,iBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC/B;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;MACvB,iBAAiB,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,EAAE;MAC7B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iEAAiE;QACjE,GAAG,CAAC,cAAc,EAAE,CAAC;OACtB;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,EAAE;MAC1B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QAC3C,iBAAiB,EAAE,CAAC;OACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW;MAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO;MAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO;MAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD;QAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-toggle',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class FormToggle {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled } = this;\n\n    const toggleInteraction = () => {\n      if (!this.disabled) {\n        this.checked = !this.checked;\n        this.utrechtInput.emit(this);\n        this.utrechtChange.emit(this);\n      }\n    };\n\n    const handleClick = () => {\n      toggleInteraction();\n    };\n\n    const handleKeyPress = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        // Do not scroll the page using Space when the toggle is focussed\n        evt.preventDefault();\n      }\n    };\n\n    const handleKeyUp = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        toggleInteraction();\n      }\n    };\n\n    return (\n      <div\n        class={clsx(\n          'utrecht-form-toggle',\n          checked && 'utrecht-form-toggle--checked',\n          !checked && 'utrecht-form-toggle--not-checked',\n          disabled && 'utrecht-form-toggle--disabled',\n        )}\n        tabIndex={disabled ? null : 0}\n        role=\"switch\"\n        aria-disabled={disabled ? 'true' : null}\n        onClick={handleClick}\n        onKeyPress={handleKeyPress}\n        onKeyUp={handleKeyUp}\n      >\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n        <div\n          class={clsx(\n            'utrecht-form-toggle__track',\n            checked && 'utrecht-form-toggle__track--checked',\n            !checked && 'utrecht-form-toggle__track--not-checked',\n            disabled && 'utrecht-form-toggle__track--disabled',\n          )}\n        >\n          <div\n            class={clsx(\n              'utrecht-form-toggle__thumb',\n              checked && 'utrecht-form-toggle__thumb--checked',\n              !checked && 'utrecht-form-toggle__thumb--not-checked',\n              disabled && 'utrecht-form-toggle__thumb--disabled',\n            )}\n          ></div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/generated/utrecht-icon-afspraak-maken/utrecht-icon-afspraak-maken.stencil.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class UtrechtIconAfspraakMaken {
+  render() {
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "CurrentColor" }, h("path", { d: "M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0ZM18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16Z" }), h("path", { d: "M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4Zm9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36Z" })));
+  }
+  static get is() { return "utrecht-icon-afspraak-maken"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../../icon/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../../icon/index.css"]
+    };
+  }
+}
+//# sourceMappingURL=utrecht-icon-afspraak-maken.stencil.js.map

package/dist/collection/components/generated/utrecht-icon-afspraak-maken/utrecht-icon-afspraak-maken.stencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utrecht-icon-afspraak-maken.stencil.js","sourceRoot":"","sources":["../../../../../src/components/generated/utrecht-icon-afspraak-maken/utrecht-icon-afspraak-maken.stencil.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,wBAAwB;EACnC,MAAM;IACJ,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc;MACnF,YAAM,CAAC,EAAC,kJAAkJ,GAAE;MAC5J,YAAM,CAAC,EAAC,0MAA0M,GAAE,CAChN,CAED,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afspraak-maken',\n  styleUrl: \"../../icon/index.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfspraakMaken {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"CurrentColor\">\n  <path d=\"M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0ZM18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16Z\"/>\n  <path d=\"M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4Zm9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36Z\"/>\n</svg>\n\n    );\n  }\n}\n"]}

package/dist/collection/components/generated/utrecht-icon-afval/utrecht-icon-afval.stencil.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class UtrechtIconAfval {
+  render() {
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "CurrentColor" }, h("circle", { cx: "10.08", cy: "33", r: "3" }), h("path", { d: "M30.08 2h-3c0-1.1-.9-2-2-2H9.03C7.95 0 7.07.88 7.07 1.96V2h-1c-.55 0-1 .45-1 1v3h26V3c0-.55-.45-1-1-1Zm-23 27 .06-.03c.83-.6 1.84-.97 2.94-.97 2.76 0 5 2.24 5 5 0 1.13-.39 2.16-1.02 3h7.34c1.53 0 2.81-1.15 2.98-2.67L27.08 8H7.07v21Z" })));
+  }
+  static get is() { return "utrecht-icon-afval"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../../icon/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../../icon/index.css"]
+    };
+  }
+}
+//# sourceMappingURL=utrecht-icon-afval.stencil.js.map

package/dist/collection/components/generated/utrecht-icon-afval/utrecht-icon-afval.stencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utrecht-icon-afval.stencil.js","sourceRoot":"","sources":["../../../../../src/components/generated/utrecht-icon-afval/utrecht-icon-afval.stencil.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,gBAAgB;EAC3B,MAAM;IACJ,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc;MACnF,cAAQ,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAE;MAClC,YAAM,CAAC,EAAC,0OAA0O,GAAE,CAChP,CAED,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval',\n  styleUrl: \"../../icon/index.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfval {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"CurrentColor\">\n  <circle cx=\"10.08\" cy=\"33\" r=\"3\"/>\n  <path d=\"M30.08 2h-3c0-1.1-.9-2-2-2H9.03C7.95 0 7.07.88 7.07 1.96V2h-1c-.55 0-1 .45-1 1v3h26V3c0-.55-.45-1-1-1Zm-23 27 .06-.03c.83-.6 1.84-.97 2.94-.97 2.76 0 5 2.24 5 5 0 1.13-.39 2.16-1.02 3h7.34c1.53 0 2.81-1.15 2.98-2.67L27.08 8H7.07v21Z\"/>\n</svg>\n\n    );\n  }\n}\n"]}

package/dist/collection/components/generated/utrecht-icon-afval-container/utrecht-icon-afval-container.stencil.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class UtrechtIconAfvalContainer {
+  render() {
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "CurrentColor" }, h("path", { d: "M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1ZM24 10H11V7h13v3Zm0 10H11v-8h13v8Zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2Zm-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1Z" })));
+  }
+  static get is() { return "utrecht-icon-afval-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../../icon/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../../icon/index.css"]
+    };
+  }
+}
+//# sourceMappingURL=utrecht-icon-afval-container.stencil.js.map

package/dist/collection/components/generated/utrecht-icon-afval-container/utrecht-icon-afval-container.stencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utrecht-icon-afval-container.stencil.js","sourceRoot":"","sources":["../../../../../src/components/generated/utrecht-icon-afval-container/utrecht-icon-afval-container.stencil.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,yBAAyB;EACpC,MAAM;IACJ,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc;MACnF,YAAM,CAAC,EAAC,gRAAgR,GAAE,CACtR,CAED,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-container',\n  styleUrl: \"../../icon/index.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalContainer {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"CurrentColor\">\n  <path d=\"M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1ZM24 10H11V7h13v3Zm0 10H11v-8h13v8Zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2Zm-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1Z\"/>\n</svg>\n\n    );\n  }\n}\n"]}