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

package/dist/collection/breadcrumb/stencil.css

@@ -0,0 +1,148 @@
+/**
+ * @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

@@ -0,0 +1,62 @@
+/**
+ * @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

@@ -0,0 +1,34 @@
+/**
+ * @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

@@ -0,0 +1,16 @@
+/**
+ * @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/{bem.css → stencil.css}

@@ -1,48 +1,85 @@
+/**
+ * @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 {
-  color: var(--utrecht-button-primary-action-color);
-  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
-  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
-  background-color: var(--utrecht-button-primary-action-background-color);
+  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);
-  padding-inline-start: var(--utrecht-button-padding-inline-start);
-  padding-inline-end: var(--utrecht-button-padding-inline-end);
-  padding-block-start: var(--utrecht-button-padding-block-start);
+  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-inline-start: var(--utrecht-button-margin-inline-start);
-  margin-inline-end: var(--utrecht-button-margin-inline-end);
-  margin-block-start: var(--utrecht-button-margin-block-start);
   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 {
-  color: var(--utrecht-button-disabled-color);
-  background-color: var(--utrecht-button-disabled-background-color);
+  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 {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
+  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;
-  background-color: var(--utrecht-focus-background-color);
+  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) {
-  color: var(--utrecht-button-primary-action-color);
-  background-color: var(--utrecht-button-primary-action-hover-background-color);
+  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,19 +1,58 @@
-import { Component, Prop, h } from "@stencil/core";
+import { Component, Element, Event, Prop, h } 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/checkbox/bem.js

@@ -0,0 +1,18 @@
+/**
+ * @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

@@ -0,0 +1,27 @@
+/**
+ * @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;
+}