@utrecht/web-component-library-stencil 1.0.2-alpha.0 → 1.1.1-alpha.0

package/dist/collection/components/link-button.js

@@ -11,9 +11,70 @@ export class LinkButton {
     this.type = undefined;
     this.inline = undefined;
     this.pressed = undefined;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formEnctype = undefined;
+    this.formMethod = undefined;
+    this.formNoValidate = undefined;
+    this.formTarget = undefined;
+    this.popoverTarget = undefined;
+    this.popoverTargetAction = undefined;
+    this.name = undefined;
+    this.value = undefined;
   }
   render() {
-    return (h("button", { class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button' }, h("slot", null)));
+    const { hostElement, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
+    const handleClick = () => {
+      const button = this.hostElement.querySelector('button[hidden]');
+      if (button) {
+        button.click();
+      }
+    };
+    let button = hostElement.querySelector('button[hidden]');
+    const needsButton = !!(name ||
+      form ||
+      formTarget ||
+      formEnctype ||
+      formMethod ||
+      formNoValidate ||
+      popoverTarget ||
+      popoverTargetAction ||
+      type === 'submit');
+    if (button && !needsButton) {
+      button.parentNode.removeChild(button);
+    }
+    if (!button && needsButton) {
+      button = hostElement.ownerDocument.createElement('button');
+      button.hidden = true;
+      button.tabIndex = -1;
+      button.ariaHidden = 'true';
+      hostElement.appendChild(button);
+    }
+    const setAttribute = (el, name, value) => {
+      if (typeof value === 'string') {
+        el.setAttribute(name, value);
+      }
+      else {
+        el.removeAttribute(name);
+      }
+    };
+    if (button) {
+      setAttribute(button, 'name', name);
+      setAttribute(button, 'type', type);
+      setAttribute(button, 'form', form);
+      setAttribute(button, 'formaction', formAction);
+      setAttribute(button, 'form', form);
+      setAttribute(button, 'formtarget', formTarget);
+      setAttribute(button, 'formenctype', formEnctype);
+      setAttribute(button, 'formmethod', formMethod);
+      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);
+      setAttribute(button, 'popovertargetaction', popoverTargetAction);
+      setAttribute(button, 'popovertarget', popoverTarget);
+      setAttribute(button, 'type', type);
+      button.style.display = 'none';
+      button.value = value || '';
+    }
+    return (h("button", { class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", null)));
   }
   static get is() { return "utrecht-link-button"; }
   static get encapsulation() { return "shadow"; }
@@ -96,8 +157,179 @@ export class LinkButton {
         },
         "attribute": "pressed",
         "reflect": false
+      },
+      "form": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "form",
+        "reflect": true
+      },
+      "formAction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formaction",
+        "reflect": true
+      },
+      "formEnctype": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formenctype",
+        "reflect": true
+      },
+      "formMethod": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formmethod",
+        "reflect": true
+      },
+      "formNoValidate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formnovalidate",
+        "reflect": true
+      },
+      "formTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formtarget",
+        "reflect": true
+      },
+      "popoverTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popovertarget",
+        "reflect": true
+      },
+      "popoverTargetAction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popovertargetaction",
+        "reflect": true
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       }
     };
   }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=link-button.js.map

