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

package/dist/collection/breadcrumb/stencil.css

@@ -1,148 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-breadcrumb {
-  --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
-  --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
-  --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
-  --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
-  --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
-  --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
-  --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
-  --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
-  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-breadcrumb-font-size);
-  text-transform: var(--utrecht-document-text-transform, inherit);
-}
-
-.utrecht-breadcrumb__list {
-  block-size: var(--utrecht-breadcrumb-block-size);
-  display: flex;
-}
-
-ol.utrecht-breadcrumb__list {
-  list-style: none;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  padding-inline-start: 0;
-}
-
-.utrecht-breadcrumb__item {
-  block-size: 100%;
-}
-
-.utrecht-breadcrumb__link {
-  background-color: var(--utrecht-breadcrumb-link-background-color);
-  display: block;
-  padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
-  padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
-  padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
-  padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
-}
-
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-breadcrumb--arrows {
-  /* https://css-tricks.com/triangle-breadcrumbs/ */
-  --utrecht-breadcrumb-arrow-size: 24px;
-  overflow: hidden;
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
-  padding-inline-end: 0;
-  position: relative;
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
-  border-block-end-width: var(--utrecht-breadcrumb-block-size);
-  border-block-start-width: var(--utrecht-breadcrumb-block-size);
-  border-color: transparent;
-  border-style: solid;
-  content: " ";
-  display: block;
-  height: 0;
-  left: 100%;
-  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
-  position: absolute;
-  top: 50%;
-  width: 0;
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
-  border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
-  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
-  z-index: 2;
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
-  border-inline-start-color: var(--utrecht-document-background-color);
-  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
-  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
-  margin-inline-start: 1px;
-  z-index: 1;
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
-  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
-}
-.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
-  padding-inline-start: calc( var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size) );
-}
-
-.utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
-  margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-link {
-  color: var(--utrecht-link-color, blue);
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-}
-
-.utrecht-link:visited,
-.utrecht-link--visited {
-  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
-}
-
-.utrecht-link:hover,
-.utrecht-link--hover {
-  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
-  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
-}
-
-.utrecht-link:active,
-.utrecht-link--active {
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
-}
-
-.utrecht-link:focus,
-.utrecht-link--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);
-  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
-  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
-}
-
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-link--telephone {
-  white-space: nowrap;
-}
-
-:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none !important;
-}

package/dist/collection/breadcrumb/stencil.js

@@ -1,62 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
-export class Breadcrumb {
-  render() {
-    const { json, variant } = this;
-    console.log(json);
-    const items = json ? JSON.parse(json) : [];
-    return (h("nav", { class: clsx("utrecht-breadcrumb", variant === "arrows" && "utrecht-breadcrumb--arrows") },
-      h("ol", { class: "utrecht-breadcrumb__list", itemscope: true, itemtype: "https://schema.org/BreadcrumbList" }, items.map(({ href, title, current }, index) => (h("li", { key: href, class: "utrecht-breadcrumb__item", itemscope: true, itemtype: "https://schema.org/ListItem", itemprop: "itemListElement" },
-        h("a", { class: clsx("utrecht-breadcrumb__link", "utrecht-link", current && "utrecht-link--current"), href: href, "aria-current": current ? "location" : null, itemprop: "item" },
-          h("span", { class: "utrecht-breadcrumb__text", itemprop: "name" }, title),
-          h("meta", { itemprop: "position", content: index + 1 }))))))));
-  }
-  static get is() { return "utrecht-breadcrumb"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["stencil.css"]
-  }; }
-  static get properties() { return {
-    "json": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "json",
-      "reflect": false
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": false
-    }
-  }; }
-}

package/dist/collection/button/bem.js

