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

package/dist/collection/checkbox/bem.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/stencil.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/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 {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.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/collection-manifest.json

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

package/dist/collection/custom-checkbox/bem.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>`;

package/dist/collection/custom-checkbox/stencil.css

@@ -0,0 +1,184 @@
+/**
+ * @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 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;
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-custom-checkbox {
+  --utrecht-icon-size: var(--utrecht-custom-checkbox-icon-size, calc(0.75 * var(--utrecht-custom-checkbox-size)));
+  display: inline-block;
+  height: var(--utrecht-custom-checkbox-size);
+  position: relative;
+  width: var(--utrecht-custom-checkbox-size);
+}
+
+.utrecht-custom-checkbox__input,
+.utrecht-custom-checkbox__box {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.utrecht-custom-checkbox__input {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  height: var(--utrecht-custom-checkbox-size);
+  opacity: 0%;
+  width: var(--utrecht-custom-checkbox-size);
+  z-index: 10;
+}
+
+.utrecht-custom-checkbox__box {
+  align-items: center;
+  background-color: var(--utrecht-custom-checkbox-background-color);
+  border-color: var(--utrecht-custom-checkbox-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-custom-checkbox-border-radius, var(--utrecht-form-input-border-radius));
+  border-style: solid;
+  border-width: var(--utrecht-custom-checkbox-border-width, var(--utrecht-form-input-border-width));
+  box-sizing: border-box;
+  color: var(--utrecht-custom-checkbox-color);
+  display: flex;
+  height: var(--utrecht-custom-checkbox-size);
+  justify-content: center;
+  pointer-events: none;
+  width: var(--utrecht-custom-checkbox-size);
+  z-index: 1000;
+}
+
+.utrecht-custom-checkbox__box--checked {
+  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-checked-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--disabled {
+  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-disabled-color, var(--utrecht-custom-checkbox-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-custom-checkbox__box--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--invalid {
+  background-color: var(--utrecht-custom-checkbox-invalid-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-invalid-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--active {
+  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--focus, .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--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-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+  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-custom-checkbox__input:focus:not(:focus-visible) ~ .utrecht-custom-checkbox__box {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-custom-checkbox__icon--checked,
+.utrecht-custom-checkbox__icon--indeterminate {
+  display: none;
+}
+
+.utrecht-custom-checkbox__box--checked .utrecht-custom-checkbox__icon--checked {
+  display: block;
+}
+
+.utrecht-custom-checkbox__box--indeterminate .utrecht-custom-checkbox__icon--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box .utrecht-custom-checkbox__icon--indeterminate {
+  display: block;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}