@duetds/components 6.0.3 → 6.0.5

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

@@ -0,0 +1,175 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, F as Fragment } from './p-1ad6b04e.js';
+import { f as sizeHeader } from './p-266411cf.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$3 } from './p-4f516732.js';
+import { d as defineCustomElement$2 } from './p-53a0c93d.js';
+
+const duetTrayCss = "*,*::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:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;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;visibility:hidden;background:#f3f9fc;border-bottom:1px solid #e1e3e6;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray.duet-theme-turva{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;background:#f5f5f7;border-color:#e4e4e6}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid #e1e3e6}.duet-theme-turva .duet-tray-expandable-content{border-color:#e4e4e6}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:#00294d;text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:#171c3a}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
+
+const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
+const DuetTray$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Own Properties.
+     */
+    this.isTicking = false;
+    this.expandableId = createID("DuetTray");
+    this.expanded = false;
+    /**
+     * The state of the info panel.
+     */
+    this.hiddenState = false;
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Defaults for accessibleCloseLabel
+     * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+     */
+    this.accessibleCloseLabelDefaults = {
+      fi: "Sulje",
+      en: "Close",
+      sv: "Stäng",
+    };
+    /**
+     * Accessible label that is shown for screen reader users in the expandable
+     * close toggle. Not visible for normal users.
+     * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+     */
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+    /**
+     * Defaults for accessibleOpenLabel
+     * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+     */
+    this.accessibleOpenLabelDefaults = {
+      fi: "Avaa",
+      en: "Open",
+      sv: "Öppna",
+    };
+    /**
+     * Accessible label that is shown for screen reader users in the expandable
+     * open toggle. Not visible for normal users.
+     * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+     */
+    this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
+    /**
+     * Theme of the info panel.
+     */
+    this.theme = "";
+    /**
+     * Toggle whether the info panel is visible or not. You can use this
+     * property e.g. when pricing information is revealed to the user.
+     */
+    this.active = false;
+    /**
+     * Hide the info panel when user scrolls back to the top of the viewport.
+     */
+    this.autoHide = true;
+    /**
+     * Enable or disable the automatic responsive behaviour which
+     * makes the info panel hide on larger viewports. Settings this to
+     * "false" means that the header panel is visible on all device sizes.
+     */
+    this.responsive = true;
+    /**
+     * Local methods.
+     */
+    this.animationLoop = () => {
+      this.hiddenState = window.pageYOffset < topOffset;
+      this.isTicking = false;
+    };
+    this.toggleExpandable = ev => {
+      ev.preventDefault();
+      this.expanded = !this.expanded;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
+  }
+  /**
+   * Component event handling.
+   */
+  getFrame() {
+    if (!this.isTicking && this.autoHide && this.active) {
+      requestAnimationFrame(this.animationLoop);
+      this.isTicking = true;
+    }
+  }
+  handleBodyClick(e) {
+    if (this.expanded) {
+      this.expanded = this.element.contains(e.target);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-tray": true,
+        "duet-tray-is-active": this.active,
+        "duet-tray-is-hidden": this.hiddenState,
+        "duet-tray-is-responsive": this.responsive,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-tray-is-expandable": this.hasAdditionalContent,
+      } }, h("div", { class: "duet-tray-default-content", role: "status" }, h("slot", null)), this.hasAdditionalContent && (h(Fragment, null, h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", null, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { class: "duet-tray-expandable-content" }, h("slot", { name: "additional" })))))));
+  }
+  get element() { return this; }
+  static get style() { return duetTrayCss; }
+}, [1, "duet-tray", {
+    "language": [1025],
+    "accessibleCloseLabelDefaults": [1, "accessible-close-label-default"],
+    "accessibleCloseLabel": [1, "accessible-close-label"],
+    "accessibleOpenLabelDefaults": [1, "accessible-open-label-default"],
+    "accessibleOpenLabel": [1, "accessible-open-label"],
+    "theme": [1025],
+    "active": [516],
+    "autoHide": [4, "auto-hide"],
+    "responsive": [4],
+    "expanded": [32],
+    "hiddenState": [32]
+  }, [[9, "scroll", "getFrame"], [16, "click", "handleBodyClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-tray", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-tray":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTray$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetTray = DuetTray$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetTray, defineCustomElement };

package/lib/dist-custom-elements/duet-upload-aria-status.d.ts

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

package/lib/dist-custom-elements/duet-upload-aria-status.js

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

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

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