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

package/dist/collection/button/stencil.js

@@ -1,19 +1,58 @@
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
+import { Component, Element, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
 export class Button {
   render() {
-    return (h("button", { class: clsx("utrecht-button", this.disabled && "utrecht-button--disabled"), disabled: this.disabled },
+    const handleReset = () => {
+      var _a, _b;
+      const event = this.utrechtRequestReset.emit();
+      if (!event.defaultPrevented) {
+        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.reset();
+      }
+    };
+    const handleSubmit = () => {
+      var _a, _b;
+      const event = this.utrechtRequestSubmit.emit();
+      if (!event.defaultPrevented) {
+        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+      }
+    };
+    const handleClick = () => {
+      if (this.type === 'reset') {
+        handleReset();
+      }
+      else if (this.type === 'submit') {
+        handleSubmit();
+      }
+    };
+    return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', this.type === 'submit' && 'utrecht-button--submit'), "aria-busy": this.busy ? 'true' : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick },
       h("slot", null)));
   }
   static get is() { return "utrecht-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
   static get properties() { return {
+    "busy": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "busy",
+      "reflect": false
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -30,6 +69,55 @@ export class Button {
       },
       "attribute": "disabled",
       "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
     }
   }; }
+  static get events() { return [{
+      "method": "utrechtRequestReset",
+      "name": "utrechtRequestReset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtRequestSubmit",
+      "name": "utrechtRequestSubmit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/button-group/css/template.js

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  direction: 'horizontal',
+  innerHTML: '',
+};
+
+export const ButtonGroup = ({ innerHTML = '', direction = 'horizontal' }) =>
+  `<div class="${clsx(
+    'utrecht-button-group',
+    direction === 'horizontal' && 'utrecht-button-group--horizontal',
+    direction === 'vertical' && 'utrecht-button-group--vertical',
+  )}" role="group">${innerHTML}</div>`;

package/dist/collection/button-link/css/template.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  external: false,
+  hover: false,
+  href: '',
+  focus: false,
+  focusVisible: false,
+  textContent: '',
+};
+
+export const ButtonLink = ({
+  external = false,
+  hover = false,
+  href = '',
+  focus = false,
+  focusVisible = false,
+  textContent = '',
+}) =>
+  `<a role="button" href="${href}" class="${clsx(
+    'utrecht-button-link',
+    hover && 'utrecht-button-link--hover',
+    focus && 'utrecht-button-link--focus',
+    focusVisible && 'utrecht-button-link--focus-visible',
+  )}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>`;

package/dist/collection/checkbox/css/template.js

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const Checkbox = ({ checked = false, disabled = false }) =>
+  `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
+    'utrecht-checkbox',
+    'utrecht-checkbox--html-input',
+    checked && 'utrecht-checkbox--checked',
+    disabled && 'utrecht-checkbox--disabled',
+  )}">`;

package/dist/collection/checkbox/html/template.js

@@ -0,0 +1,14 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const Checkbox = ({ checked = false, disabled = false, invalid = false, required = false, value = '' }) =>
+  `<div class="utrecht-html">
+  <input type="checkbox"${checked ? ' checked' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    disabled ? ' disabled' : ''
+  }${required ? ' required' : ''}${value ? ` value="${value}"` : ''}>
+</div>`;

package/dist/collection/checkbox/web-component/index.css

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-checkbox--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-checkbox--html-input:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+.utrecht-checkbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/checkbox/web-component/index.stencil.js

@@ -0,0 +1,164 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Checkbox {
+  constructor() {
+    this.disabled = false;
+    this.readOnly = false;
+    this.checked = false;
+    this.value = '';
+  }
+  render() {
+    const { checked, disabled, value } = this;
+    return (h("input", { class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.checked = evt.target.checked;
+        this.utrechtInput.emit(evt);
+      } }));
+  }
+  static get is() { return "utrecht-checkbox"; }
+  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"
+    },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "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": false,
+      "defaultValue": "false"
+    },
+    "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/checkbox/web-component/template.js

@@ -0,0 +1,8 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  value: '',
+};
+
+export const Checkbox = ({ checked = false, disabled = false, value = '' } = defaultArgs) =>
+  `<utrecht-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''} value="${value}" />`;

package/dist/collection/collection-manifest.json