@@ -1,34 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-
-export const defaultArgs = {
-  active: false,
-  busy: false,
-  disabled: false,
-  focus: false,
-  hover: false,
-  textContent: '',
-  type: 'button',
-};
-
-export const Button = ({
-  active = false,
-  busy = false,
-  disabled = false,
-  focus = false,
-  hover = false,
-  textContent = '',
-  type = 'button',
-}) =>
-  `<button class="${clsx('utrecht-button', {
-    'utrecht-button--active': active,
-    'utrecht-button--busy': busy,
-    'utrecht-button--hover': hover,
-    'utrecht-button--focus': focus,
-    'utrecht-button--disabled': disabled,
-  })}"${disabled ? ' aria-disabled="true"' : ''} type="${type}">${textContent}</button>`;

package/dist/collection/button/html.js

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-export const defaultArgs = {
-  busy: false,
-  disabled: false,
-  textContent: '',
-  type: 'button',
-};
-
-export const Button = ({ busy = false, disabled = false, textContent = '', type = 'button' }) =>
-  `<button type="${type || 'button'}"${busy ? ' aria-busy="true"' : ''}${
-    disabled ? ' disabled' : ''
-  }>${textContent}</button>`;

package/dist/collection/button/stencil.css

@@ -1,85 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-button {
-  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
-  block-size: var(--utrecht-button-block-size, auto);
-  border-radius: var(--utrecht-button-border-radius);
-  border-width: var(--utrecht-button-border-width);
-  color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
-  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
-  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
-  font-weight: var(--utrecht-button-font-weight);
-  inline-size: var(--utrecht-button-inline-size, auto);
-  letter-spacing: var(--utrecht-button-letter-spacing);
-  min-inline-size: var(--utrecht-button-min-inline-size, 0);
-  padding-block-end: var(--utrecht-button-padding-block-end);
-  padding-block-start: var(--utrecht-button-padding-block-start);
-  padding-inline-end: var(--utrecht-button-padding-inline-end);
-  padding-inline-start: var(--utrecht-button-padding-inline-start);
-  text-transform: var(--utrecht-button-text-transform);
-  user-select: none;
-}
-
-.utrecht-button--distanced {
-  margin-block-end: var(--utrecht-button-margin-block-end);
-  margin-block-start: var(--utrecht-button-margin-block-start);
-  margin-inline-end: var(--utrecht-button-margin-inline-end);
-  margin-inline-start: var(--utrecht-button-margin-inline-start);
-}
-
-.utrecht-button--submit {
-  /* lower priority specificty than busy and disabled cursor */
-  cursor: var(--utrecht-action-submit-cursor);
-}
-
-.utrecht-button--busy {
-  cursor: var(--utrecht-action-busy-cursor);
-}
-
-.utrecht-button:disabled,
-.utrecht-button--disabled {
-  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
-  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
-  cursor: var(--utrecht-action-disabled-cursor);
-}
-
-.utrecht-button:active,
-.utrecht-button--active {
-  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
-  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
-}
-
-.utrecht-button--focus,
-.utrecht-button:not(.utrecht-button--disabled):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-button-focus-background-color, var(--utrecht-button-background-color));
-  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
-}
-
-.utrecht-button--hover:not(:disabled),
-.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
-  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
-  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
-  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
-}
-
-:host {
-  display: inline-block;
-}
-
-:host([hidden]) {
-  display: none !important;
-}

package/dist/collection/button/stencil.js

@@ -1,123 +0,0 @@
-import { Component, Element, Event, Prop, h } from "@stencil/core";
-import clsx from "clsx";
-export class Button {
-  render() {
-    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 {
-    "$": ["stencil.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["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,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "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/checkbox/bem.js

@@ -1,18 +0,0 @@
-/**
- * @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',
-    checked && 'utrecht-checkbox--checked',
-    disabled && 'utrecht-checkbox--disabled',
-  )}">`;

package/dist/collection/checkbox/stencil.css

@@ -1,27 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.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;
-}
-
-.utrecht-checkbox--disabled {
-  cursor: var(--utrecht-action-disabled-cursor);
-}
-
-:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none !important;
-}

package/dist/collection/checkbox/stencil.js

@@ -1,164 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-import { Component, Event, Prop, h } 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": {}
-      }
-    }]; }
-}