@duetds/components 8.0.5 → 8.1.0

package/lib/dist-custom-elements/p-7855af1f.js

@@ -1,72 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-670570b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { d as defineCustomElement$1 } from './p-24a51286.js';
-
-const duetTooltipButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-tooltip-button{z-index:100;display:inline-block;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 !important;margin-right:-12px;line-height:normal !important;color:rgb(0, 119, 179);white-space:nowrap;cursor:pointer;background:transparent !important;border-radius:4px}.duet-tooltip-button.duet-theme-turva{color:rgb(198, 12, 48)}.duet-tooltip-button:hover{color:rgb(0, 77, 128)}.duet-tooltip-button:hover.duet-theme-turva{color:rgb(148, 9, 37)}.duet-tooltip-button:focus{background:transparent !important;outline:0}:host(.user-is-tabbing) .duet-tooltip-button:focus{background:transparent !important;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tooltip-button svg{width:20px;height:20px;pointer-events:none}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-label{position:relative;z-index:100;display:inline-block;max-width:calc(100% - 30px);margin-left:12px !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;line-height:1.25;text-align:left;white-space:normal;vertical-align:top}.duet-theme-turva .duet-tooltip-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}";
-
-const DuetTooltipButton = /*@__PURE__*/ proxyCustomElement(class DuetTooltipButton extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = "";
-    this.accessibleLabel = undefined;
-    this.theme = "";
-    this.active = undefined;
-    this.tooltipId = undefined;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  async setFocus(options) {
-    if (this.buttonElement) {
-      this.buttonElement.focus(options);
-    }
-  }
-  /**
-   * render() function.
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, null, h("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
-        "duet-tooltip-button": true,
-        "duet-tooltip-button-has-label": !!this.label,
-        "duet-theme-turva": this.theme === "turva",
-      } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
-  }
-  get element() { return this; }
-  static get style() { return duetTooltipButtonCss; }
-}, [1, "duet-tooltip-button", {
-    "label": [1],
-    "accessibleLabel": [1, "accessible-label"],
-    "theme": [1025],
-    "active": [4],
-    "tooltipId": [1, "tooltip-id"],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-tooltip-button", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-tooltip-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetTooltipButton);
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { DuetTooltipButton as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-8350edff.js

@@ -1,206 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-670570b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { c as createID } from './p-45f71a69.js';
-import { d as debounce } from './p-3d8d557b.js';
-import { i as isKeyboardClick } from './p-56ac3289.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
-import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-e19d1e27.js';
-import { d as defineCustomElement$2 } from './p-219d974b.js';
-import { d as defineCustomElement$1 } from './p-24a51286.js';
-
-const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(0, 41, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9e9eb}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#ddddde !important}.duet-action-button:disabled{color:rgb(144, 149, 153);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(116, 116, 117);background:rgb(245, 245, 247)}";
-
-const DuetActionButton = /*@__PURE__*/ proxyCustomElement(class DuetActionButton extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
-    this.listId = createID("duet-action-button");
-    /**
-     * Private methods.
-     */
-    //helper to emit relevant page events
-    this.emitPageEvent = debounce(e => {
-      this.duetActionEvent.emit({
-        component: "duet-action-button",
-        originalEvent: e,
-        action: this.actionId,
-        name: this.actionName,
-        meta: this.actionMeta,
-        id: this.listId,
-      });
-    });
-    this.numbersStore = "";
-    this.theme = "";
-    this.iconName = "action-arrow-left-small";
-    this.iconColor = "currentColor";
-    this.iconSize = "xx-small";
-    this.actionName = "default-action";
-    this.actionId = undefined;
-    this.actionMeta = undefined;
-    this.disabled = false;
-    this.color = "";
-    this.background = "";
-    this.accessibleTitle = true;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.accessibleLabelsDefaults = {
-      en: "Click to activate action",
-      fi: "Klikkaa aktivoidaksesi toiminto",
-      sv: "Klicka för att aktivera åtgärd",
-    };
-    this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
-    this.accessibleControls = "";
-    this.url = undefined;
-  }
-  //handle a11y keyboard navigation events
-  async onKeyboardDown(e) {
-    if (isKeyboardClick(e)) {
-      this.emitPageEvent(e);
-    }
-  }
-  //return readable title for the action-button
-  getTitle() {
-    let titleString = "";
-    if (typeof this.accessibleTitle === "string") {
-      titleString = this.accessibleTitle;
-    }
-    if (this.accessibleTitle === true) {
-      titleString = capitalizeFirstLetter(`${this.actionName}`);
-    }
-    return titleString;
-  }
-  async onMouseHandler(e) {
-    e.preventDefault();
-    this.duetActionEvent.emit({
-      component: "duet-action-button",
-      originalEvent: e,
-      action: this.actionName,
-      id: this.actionId,
-      meta: this.actionMeta,
-    });
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelsDefaults" });
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Sets focus on the specified `duet-action-button`. Use this method instead of the global
-   * `button.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeButton) {
-      this.nativeButton.focus(options);
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
-    const backgroundColor = getColorByName(this.background, this.theme);
-    const backgroundHoverColor = backgroundColor ? shadeRGBColor(backgroundColor, -0.1) : backgroundColor;
-    const backgroundStyles = backgroundColor
-      ? `
-          button.duet-action-button {
-            background: ${backgroundColor} !important;
-          }
-          button.duet-action-button:not(:disabled):hover {
-            background: ${backgroundHoverColor} !important;
-          }
-        `
-      : "";
-    const styles = {
-      color,
-      "border-color": getColorByName(this.iconColor, this.theme),
-      "border-width": "1px",
-      "border-style": "solid",
-    };
-    const commonProps = {
-      ref: button => (this.nativeButton = button),
-      part: "button",
-      style: styles,
-      disabled: this.disabled,
-      id: this.listId,
-      type: "button",
-      "aria-label": this.accessibleLabel,
-      "aria-labelledby": this.accessibleLabelledBy,
-      "aria-description": this.accessibleDescription,
-      "aria-describedby": this.accessibleDescribedBy,
-      "aria-details": this.accessibleDetails,
-      "aria-controls": this.accessibleControls,
-      title: this.getTitle(),
-      class: {
-        "duet-action-button": true,
-        "duet-action-button--disabled": this.disabled,
-        [`duet-action-button--${this.theme}`]: this.theme !== "",
-        "duet-theme-turva": this.theme === "turva",
-      },
-    };
-    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), this.url && !this.disabled ? (h("a", Object.assign({}, commonProps, { href: this.url }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }))) : (h("button", Object.assign({}, commonProps, { onClick: e => this.onMouseHandler(e) }), h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null))))));
-  }
-  get element() { return this; }
-  static get style() { return duetActionButtonCss; }
-}, [1, "duet-action-button", {
-    "theme": [1025],
-    "iconName": [1, "icon-name"],
-    "iconColor": [1, "icon-color"],
-    "iconSize": [1, "icon-size"],
-    "actionName": [1, "action-name"],
-    "actionId": [1, "action-id"],
-    "actionMeta": [1, "action-meta"],
-    "disabled": [4],
-    "color": [513],
-    "background": [1],
-    "accessibleTitle": [8, "title"],
-    "accessibleDescribedBy": [1, "accessible-described-by"],
-    "accessibleDetails": [1, "accessible-details"],
-    "accessibleLabelledBy": [1, "accessible-labelled-by"],
-    "accessibleDescription": [1, "accessible-description"],
-    "accessibleLabelsDefaults": [16],
-    "accessibleLabel": [1025, "accessible-label"],
-    "accessibleControls": [1, "accessible-controls"],
-    "url": [513],
-    "numbersStore": [32],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-action-button", "duet-icon", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-action-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetActionButton);
-      }
-      break;
-    case "duet-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { DuetActionButton as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-8a760b84.js

@@ -1,76 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-670570b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-
-const duetGridItemCss = ".sc-duet-grid-item-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;min-width:0;max-width:100%;flex:0 0 auto;padding-right:8px;padding-left:8px;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-style:normal;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:first-of-type{padding-left:0}.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-child,.duet-grid-direction-horizontal.sc-duet-grid-item-h:last-of-type{padding-right:0}@media (max-width: 35.9375em){.duet-grid-item-responsive.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important;padding-right:0;padding-left:0}}@media screen and (max-width: 47.9375em){.duet-grid-item-br-medium.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 47.9375em){.duet-grid-item-responsive.duet-grid-item-br-medium.sc-duet-grid-item-h{padding-right:0;padding-left:0}}@media screen and (max-width: 64em){.duet-grid-item-br-x-large.sc-duet-grid-item-h{width:100% !important;min-width:0 !important;max-width:100% !important}}@media screen and (max-width: 64em){.duet-grid-item-responsive.duet-grid-item-br-x-large.sc-duet-grid-item-h{padding-right:0;padding-left:0}}.duet-grid-item-fill.sc-duet-grid-item-h{flex:1 1 auto;width:100%}.duet-theme-turva.sc-duet-grid-item-h{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-m-0.sc-duet-grid-item-h{padding:0 !important;margin:0 !important}";
-
-const DuetGridItem = /*@__PURE__*/ proxyCustomElement(class DuetGridItem extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.fill = false;
-    this.maxWidth = undefined;
-    this.minWidth = undefined;
-    this.theme = "";
-    this.margin = "auto";
-    this.responsive = false;
-    this.direction = "horizontal";
-    this.breakpoint = "small";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { style: {
-        "min-width": this.minWidth,
-        "max-width": this.maxWidth,
-      }, class: {
-        "duet-m-0": this.margin === "none",
-        "duet-theme-turva": this.theme === "turva",
-        "duet-grid-item": true,
-        "duet-grid-item-fill": this.fill,
-        "duet-grid-item-responsive": this.responsive,
-        "duet-grid-direction-horizontal": this.direction === "horizontal",
-        "duet-grid-direction-vertical": this.direction === "vertical",
-        "duet-grid-item-br-x-small": this.breakpoint === "x-small",
-        "duet-grid-item-br-small": this.breakpoint === "small",
-        "duet-grid-item-br-medium": this.breakpoint === "medium",
-        "duet-grid-item-br-large": this.breakpoint === "large",
-        "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-      } }));
-  }
-  static get style() { return duetGridItemCss; }
-}, [2, "duet-grid-item", {
-    "fill": [4],
-    "maxWidth": [1, "max-width"],
-    "minWidth": [1, "min-width"],
-    "theme": [1025],
-    "margin": [1],
-    "responsive": [4],
-    "direction": [1],
-    "breakpoint": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-grid-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-grid-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetGridItem);
-      }
-      break;
-  } });
-}
-
-export { DuetGridItem as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-9d8865d0.js

@@ -1,137 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-670570b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { c as createID } from './p-45f71a69.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:rgb(0, 41, 77);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:rgb(23, 28, 58)}.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:rgb(255, 255, 255);border:1px solid rgb(0, 41, 77);border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(23, 28, 58)}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(0, 41, 77);border:1px solid rgb(0, 41, 77)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.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:rgb(101, 119, 135)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:rgb(116, 116, 117)}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(207, 210, 212)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:rgb(207, 207, 209)}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(101, 119, 135);border:1px solid rgb(101, 119, 135)}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:rgb(116, 116, 117);border-color:rgb(116, 116, 117)}.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 = /*@__PURE__*/ proxyCustomElement(class DuetCheckbox 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");
-    /**
-     * 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",
-      });
-    };
-    this.accessibleActiveDescendant = undefined;
-    this.margin = "auto";
-    this.accessibleControls = undefined;
-    this.accessibleIndex = undefined;
-    this.accessibleOwns = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.accessibleSelected = undefined;
-    this.required = false;
-    this.theme = "";
-    this.disabled = false;
-    this.identifier = undefined;
-    this.label = "label";
-    this.labelHidden = false;
-    this.name = undefined;
-    this.role = undefined;
-    this.checked = false;
-    this.value = undefined;
-  }
-  /**
-   * 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, "aria-selected": this.accessibleSelected, 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"],
-    "accessibleSelected": [1, "accessible-selected"],
-    "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() {
-  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);
-      }
-      break;
-  } });
-}
-
-export { DuetCheckbox as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-a1371eee.js

@@ -1,57 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
-  childList: true,
-  subtree: true,
-}) => {
-  let mutation;
-  if (typeof MutationObserver !== "undefined") {
-    mutation = new MutationObserver(mutationList => {
-      onChange(changeHandler(mutationList, tagName));
-    });
-    mutation.observe(containerEl, options);
-  }
-  return mutation;
-};
-const watchForOptions = (containerEl, tagName, onChange) => {
-  return watchFor(containerEl, tagName, onChange, getSelectedOption);
-};
-const watchForElement = (containerEl, tagName, onChange) => {
-  return watchFor(containerEl, tagName, onChange, getElementItem, {
-    childList: true,
-    subtree: true,
-  });
-};
-const getElementItem = (mutationList) => {
-  let addedNode = false;
-  let removedNode = false;
-  mutationList.forEach(mut => {
-    if (mut.addedNodes.length) {
-      addedNode = true;
-    }
-    if (mut.removedNodes.length) {
-      removedNode = true;
-    }
-  });
-  return { addedNode, removedNode, mutationList };
-};
-const getSelectedOption = (mutationList, tagName) => {
-  let newOption;
-  mutationList.forEach(mut => {
-    // tslint:disable-next-line: prefer-for-of
-    for (let i = 0; i < mut.addedNodes.length; i++) {
-      newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
-    }
-  });
-  return newOption;
-};
-const findCheckedOption = (el, tagName) => {
-  if (el.nodeType !== 1) {
-    return undefined;
-  }
-  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
-  return options.find((o) => o.checked === true);
-};
-
-export { watchForElement as a, findCheckedOption as f, watchForOptions as w };

package/lib/dist-custom-elements/p-a848925d.js

@@ -1,98 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-670570b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { c as createID } from './p-45f71a69.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
-import { d as defineCustomElement$1 } from './p-24a51286.js';
-
-const duetProgressCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:rgb(243, 249, 252);border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:rgb(252, 243, 244)}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:rgb(0, 119, 179);border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:rgb(198, 12, 48)}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:rgb(0, 119, 179);border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-theme-turva .duet-progress progress[value]{color:rgb(198, 12, 48)}.duet-progress progress[value]::-webkit-progress-bar{background-color:rgb(243, 249, 252);border-radius:0}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar{background-color:rgb(252, 243, 244)}.duet-progress progress[value]::-webkit-progress-value{background-color:rgb(0, 119, 179);background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-value{background-color:rgb(198, 12, 48)}.duet-progress progress[value] ::-moz-progress-bar{background-color:rgb(243, 249, 252)}.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar{background-color:rgb(252, 243, 244)}";
-
-const DuetProgress = /*@__PURE__*/ proxyCustomElement(class DuetProgress extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Own Properties
-     */
-    this.progressId = createID("DuetProgress");
-    this.progressLabelId = createID("DuetProgressLabel");
-    this.accessibleDescribedBy = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.accessibleLabel = undefined;
-    this.accessibleLabelUploadDefaults = {
-      fi: ["lähetys valmis", "lähetys käynnissä"],
-      sv: ["Uppladdningen är klar", "Uppladdning pågår"],
-      en: ["upload completed", "upload in progress"],
-    };
-    this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
-    this.progress = 0;
-    this.caption = undefined;
-    this.height = "10px";
-    this.theme = "";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, null, h("div", { "aria-live": this.accessibleLabel ? "polite" : "off", "aria-hidden": this.accessibleLabel ? "false" : "true", "aria-atomic": "true", style: {
-        height: this.height,
-      }, id: this.progressId, class: {
-        "duet-progress": true,
-        "duet-progress-done": this.progress === 100,
-        "duet-progress-start": this.progress === 0,
-        "duet-progress-inprogress": this.progress < 99 && this.progress !== 0,
-        "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-visually-hidden", null, h("label", { htmlFor: this.progressLabelId }, h("span", null, this.accessibleLabel, this.progress !== 0 && `, ${this.accessibleLabelUpload[this.progress < 99 ? 1 : 0]}`))), this.caption && (h("div", { class: "duet-progress-caption" }, h("span", null, this.caption))), h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { class: "progress-bar" }, h("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
-  }
-  get element() { return this; }
-  static get style() { return duetProgressCss; }
-}, [0, "duet-progress", {
-    "accessibleDescribedBy": [1, "accessible-described-by"],
-    "accessibleDetails": [1, "accessible-details"],
-    "accessibleLabelledBy": [1, "accessible-labelled-by"],
-    "accessibleDescription": [1, "accessible-description"],
-    "accessibleLabel": [1, "accessible-label"],
-    "accessibleLabelUploadDefaults": [1, "accessible-label-upload-defaults"],
-    "accessibleLabelUpload": [1025, "accessible-label-upload"],
-    "progress": [1538],
-    "caption": [1],
-    "height": [1],
-    "theme": [1025]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-progress", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-progress":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetProgress);
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { DuetProgress as D, defineCustomElement as d };