@@ -1,22 +1,72 @@
 {
   "entries": [
-    "./article/stencil.js",
-    "./badge-counter/stencil.js",
-    "./badge-data/stencil.js",
-    "./badge-status/stencil.js",
+    "./article/web-component/index.stencil.js",
+    "./backdrop/web-component/index.stencil.js",
+    "./badge-counter/web-component/index.stencil.js",
+    "./badge-data/web-component/index.stencil.js",
+    "./badge-status/web-component/index.stencil.js",
+    "./breadcrumb/web-component/index.stencil.js",
     "./button/stencil.js",
-    "./document/stencil.js",
-    "./heading/stencil.js",
+    "./checkbox/web-component/index.stencil.js",
+    "./custom-checkbox/web-component/index.stencil.js",
+    "./digid-button/web-component/index.stencil.js",
+    "./digid-logo/web-component/index.stencil.js",
+    "./document/web-component/index.stencil.js",
+    "./eherkenning-logo/web-component/index.stencil.js",
+    "./eidas-logo/web-component/index.stencil.js",
+    "./form-field-checkbox/web-component/index.stencil.js",
+    "./form-field-description/web-component/index.stencil.js",
+    "./form-field-textarea/web-component/index.stencil.js",
+    "./form-field-textbox/web-component/index.stencil.js",
+    "./form-toggle/web-component/index.stencil.js",
+    "./heading/web-component/index.stencil.js",
+    "./heading-1/web-component/index.stencil.js",
+    "./heading-2/web-component/index.stencil.js",
+    "./heading-3/web-component/index.stencil.js",
+    "./heading-4/web-component/index.stencil.js",
+    "./heading-5/web-component/index.stencil.js",
+    "./heading-6/web-component/index.stencil.js",
     "./html-content/stencil.js",
-    "./navigatie sidenav/stencil.js",
-    "./page-footer/stencil.js",
-    "./paragraph/stencil.js",
-    "./separator/stencil.js"
+    "./icon/web-component/afval.stencil.js",
+    "./icon/web-component/arrow.stencil.js",
+    "./icon/web-component/checkmark.stencil.js",
+    "./icon/web-component/cross.stencil.js",
+    "./icon/web-component/error.stencil.js",
+    "./icon/web-component/facebook.stencil.js",
+    "./icon/web-component/filter.stencil.js",
+    "./icon/web-component/information.stencil.js",
+    "./icon/web-component/instagram.stencil.js",
+    "./icon/web-component/linkedin.stencil.js",
+    "./icon/web-component/list.stencil.js",
+    "./icon/web-component/loupe.stencil.js",
+    "./icon/web-component/melding.stencil.js",
+    "./icon/web-component/paspoort.stencil.js",
+    "./icon/web-component/rijbewijs.stencil.js",
+    "./icon/web-component/toeslag.stencil.js",
+    "./icon/web-component/trouwen.stencil.js",
+    "./icon/web-component/twitter.stencil.js",
+    "./icon/web-component/verhuizen.stencil.js",
+    "./icon/web-component/warning.stencil.js",
+    "./icon/web-component/whatsapp.stencil.js",
+    "./icon/web-component/zoomin.stencil.js",
+    "./icon/web-component/zoomout.stencil.js",
+    "./logo/web-component/index.stencil.js",
+    "./logo-button/web-component/index.stencil.js",
+    "./navigatie sidenav/web-component/index.stencil.js",
+    "./page/web-component/index.stencil.js",
+    "./page-content/web-component/index.stencil.js",
+    "./page-footer/web-component/index.stencil.js",
+    "./page-header/web-component/stencil.js",
+    "./pagination/web-component/index.stencil.js",
+    "./paragraph/web-component/index.stencil.js",
+    "./separator/web-component/index.stencil.js",
+    "./templates/contact-card-template/web-component/index.stencil.js",
+    "./textbox/web-component/index.stencil.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.6.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/custom-checkbox/css/template.js

@@ -0,0 +1,46 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  active: false,
+  checked: false,
+  disabled: false,
+  focus: false,
+  indeterminate: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const CustomCheckbox = ({
+  active = false,
+  checked = false,
+  disabled = false,
+  focus = false,
+  indeterminate = false,
+  invalid = false,
+  required = false,
+  value = '',
+}) =>
+  `<span class="utrecht-custom-checkbox">
+  <input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''}${required ? ' required' : ''}${
+    value ? ` value="${value}"` : ''
+  } class="utrecht-custom-checkbox__input">
+  <span class="${clsx(
+    'utrecht-custom-checkbox__box',
+    active && 'utrecht-custom-checkbox__box--active',
+    checked && 'utrecht-custom-checkbox__box--checked',
+    !checked && 'utrecht-custom-checkbox__box--not-checked',
+    disabled && 'utrecht-custom-checkbox__box--disabled',
+    focus && 'utrecht-custom-checkbox__box--focus',
+    invalid && 'utrecht-custom-checkbox__box--invalid',
+    indeterminate && 'utrecht-custom-checkbox__box--indeterminate',
+  )}">
+  <utrecht-icon-checkmark class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--checked">✔</utrecht-icon-checkmark>
+  <utrecht-icon-indeterminate class="utrecht-custom-checkbox__icon utrecht-custom-checkbox__icon--indeterminate">■</utrecht-icon-indeterminate>
+  </span>
+</span>`;