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

package/dist/collection/templates/contact-card-template/stencil.js

@@ -0,0 +1,25 @@
+import { Component, h } from "@stencil/core";
+export class ContactCardTemplate {
+  render() {
+    return (h("div", { class: "utrecht-contact-card" },
+      h("utrecht-heading-2", null, "Hulp en contact"),
+      h("div", { class: "utrecht-contact-card__content" },
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "Telefoon"),
+          h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" },
+            h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")),
+          h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")),
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "E-mail"),
+          h("utrecht-paragraph", null,
+            h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+  }
+  static get is() { return "utrecht-contact-card-template"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/textarea/bem.js

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  hover: false,
+  invalid: false,
+  placeholder: '',
+  readOnly: false,
+  required: false,
+  textContent: '',
+};
+
+export const TextArea = ({
+  disabled = false,
+  focus = false,
+  hover = false,
+  invalid = false,
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  textContent = '',
+}) =>
+  `<textarea class="${clsx(
+    'utrecht-textarea',
+    disabled && 'utrecht-textarea--disabled',
+    focus && 'utrecht-textarea--focus',
+    hover && 'utrecht-textarea--hover',
+    invalid && 'utrecht-textarea--invalid',
+    readOnly && 'utrecht-textarea--readonly',
+    required && 'utrecht-textarea--required',
+  )}"${placeholder ? ` placeholder="${placeholder}"` : ''}>${textContent}</textarea>`;

package/dist/collection/textarea/html.js

@@ -0,0 +1,22 @@
+export const defaultArgs = {
+  disabled: false,
+  invalid: false,
+  label: '',
+  placeholder: '',
+  readOnly: false,
+  required: false,
+  textContent: '',
+};
+
+export const TextArea = ({
+  disabled = false,
+  invalid = false,
+  label = '',
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  textContent = '',
+}) =>
+  `<textarea class="utrecht-textarea"${disabled ? ' disabled' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    placeholder ? ` placeholder="${placeholder}"` : ''
+  }${readOnly ? ' readonly' : ''}${required ? ' required' : ''}>${textContent}</textarea>`;

package/dist/collection/textbox/bem.js

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  disabled: false,
+  focus: false,
+  invalid: false,
+  readOnly: false,
+  required: false,
+  placeholder: '',
+  value: '',
+};
+
+export const TextBox = ({
+  disabled = false,
+  focus = false,
+  invalid = false,
+  placeholder = '',
+  readOnly = false,
+  required = false,
+  value = '',
+}) =>
+  `<input class="${clsx(
+    'utrecht-textbox',
+    disabled && 'utrecht-textbox--disabled',
+    focus && 'utrecht-textbox--focus',
+    invalid && 'utrecht-textbox--invalid',
+    readOnly && 'utrecht-textbox--readonly',
+    required && 'utrecht-textbox--required',
+  )}"${placeholder ? ` placeholder="${placeholder}"` : ''} value="${value}">`;

package/dist/collection/textbox/stencil.css

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-textbox {
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
+  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
+  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
+  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
+  border-style: solid;
+  box-sizing: border-box;
+  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
+  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
+  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
+  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
+  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
+  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
+  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
+  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
+  width: 100%;
+}
+
+.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
+}
+
+.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled {
+  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-textbox--focus, .utrecht-textbox--html-input:focus {
+  background-color: var(--utrecht-focus-background-color);
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  color: var(--utrecht-focus-color, inherit);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+}
+
+.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
+  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+}
+
+.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder {
+  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+  opacity: 100%;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/textbox/stencil.js

@@ -0,0 +1,297 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+export class Textbox {
+  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("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) => {
+        this.value = evt.target.value;
+        this.utrechtInput.emit(evt);
+      } }));
+  }
+  static get is() { return "utrecht-textbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.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": {}
+      }
+    }]; }
+}

package/dist/collection/unordered-list/bem.js

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+const defaultArgs = {
+  distanced: false,
+  items: [],
+  nested: false,
+};
+
+export const UnorderedList = ({ distanced = false, items = [], nested = false }) =>
+  `<ul class="${clsx(
+    'utrecht-unordered-list',
+    distanced && 'utrecht-unordered-list--distanced',
+    nested && 'utrecht-unordered-list--nested',
+  )}">
+${items
+  .map(
+    ({ items: subItems, textContent }) =>
+      `  <li class="utrecht-unordered-list__item">${textContent || ''}${
+        subItems ? UnorderedList({ nested: true, items: subItems }) : ''
+      }</li>`,
+  )
+  .join('\n')}
+</ul>`;