@duetds/components 6.0.2 → 6.0.4

package/lib/dist-custom-elements/duet-checkbox.js

@@ -0,0 +1,163 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+
+const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-child:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:white;border:1px solid #00294d;border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#00294d;border:1px solid #00294d}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#171c3a;border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#747475}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfcfd1}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#657787;border:1px solid #657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#747475;border-color:#747475}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const DuetCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    /**
+     * Own Properties.
+     */
+    this.checkboxId = createID("DuetCheckbox");
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Set whether the input is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Theme of the checkbox.
+     */
+    this.theme = "";
+    /**
+     * Makes the checkbox component disabled. This prevents users from being able to
+     * interact with the checkbox, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Label for the checkbox
+     */
+    this.label = "label";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Check state of the checkbox.
+     */
+    this.checked = false;
+    /**
+     * Component event handling.
+     */
+    this.onChange = (ev) => {
+      this.checked = !this.checked;
+      this.duetChange.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-checkbox",
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    if (this.value === undefined) {
+      this.value = this.identifier;
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.checkboxId;
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+        "duet-checkbox-container": true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("input", { ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, required: this.required, role: this.role, name: this.name, id: identifier }), h("label", { class: "duet-label", htmlFor: identifier }, h("span", null, this.label)))));
+  }
+  get element() { return this; }
+  static get style() { return duetCheckboxCss; }
+}, [2, "duet-checkbox", {
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "margin": [1],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleIndex": [1, "accessible-index"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "required": [4],
+    "theme": [1025],
+    "disabled": [516],
+    "identifier": [1],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "name": [1],
+    "role": [1],
+    "checked": [1540],
+    "value": [1537],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCheckbox$1);
+      }
+      break;
+  } });
+}
+
+const DuetCheckbox = DuetCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCheckbox, defineCustomElement };

package/lib/dist-custom-elements/duet-choice-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetChoiceGroup extends Components.DuetChoiceGroup, HTMLElement {}
+export const DuetChoiceGroup: {
+  prototype: DuetChoiceGroup;
+  new (): DuetChoiceGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-choice-group.js

@@ -0,0 +1,226 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
+import { d as defineCustomElement$6 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$5 } from './p-e4d5fbc0.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-88511d7a.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
+
+const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
+const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Direction of the choice group.
+     */
+    this.direction = "vertical";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Theme of the choice group.
+     */
+    this.theme = "";
+    /**
+     * Display choice group in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Legend displayed for the choice buttons in this group.
+     */
+    this.label = "Label";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Additional caption to show inside the label of the choice group.
+     */
+    this.caption = undefined;
+    /**
+     * Tooltip to display next to the label of the choice group.
+     */
+    this.tooltip = undefined;
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Enable or disable the automatic responsive behaviour of the choice group
+     * component when horizontal setting is used. Setting this option to "true"
+     * makes sure that contents are stacked vertically on mobile.
+     */
+    this.responsive = false;
+    this.getChoices = () => {
+      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
+    };
+    /**
+     * Component event handling.
+     */
+    this.onSelect = (ev) => {
+      if (ev.detail.component !== "duet-choice") {
+        return;
+      }
+      const selectedChoice = ev.target;
+      if (selectedChoice) {
+        this.value = selectedChoice.value;
+      }
+      // Prevent events from bubbling up the DOM tree in case
+      // this group is a sub-group of another choice group.
+      ev.cancelBubble = true;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    if (this.value === undefined) {
+      const choice = findCheckedOption(el, duetChoiceSelector);
+      if (choice !== undefined) {
+        await choice.componentOnReady();
+        if (this.value === undefined) {
+          this.value = choice.value;
+        }
+      }
+    }
+    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
+      if (newOption !== undefined) {
+        newOption.componentOnReady().then(() => {
+          const choices = this.getChoices();
+          if (choices.includes(newOption)) {
+            this.value = newOption.value;
+          }
+        });
+      }
+      else {
+        this.updateChoices();
+      }
+    });
+    this.updateChoices();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Local methods
+   */
+  async updateChoices() {
+    /**
+     * Make sure we get all choices first so values are up to date prior
+     * to caching the choice group value
+     */
+    const choices = this.getChoices();
+    const { value } = this;
+    let hasChecked = false;
+    // Walk the DOM in reverse order, since the last selected one wins
+    for (const choice of choices) {
+      choice.name = this.name;
+      choice.groupDisabled = this.disabled;
+      choice.groupDirection = this.direction;
+      choice.groupResponsive = this.responsive;
+      if (!hasChecked && choice.value === value) {
+        // Correct value for this choice, but this choice isn't checked yet
+        // and we haven't found a checked yet
+        hasChecked = true;
+        choice.checked = true;
+      }
+      else {
+        // This choice doesn't have the correct value or the choice group has been already checked
+        choice.checked = false;
+      }
+    }
+    // Reset value if
+    if (!hasChecked) {
+      this.value = undefined;
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-choice-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["updateChoices"],
+    "disabled": ["updateChoices"],
+    "name": ["updateChoices"],
+    "direction": ["updateChoices"],
+    "responsive": ["updateChoices"]
+  }; }
+  static get style() { return duetChoiceGroupCss; }
+}, [6, "duet-choice-group", {
+    "direction": [1],
+    "margin": [1],
+    "theme": [1025],
+    "error": [1],
+    "name": [1],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "caption": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "responsive": [4],
+    "value": [1537],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-choice-group", "duet-caption", "duet-fieldset", "duet-icon", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-choice-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetChoiceGroup$1);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetChoiceGroup = DuetChoiceGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetChoiceGroup, defineCustomElement };

package/lib/dist-custom-elements/duet-choice.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetChoice extends Components.DuetChoice, HTMLElement {}
+export const DuetChoice: {
+  prototype: DuetChoice;
+  new (): DuetChoice;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;