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

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

@@ -0,0 +1,205 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, h, Prop } from "@stencil/core";
+import clsx from "clsx";
+export class CustomCheckbox {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+    this.invalid = false;
+    this.required = false;
+  }
+  render() {
+    const { checked, disabled, indeterminate, invalid, required } = this;
+    const active = false;
+    const toggleInteraction = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.utrechtInput.emit(this);
+        this.utrechtChange.emit(this);
+      }
+    };
+    const handleClick = () => {
+      toggleInteraction();
+    };
+    const handleKeyPress = (evt) => {
+      if (evt.code === "Space" || evt.key === " ") {
+        // Do not scroll the page using Space when the toggle is focussed
+        evt.preventDefault();
+      }
+    };
+    const handleKeyUp = (evt) => {
+      if (evt.code === "Space" || evt.key === " ") {
+        toggleInteraction();
+      }
+    };
+    return (h("div", { class: "utrecht-custom-checkbox", role: "checkbox", tabIndex: disabled ? null : 0, "aria-checked": indeterminate ? "mixed" : checked ? "true" : "false", "aria-disabled": disabled ? "true" : null, "aria-invalid": invalid ? "true" : null, "aria-required": required ? "true" : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp },
+      h("div", { 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", invalid && "utrecht-custom-checkbox__box--invalid", indeterminate && "utrecht-custom-checkbox__box--indeterminate") },
+        checked && h("utrecht-icon-checkmark", { class: "utrecht-custom-checkbox__icon" }, "\u2714"),
+        indeterminate && (h("utrecht-icon-indeterminate", { class: "utrecht-custom-checkbox__icon" }, "\u25A0")))));
+  }
+  static get is() { return "utrecht-custom-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"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "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"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  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/document/stencil.css

@@ -8,7 +8,6 @@
  */
 .utrecht-document {
   /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
-  background-color: var(--utrecht-document-background-color, inherit);
   color: var(--utrecht-document-color, inherit);
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-document-font-size, inherit);
@@ -21,6 +20,10 @@
   letter-spacing: 0 !important;
 }
 
+.utrecht-document--surface {
+  background-color: var(--utrecht-document-background-color, inherit);
+}
+
 :host {
   display: block;
 }

