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

package/dist/collection/digid-button/stencil.css

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-digid-button {
+  --utrecht-button-block-size: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-height: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-width: var(--utrecht-digid-button-block-size, 50px);
+  display: inline-flex;
+  gap: var(--utrecht-space-inline-sm);
+}
+
+.utrecht-digid-button__logo {
+  order: 1;
+}
+
+.utrecht-digid-button__button {
+  order: 2;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/digid-button/stencil.js

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from "@stencil/core";
+export class DigidButton {
+  render() {
+    return (h("div", { class: "utrecht-digid-button" },
+      h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }),
+      h("utrecht-button", { class: "utrecht-digid-button__button", type: this.type || null },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-digid-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/digid-logo/stencil.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+:host {
+  display: inline;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+svg {
+  height: 100%;
+  max-height: var(--utrecht-digid-logo-max-height, var(--utrecht-logo-max-height, 50px));
+  max-width: var(--utrecht-digid-logo-max-width, var(--utrecht-logo-max-width, 50px));
+  width: 100%;
+}

package/dist/collection/digid-logo/stencil.js

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from "@stencil/core";
+export class DigidLogo {
+  render() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" },
+      h("title", null, "DigiD"),
+      h("path", { d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }),
+      h("path", { d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }),
+      h("path", { d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
+  }
+  static get is() { return "utrecht-digid-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/form-field-checkbox/stencil.css

@@ -63,6 +63,10 @@
   margin-inline-start: 0;
 }
 
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
 :host {
   display: block;
 }

package/dist/collection/form-field-textarea/stencil.css

@@ -75,6 +75,7 @@
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
   color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus {

package/dist/collection/form-field-textbox/stencil.css

@@ -71,6 +71,7 @@
   background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
   border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
   color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textbox--focus, .utrecht-textbox--html-input:focus {

package/dist/collection/form-toggle/stencil.css

@@ -39,6 +39,7 @@
   border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
   border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
   border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-form-toggle__thumb {

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

@@ -73,12 +73,14 @@
  */
 .utrecht-button, .utrecht-html button {
   background-color: var(--utrecht-button-primary-action-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);
   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);
   padding-block-end: var(--utrecht-button-padding-block-end);
   padding-block-start: var(--utrecht-button-padding-block-start);
@@ -94,10 +96,20 @@
   margin-inline-start: var(--utrecht-button-margin-inline-start);
 }
 
+.utrecht-button--submit, .utrecht-html button[type=submit] {
+  /* lower priority specificty than busy and disabled cursor */
+  cursor: var(--utrecht-action-submit-cursor);
+}
+
+.utrecht-button--busy, .utrecht-html button[aria-busy=true] {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+
 .utrecht-button:disabled, .utrecht-html button:disabled,
 .utrecht-button--disabled {
   background-color: var(--utrecht-button-disabled-background-color);
   color: var(--utrecht-button-disabled-color);
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-button--focus, .utrecht-html button:focus,
@@ -136,6 +148,10 @@
   margin-inline-start: 0;
 }
 
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -515,6 +531,11 @@
   margin-inline-start: 0;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-radio-button--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -669,6 +690,7 @@
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
   color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
@@ -756,6 +778,7 @@
   background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
   border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
   color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),

package/dist/collection/radio-button/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 RadioButton = ({ checked = false, disabled = false }) =>
+  `<input type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
+    'utrecht-radio-button',
+    checked && 'utrecht-radio-button--checked',
+    disabled && 'utrecht-radio-button--disabled',
+  )}">`;

package/dist/collection/textbox/stencil.css

@@ -35,6 +35,7 @@
   background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
   border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
   color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textbox--focus, .utrecht-textbox--html-input:focus {

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

@@ -50,6 +50,18 @@ export const UtrechtContactCardTemplate: {
   new (): UtrechtContactCardTemplate;
 };
 
+interface UtrechtDigidButton extends Components.UtrechtDigidButton, HTMLElement {}
+export const UtrechtDigidButton: {
+  prototype: UtrechtDigidButton;
+  new (): UtrechtDigidButton;
+};
+
+interface UtrechtDigidLogo extends Components.UtrechtDigidLogo, HTMLElement {}
+export const UtrechtDigidLogo: {
+  prototype: UtrechtDigidLogo;
+  new (): UtrechtDigidLogo;
+};
+
 interface UtrechtDocument extends Components.UtrechtDocument, HTMLElement {}
 export const UtrechtDocument: {
   prototype: UtrechtDocument;