@duetds/components 6.0.2 → 6.0.4

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

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetSelect$1, d as defineCustomElement$1 } from './p-6e74e660.js';
+
+const DuetSelect = DuetSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSelect, defineCustomElement };

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

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

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

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetSpacer$1, d as defineCustomElement$1 } from './p-81c9b244.js';
+
+const DuetSpacer = DuetSpacer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSpacer, defineCustomElement };

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

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

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

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetSpinner$1, d as defineCustomElement$1 } from './p-3d987b87.js';
+
+const DuetSpinner = DuetSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetSpinner, defineCustomElement };

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

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

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

@@ -0,0 +1,150 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { d as defineCustomElement$4 } from './p-f7db7c40.js';
+import { d as defineCustomElement$3 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-81c9b244.js';
+
+var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
+
+const duetStepCss = "*.sc-duet-step,*.sc-duet-step::after,*.sc-duet-step::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-step-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}.duet-step.sc-duet-step{padding:20px !important;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:600;background:white;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.duet-theme-turva.sc-duet-step{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.rounded-top.sc-duet-step{border-top-left-radius:4px;border-top-right-radius:4px}.duet-step.rounded-bottom.sc-duet-step{margin-bottom:20px !important;border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-step.rounded-bottom.sc-duet-step{margin-bottom:0 !important}}@media (min-width: 36em){.duet-step.sc-duet-step{padding:0 20px 0 0 !important;margin:0 !important;font-size:1.25rem;box-shadow:none !important}}.duet-step-heading.sc-duet-step{display:flex;align-items:center;border-radius:4px}.duet-step-heading[aria-disabled=false].sc-duet-step{cursor:pointer}.duet-step-heading.sc-duet-step:focus{outline:0}.duet-step-heading.sc-duet-step:active{opacity:0.75}.user-is-tabbing.sc-duet-step-h .duet-step-heading.sc-duet-step:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.sc-duet-step-h .duet-theme-turva.sc-duet-step .duet-step-heading.sc-duet-step:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.is-complete.sc-duet-step .duet-step-heading.sc-duet-step:hover .duet-step-counter.sc-duet-step,.is-disabled.sc-duet-step .duet-step-heading.sc-duet-step:hover .duet-step-counter.sc-duet-step{background-color:#005f8f}.duet-theme-turva.is-complete.sc-duet-step .duet-step-heading.sc-duet-step:hover .duet-step-counter.sc-duet-step,.duet-theme-turva.is-disabled.sc-duet-step .duet-step-heading.sc-duet-step:hover .duet-step-counter.sc-duet-step{background-color:#9e0a26}.is-current.sc-duet-step .duet-step-heading.sc-duet-step{margin-bottom:20px}@media (min-width: 36em){.duet-step-heading.sc-duet-step{margin-top:8px;margin-bottom:8px !important}.sc-duet-step-h:first-of-type .duet-step-heading.sc-duet-step{margin-top:0}.sc-duet-step-h:last-of-type .duet-step-heading.sc-duet-step{margin-bottom:0 !important}}.duet-step-counter.sc-duet-step{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:30px;color:white;text-align:center;border-radius:50%;transition:background-color 300ms ease}@media (min-width: 36em){.duet-step-counter.sc-duet-step{width:40px;height:40px;line-height:40px}}.is-complete.sc-duet-step .duet-step-counter.sc-duet-step,.is-current.sc-duet-step .duet-step-counter.sc-duet-step,.is-disabled.sc-duet-step .duet-step-counter.sc-duet-step{background-color:#0077b3}.duet-theme-turva.is-complete.sc-duet-step .duet-step-counter.sc-duet-step,.duet-theme-turva.is-current.sc-duet-step .duet-step-counter.sc-duet-step,.duet-theme-turva.is-disabled.sc-duet-step .duet-step-counter.sc-duet-step{background-color:#c60c30}.is-incomplete.sc-duet-step .duet-step-counter.sc-duet-step{background-color:#657787}.duet-theme-turva.is-incomplete.sc-duet-step .duet-step-counter.sc-duet-step{background-color:#747475}.duet-step-icon.sc-duet-step{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 36em){.duet-step-icon.sc-duet-step{width:20px;height:20px}}.duet-step-icon.sc-duet-step duet-icon.sc-duet-step{width:16px;height:16px}@media (min-width: 36em){.duet-step-icon.sc-duet-step duet-icon.sc-duet-step{width:20px;height:20px}}@media (min-width: 36em){.duet-step-content-wrapper.sc-duet-step{min-height:20px;padding-left:40px;margin-left:19px;border-left:2px solid #e1e3e6}.duet-theme-turva.sc-duet-step .duet-step-content-wrapper.sc-duet-step{border-color:#e4e4e6}.sc-duet-step-h:last-of-type .duet-step-content-wrapper.sc-duet-step{min-height:0;border:transparent}}.duet-step-content.sc-duet-step{display:none;padding-bottom:16px}@media (min-width: 36em){.duet-step-content.sc-duet-step{padding-bottom:28px}}.is-current.sc-duet-step .duet-step-content.sc-duet-step{display:block}.duet-step-heading-slot.sc-duet-step{display:none;margin-top:2px}@media (min-width: 48em){.duet-step-heading-slot.sc-duet-step{display:block}}";
+
+const DuetStep$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetStepClick = createEvent(this, "duetStepClick", 7);
+    this.buttonId = createID("DuetStepButton");
+    this.contentId = createID("DuetStepContent");
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * @internal
+     * Enable/disable rounded top corners (on mobile).
+     * This property is used internally by stepper, and should not be set by the developer.
+     */
+    this.roundedTop = false;
+    /**
+     * @internal
+     * Enable/disable rounded bottom corners (on mobile).
+     * This property is used internally by stepper, and should not be set by the developer.
+     */
+    this.roundedBottom = false;
+    this.handleKeyDown = (e) => {
+      if (this.isClickDisabled()) {
+        return;
+      }
+      if (isKeyboardClick(e)) {
+        e.preventDefault();
+        this.handleStepClick(e);
+      }
+    };
+    this.handleClick = (e) => {
+      if (this.isClickDisabled()) {
+        return;
+      }
+      this.handleStepClick(e);
+    };
+  }
+  handleStepClick(e) {
+    this.duetStepClick.emit({
+      originalEvent: e,
+      component: "duet-step",
+      stepIndex: this.stepIndex,
+    });
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Programmatically shift focus to the step's heading.
+   */
+  async setFocus(options = { preventScroll: true }) {
+    this.buttonElement.focus(options);
+  }
+  isClickDisabled() {
+    return this.state !== "complete";
+  }
+  headingColor() {
+    if (this.state !== "incomplete") {
+      return "";
+    }
+    if (this.theme !== "turva") {
+      return "gray-darker";
+    }
+    else {
+      return "gray-dark-turva";
+    }
+  }
+  renderStepCounter() {
+    if (this.state === "complete" || this.state === "disabled") {
+      return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: actionEdit2.svg })));
+    }
+    return `${this.stepIndex + 1} `;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    {
+      return (h("div", { class: {
+          "duet-step": true,
+          [`is-${this.state}`]: true,
+          "rounded-top": this.roundedTop,
+          "rounded-bottom": this.roundedBottom,
+          "duet-theme-turva": this.theme === "turva",
+        } }, h("div", { class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { "aria-hidden": "true" }, h("div", { class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", null, h("duet-heading", { theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { direction: "horizontal", size: "large" }), h("div", { class: "duet-step-heading-slot" }, h("slot", { name: "heading-content" }))), h("div", { class: "duet-step-content-wrapper" }, h("div", { class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", null)))));
+    }
+  }
+  get element() { return this; }
+  static get style() { return duetStepCss; }
+}, [6, "duet-step", {
+    "theme": [1025],
+    "heading": [1],
+    "headingLevel": [1, "heading-level"],
+    "stepIndex": [2, "step-index"],
+    "state": [1],
+    "roundedTop": [4, "rounded-top"],
+    "roundedBottom": [4, "rounded-bottom"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-step", "duet-heading", "duet-icon", "duet-spacer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-step":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetStep$1);
+      }
+      break;
+    case "duet-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetStep = DuetStep$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetStep, defineCustomElement };

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

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

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

@@ -0,0 +1,164 @@
+/*!
+ * 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 { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+function groupBy(prop, items) {
+  const result = {};
+  items.forEach(item => {
+    const value = item[prop];
+    if (!result[value]) {
+      result[value] = [];
+    }
+    result[value].push(item);
+  });
+  return result;
+}
+
+const duetStepperCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}.duet-stepper{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-stepper{padding:28px !important;padding-top:36px !important;padding-bottom:36px !important;background:white;border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}}";
+
+const DuetStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetStepChange = createEvent(this, "duetStepChange", 7);
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Format of message used to announce current step when navigating between steps.
+     * The string {current} is replaced with current the step number.
+     * The string {total} is replaced with the total number of steps.
+     */
+    this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls whether navigation back to previous steps is allowed or not.
+     */
+    this.backDisabled = false;
+    /**
+     * The index of the current step.
+     */
+    this.selected = 0;
+  }
+  currentStepChanged(nextStep) {
+    if (isNaN(nextStep)) {
+      throw new Error(`step must be a number. got: ${nextStep}`);
+    }
+    if (nextStep < 0) {
+      throw new Error(`step must be not be less than zero. got: ${nextStep}`);
+    }
+    if (nextStep > this.getSteps().length) {
+      throw new Error(`step must not exceed total number of steps`);
+    }
+    this.updateStepState();
+    // Shifting focus would occasionally fail if done immediately.
+    // This may be due to re-render happening at the same time.
+    // So we defer shifting focus, to ensure it always works.
+    setTimeout(() => this.setStepFocus(), 50);
+  }
+  currentStepInvokedDisable() {
+    this.updateStepState();
+  }
+  onDuetStepClick(e) {
+    this.duetStepChange.emit({
+      fromStep: this.selected,
+      toStep: e.detail.stepIndex,
+      component: "duet-stepper",
+    });
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async connectedCallback() {
+    this.updateStepState();
+  }
+  getSteps() {
+    return Array.from(this.element.querySelectorAll("duet-step"));
+  }
+  setStepFocus() {
+    const steps = this.getSteps();
+    const step = steps[this.selected];
+    step.setFocus();
+  }
+  updateStepState() {
+    const steps = this.getSteps();
+    steps.forEach((step, index) => {
+      let state;
+      if (index < this.selected) {
+        state = this.backDisabled ? "disabled" : "complete";
+      }
+      else if (index > this.selected) {
+        state = "incomplete";
+      }
+      else {
+        state = "current";
+      }
+      step.theme = this.theme;
+      step.state = state;
+      step.stepIndex = index;
+    });
+    const stepsByState = groupBy("state", steps);
+    Object.values(stepsByState).forEach(steps => {
+      steps.forEach((step, i) => {
+        step.roundedTop = i === 0;
+        step.roundedBottom = i === steps.length - 1;
+      });
+    });
+  }
+  formatAnnouncement() {
+    const steps = this.getSteps();
+    const current = (this.selected + 1).toString(10);
+    const total = steps.length.toString(10);
+    return this.accessibleLive.replace("{current}", current).replace("{total}", total);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", null))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "selected": ["currentStepChanged"],
+    "backDisabled": ["currentStepInvokedDisable"]
+  }; }
+  static get style() { return duetStepperCss; }
+}, [1, "duet-stepper", {
+    "theme": [1025],
+    "accessibleLive": [1, "accessible-live"],
+    "margin": [1],
+    "backDisabled": [4, "back-disabled"],
+    "selected": [1538]
+  }, [[0, "duetStepClick", "onDuetStepClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-stepper", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-stepper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetStepper$1);
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetStepper = DuetStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetStepper, defineCustomElement };

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

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