package/dist/collection/components/link-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,UAAU;;;;;;;EAKrB,MAAM;IACJ,OAAO,CACL,cACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,kCAAkC,EAClC,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,MAAM,IAAI,6BAA6B,EAC5C,IAAI,CAAC,OAAO,IAAI,8BAA8B,CAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC1E,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ;MAE3B,eAAa,CACN,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\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, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  @Prop() disabled: boolean;\n  @Prop() type: string;\n  @Prop() inline: boolean;\n  @Prop() pressed: boolean;\n  render() {\n    return (\n      <button\n        class={clsx(\n          'utrecht-link-button',\n          'utrecht-link-button--html-button',\n          this.disabled && 'utrecht-link-button--disabled',\n          this.inline && 'utrecht-link-button--inline',\n          this.pressed && 'utrecht-link-button--pressed',\n        )}\n        disabled={this.disabled}\n        aria-pressed={typeof this.pressed === 'boolean' ? this.pressed : undefined}\n        type={this.type || 'button'}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\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 } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  @Prop() disabled: boolean;\n  @Prop() type: string;\n  @Prop() inline: boolean;\n  @Prop() pressed: boolean;\n  @Prop({ attribute: 'form', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Element() hostElement: HTMLElement;\n  render() {\n    const {\n      hostElement,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    const handleClick = () => {\n      const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n      if (button) {\n        button.click();\n      }\n    };\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-link-button',\n          'utrecht-link-button--html-button',\n          this.disabled && 'utrecht-link-button--disabled',\n          this.inline && 'utrecht-link-button--inline',\n          this.pressed && 'utrecht-link-button--pressed',\n        )}\n        disabled={this.disabled}\n        aria-pressed={typeof this.pressed === 'boolean' ? this.pressed : undefined}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/link.js

@@ -6,10 +6,12 @@
 import { h } from "@stencil/core";
 export class Link {
   constructor() {
+    this.download = undefined;
     this.href = undefined;
+    this.target = undefined;
   }
   render() {
-    return (h("a", { href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", null)));
+    return (h("a", { download: typeof this.download === 'string' ? this.download : undefined, href: typeof this.href === 'string' ? this.href : undefined, target: typeof this.target === 'string' ? this.target : undefined, class: "utrecht-link utrecht-link--html-a" }, h("slot", null)));
   }
   static get is() { return "utrecht-link"; }
   static get encapsulation() { return "shadow"; }
@@ -25,6 +27,23 @@ export class Link {
   }
   static get properties() {
     return {
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "download",
+        "reflect": false
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -41,6 +60,23 @@ export class Link {
         },
         "attribute": "href",
         "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;;;;EAEf,MAAM;IACJ,OAAO,CACL,SAAG,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,mCAAmC;MACvG,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\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, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-link',\n  styleUrl: 'link.scss',\n  shadow: true,\n})\nexport class Link {\n  @Prop() href: string;\n  render() {\n    return (\n      <a href={typeof this.href === 'string' ? this.href : undefined} class=\"utrecht-link utrecht-link--html-a\">\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;;;;;;EAIf,MAAM;IACJ,OAAO,CACL,SACE,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvE,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3D,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjE,KAAK,EAAC,mCAAmC;MAEzC,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\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, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-link',\n  styleUrl: 'link.scss',\n  shadow: true,\n})\nexport class Link {\n  @Prop() download?: string;\n  @Prop() href: string;\n  @Prop() target?: string;\n  render() {\n    return (\n      <a\n        download={typeof this.download === 'string' ? this.download : undefined}\n        href={typeof this.href === 'string' ? this.href : undefined}\n        target={typeof this.target === 'string' ? this.target : undefined}\n        class=\"utrecht-link utrecht-link--html-a\"\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/pre-heading.css

@@ -9,6 +9,10 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 :host {
+  display: contents;
+}
+
+p {
   color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-pre-heading-font-size);

package/dist/collection/components/pre-heading.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class PreHeading {
   render() {
-    return (h("p", { class: "utrecht-pre-heading" }, h("slot", null)));
+    return (h("p", null, h("slot", null)));
   }
   static get is() { return "utrecht-pre-heading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/pre-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"pre-heading.js","sourceRoot":"","sources":["../../../src/components/pre-heading.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,CACL,SAAG,KAAK,EAAC,qBAAqB;MAC5B,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\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-pre-heading',\n  styleUrl: 'pre-heading.scss',\n  shadow: true,\n})\nexport class PreHeading {\n  render() {\n    return (\n      <p class=\"utrecht-pre-heading\">\n        <slot></slot>\n      </p>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pre-heading.js","sourceRoot":"","sources":["../../../src/components/pre-heading.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,CACL;MACE,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\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-pre-heading',\n  styleUrl: 'pre-heading.scss',\n  shadow: true,\n})\nexport class PreHeading {\n  render() {\n    return (\n      <p>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n"]}

package/dist/collection/components/progress-list.css

@@ -5,8 +5,8 @@
  */
 .denhaag-process-steps__step {
   position: relative;
-  padding-block-end: 0;
-  padding-block-start: 0;
+  padding-block-end: var(--denhaag-process-steps-step-padding-block-end);
+  padding-block-start: var(--denhaag-process-steps-step-padding-block-start);
 }
 
 .denhaag-process-steps__step + .denhaag-process-steps__step {
@@ -28,7 +28,7 @@
 
 .denhaag-process-steps__step-header {
   display: flex;
-  align-items: center;
+  align-items: var(--denhaag-process-steps-step-header-align-items);
   gap: 16px;
 }
 

package/dist/collection/components/textarea.js

@@ -4,20 +4,34 @@
  */
 import { h } from "@stencil/core";
 import clsx from "clsx";
+/**
+ * I would prefer to set `rows` and `cols` only when the properties are actually set,
+ * and explicitly configure them when they are set.
+ *
+ * Currently Stencil offers no way to detect of the property value is the default value.
+ * `this.hasOwnProperty('cols')` does not work, for example.
+ *
+ * As a workaround, there is a check if `cols` and `rows` are equal to the
+ * `<textarea>` defaults of `2` and `20`.
+ */
+const HTML_DEFAULT_COLS = 20;
+const HTML_DEFAULT_ROWS = 2;
 export class Textarea {
   constructor() {
     this.autocomplete = '';
+    this.cols = HTML_DEFAULT_COLS;
     this.spellcheck = false;
     this.disabled = false;
     this.invalid = false;
     this.placeholder = '';
     this.readOnly = false;
     this.required = false;
+    this.rows = HTML_DEFAULT_ROWS;
     this.value = '';
   }
   render() {
-    const { autocomplete, disabled, invalid, placeholder, readOnly, required, spellcheck, value } = this;
-    return (h("textarea", { autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+    const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
+    return (h("textarea", { autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, 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("slot", null)));
@@ -54,6 +68,24 @@ export class Textarea {
         "reflect": false,
         "defaultValue": "''"
       },
+      "cols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cols",
+        "reflect": false,
+        "defaultValue": "HTML_DEFAULT_COLS"
+      },
       "spellcheck": {
         "type": "boolean",
         "mutable": false,
@@ -162,6 +194,24 @@ export class Textarea {
         "reflect": true,
         "defaultValue": "false"
       },
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rows",
+        "reflect": false,
+        "defaultValue": "HTML_DEFAULT_ROWS"
+      },
       "value": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.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,QAAQ;;wBACY,EAAE;sBACH,KAAK;oBACU,KAAK;mBACN,KAAK;uBACnB,EAAE;oBACoC,KAAK;oBAC5B,KAAK;iBAC1B,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAErG,OAAO,CACL,gBACE,YAAY,EAAE,YAAY,IAAI,IAAI,EAClC,KAAK,EAAE,IAAI,CACT,kBAAkB,EAClB,iCAAiC,EACjC,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,2BAA2B,EACtC,QAAQ,IAAI,4BAA4B,CACzC,EACD,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAAI,IAAI,EAC9B,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;QACf,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC;MAED,eAAQ,CACC,CACZ,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-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class Textarea {\n  @Prop() autocomplete: string = '';\n  @Prop() spellcheck: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\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 { autocomplete, disabled, invalid, placeholder, readOnly, required, spellcheck, value } = this;\n\n    return (\n      <textarea\n        autoComplete={autocomplete || null}\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        disabled={disabled}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        spellcheck={spellcheck || null}\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 HTMLTextAreaElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      >\n        <slot />\n      </textarea>\n    );\n  }\n}\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.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;AAExB;;;;;;;;;GASG;AACH,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAO5B,MAAM,OAAO,QAAQ;;wBACY,EAAE;gBACV,iBAAiB;sBACV,KAAK;oBACU,KAAK;mBACN,KAAK;uBACnB,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBAC3B,iBAAiB;iBAChB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEjH,OAAO,CACL,gBACE,YAAY,EAAE,YAAY,IAAI,IAAI,EAClC,KAAK,EAAE,IAAI,CACT,kBAAkB,EAClB,iCAAiC,EACjC,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,2BAA2B,EACtC,QAAQ,IAAI,4BAA4B,CACzC,EACD,IAAI,EAAE,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC9C,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAAI,IAAI,EAC9B,IAAI,EAAE,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC9C,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;QACf,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC;MAED,eAAQ,CACC,CACZ,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/**\n * I would prefer to set `rows` and `cols` only when the properties are actually set,\n * and explicitly configure them when they are set.\n *\n * Currently Stencil offers no way to detect of the property value is the default value.\n * `this.hasOwnProperty('cols')` does not work, for example.\n *\n * As a workaround, there is a check if `cols` and `rows` are equal to the\n * `<textarea>` defaults of `2` and `20`.\n */\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class Textarea {\n  @Prop() autocomplete: string = '';\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop() spellcheck: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\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, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;\n\n    return (\n      <textarea\n        autoComplete={autocomplete || null}\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        cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n        disabled={disabled}\n        dir=\"auto\"\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        spellcheck={spellcheck || null}\n        rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\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 HTMLTextAreaElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      >\n        <slot />\n      </textarea>\n    );\n  }\n}\n"]}

package/dist/collection/components/textbox.js

@@ -20,7 +20,7 @@ export class Textbox {
   }
   render() {
     const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
-    return (h("input", { class: clsx('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) => {
+    return (h("input", { class: clsx('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, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? 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);
       } }));
@@ -94,11 +94,11 @@ export class Textbox {
         "defaultValue": "false"
       },
       "min": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -112,11 +112,11 @@ export class Textbox {
         "defaultValue": "''"
       },
       "max": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

package/dist/collection/components/textbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"textbox.js","sourceRoot":"","sources":["../../../src/components/textbox.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,OAAO;;wBACyD,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,aACE,KAAK,EAAE,IAAI,CACT,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;QACf,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC,GACD,CACH,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-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\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      <input\n        class={clsx(\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    );\n  }\n}\n"]}
+{"version":3,"file":"textbox.js","sourceRoot":"","sources":["../../../src/components/textbox.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,OAAO;;wBACyD,EAAE;oBAChC,KAAK;mBACN,KAAK;eAClB,EAAE;eACF,EAAE;mBACP,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,aACE,KAAK,EAAE,IAAI,CACT,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,EAAC,MAAM,EACV,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EACjF,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EACjF,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;QACf,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC,GACD,CACH,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-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\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: number | string = '';\n  @Prop() max: number | 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      <input\n        class={clsx(\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        dir=\"auto\"\n        min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n        max={typeof max === 'number' ? String(max) : typeof max === 'string' ? 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    );\n  }\n}\n"]}