package/dist/collection/logo/stencil.css

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 .utrecht-logo {
-  max-height: var(--utrecht-logo-max-height);
-  max-width: var(--utrecht-logo-max-width);
+  max-height: var(--utrecht-logo-max-height, 192px);
+  max-width: var(--utrecht-logo-max-width, 96px);
 }
 
 .utrecht-logo__decoration-1 {

package/dist/collection/navigatie sidenav/bem.css

@@ -155,7 +155,7 @@
 .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
 .utrecht-sidenav__link--current::after,
 .utrecht-sidenav__item--has-children a::after {
-  height: calc(38px + 2px);
+  height: 40px;
   min-height: 38px;
 }
 

package/dist/collection/page/bem.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const Page = ({ innerHTML = '' }) => `<div class="utrecht-page">${innerHTML}</div>`;

package/dist/collection/page/stencil.css

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-inline-size: calc(var(--utrecht-page-max-inline-size) - var(--utrecht-page-margin-inline-start, 0px) - var(--utrecht-page-margin-inline-end, 0px));
+  padding-inline-end: var(--utrecht-page-margin-inline-end);
+  padding-inline-start: var(--utrecht-page-margin-inline-start);
+}
+
+.utrecht-page__content {
+  background-color: var(--utrecht-page-background-color);
+  color: var(--utrecht-page-color);
+  max-inline-size: var(--utrecht-page-max-inline-size);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page/stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from "@stencil/core";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class Page {
+  render() {
+    return (h("div", { class: "utrecht-page" },
+      h("div", { class: "utrecht-page__content" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/page-content/bem.js

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageContent = ({ asideHTML = null, innerHTML = '', navHTML = null }) => `<div class="utrecht-page-content">
+${navHTML ? `  <nav class="utrecht-page-content__nav">${navHTML}</nav>` : ''}
+  <main class="utrecht-page-content__main">${innerHTML}</main>
+  ${asideHTML ? `<aside class="utrecht-page-content__aside">${asideHTML}</aside>` : ''}
+</div>`;

package/dist/collection/page-content/stencil.css

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page-content {
+  padding-block-end: var(--utrecht-page-content-padding-block-end);
+  padding-block-start: var(--utrecht-page-content-padding-block-start);
+  padding-inline-end: var(--utrecht-page-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-padding-inline-start);
+}
+
+.utrecht-page-content__main {
+  grid-area: main;
+}
+
+.utrecht-page-content__aside {
+  grid-area: aside;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-content/stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from "@stencil/core";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class Page {
+  render() {
+    return (h("div", { class: "utrecht-page-content" },
+      h("main", { class: "utrecht-page-content__main" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/page-header/bem.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageHeader = ({ innerHTML = '' }) => `<header class="utrecht-page-header">${innerHTML}</header>`;

package/dist/collection/page-header/stencil.css

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page-header {
+  background-color: var(--utrecht-page-header-background-color);
+  color: var(--utrecht-page-header-color);
+  grid-area: "utrecht-header";
+  padding-block-end: var(--utrecht-page-header-padding-block-end);
+  padding-block-start: var(--utrecht-page-header-padding-block-start);
+  padding-inline-end: var(--utrecht-page-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-padding-inline-start);
+}
+
+.utrecht-page-header__content {
+  max-inline-size: var(--utrecht-page-max-inline-size);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-header/stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from "@stencil/core";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class PageHeader {
+  render() {
+    return (h("header", { class: "utrecht-page-header" },
+      h("div", { class: "utrecht-page-header__content" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/custom-checkbox/stencil.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from "@stencil/core";
+export declare class CustomCheckbox {
+    disabled: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    required: boolean;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/custom-checkbox/stencil.js

@@ -0,0 +1,85 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, h, Prop } from "@stencil/core";
+import clsx from "clsx";
+let CustomCheckbox = class CustomCheckbox {
+    constructor() {
+        this.disabled = false;
+        this.checked = false;
+        this.indeterminate = false;
+        this.invalid = false;
+        this.required = false;
+    }
+    render() {
+        const { checked, disabled, indeterminate, invalid, required } = this;
+        const active = false;
+        const toggleInteraction = () => {
+            if (!this.disabled) {
+                this.checked = !this.checked;
+                this.utrechtInput.emit(this);
+                this.utrechtChange.emit(this);
+            }
+        };
+        const handleClick = () => {
+            toggleInteraction();
+        };
+        const handleKeyPress = (evt) => {
+            if (evt.code === "Space" || evt.key === " ") {
+                // Do not scroll the page using Space when the toggle is focussed
+                evt.preventDefault();
+            }
+        };
+        const handleKeyUp = (evt) => {
+            if (evt.code === "Space" || evt.key === " ") {
+                toggleInteraction();
+            }
+        };
+        return (h("div", { class: "utrecht-custom-checkbox", role: "checkbox", tabIndex: disabled ? null : 0, "aria-checked": indeterminate ? "mixed" : checked ? "true" : "false", "aria-disabled": disabled ? "true" : null, "aria-invalid": invalid ? "true" : null, "aria-required": required ? "true" : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp },
+            h("div", { 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", invalid && "utrecht-custom-checkbox__box--invalid", indeterminate && "utrecht-custom-checkbox__box--indeterminate") },
+                checked && h("utrecht-icon-checkmark", { class: "utrecht-custom-checkbox__icon" }, "\u2714"),
+                indeterminate && (h("utrecht-icon-indeterminate", { class: "utrecht-custom-checkbox__icon" }, "\u25A0")))));
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "checked", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "invalid", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "required", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtInput", void 0);
+CustomCheckbox = __decorate([
+    Component({
+        tag: "utrecht-custom-checkbox",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], CustomCheckbox);
+export { CustomCheckbox };

package/dist/custom-elements/index.d.ts

@@ -50,6 +50,12 @@ export const UtrechtContactCardTemplate: {
   new (): UtrechtContactCardTemplate;
 };
 
+interface UtrechtCustomCheckbox extends Components.UtrechtCustomCheckbox, HTMLElement {}
+export const UtrechtCustomCheckbox: {
+  prototype: UtrechtCustomCheckbox;
+  new (): UtrechtCustomCheckbox;
+};
+
 interface UtrechtDigidButton extends Components.UtrechtDigidButton, HTMLElement {}
 export const UtrechtDigidButton: {
   prototype: UtrechtDigidButton;
@@ -266,12 +272,30 @@ export const UtrechtLogoButton: {
   new (): UtrechtLogoButton;
 };
 
+interface UtrechtPage extends Components.UtrechtPage, HTMLElement {}
+export const UtrechtPage: {
+  prototype: UtrechtPage;
+  new (): UtrechtPage;
+};
+
+interface UtrechtPageContent extends Components.UtrechtPageContent, HTMLElement {}
+export const UtrechtPageContent: {
+  prototype: UtrechtPageContent;
+  new (): UtrechtPageContent;
+};
+
 interface UtrechtPageFooter extends Components.UtrechtPageFooter, HTMLElement {}
 export const UtrechtPageFooter: {
   prototype: UtrechtPageFooter;
   new (): UtrechtPageFooter;
 };
 
+interface UtrechtPageHeader extends Components.UtrechtPageHeader, HTMLElement {}
+export const UtrechtPageHeader: {
+  prototype: UtrechtPageHeader;
+  new (): UtrechtPageHeader;
+};
+
 interface UtrechtPagination extends Components.UtrechtPagination, HTMLElement {}
 export const UtrechtPagination: {
   prototype: UtrechtPagination;