@duetds/components 6.2.11 → 6.3.0

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.css

@@ -0,0 +1,55 @@
+*,
+*::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-slideout-lang {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+::slotted(*) {
+  position: relative;
+}
+
+::slotted(:not(:first-child)) {
+  padding-right: 0;
+  padding-left: 0.5rem;
+}
+
+::slotted(:not(:last-child))::after {
+  position: absolute;
+  top: 15%;
+  right: -16px;
+  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: 16px;
+  font-weight: 600;
+  line-height: 150%;
+  color: #00294d;
+  content: "|";
+}
+
+.duet-theme-turva ::slotted(:not(:last-child))::after {
+  color: #171c3a;
+}

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -0,0 +1,73 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getLocaleString } from "../../utils/language-utils";
+export class DuetSlideoutLang {
+  constructor() {
+    /**
+     * Own Properties.
+     */
+    this.chooseLangObject = {
+      en: "Choose language",
+      fi: "Valitse kieli",
+      sv: "Välj språk",
+    };
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const langTranslation = getLocaleString(this.chooseLangObject);
+    return (h(Host, null, h("div", { class: "duet-slideout-lang" }, h("duet-visually-hidden", null, langTranslation), h("duet-icon", { name: "navigation-language", margin: "none" }), h("slot", null))));
+  }
+  static get is() { return "duet-slideout-lang"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-slideout-lang.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-slideout-lang.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -0,0 +1,78 @@
+*,
+*::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;
+  height: 100%;
+}
+
+.duet-slideout-link {
+  position: relative;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 8px 0;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.25;
+  color: #00294d;
+  text-align: center;
+  text-decoration: none;
+}
+.duet-slideout-link.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: #940925;
+}
+.duet-slideout-link.active span {
+  position: relative;
+}
+.duet-slideout-link.active span::after {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  content: "";
+  background: #0077b3;
+  transform: translateY(2px);
+}
+.duet-slideout-link.active.duet-theme-turva span::after {
+  background: #c60c30;
+}
+.duet-slideout-link.small {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.duet-slideout-link.small span::after {
+  height: 1px;
+  transform: translateY(1px);
+}
+.duet-slideout-link.medium {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.duet-slideout-link.large {
+  font-size: 1.5rem;
+  font-weight: 800;
+}

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -0,0 +1,144 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetSlideoutLink {
+  constructor() {
+    this.theme = "";
+    this.active = false;
+    this.href = "#";
+    this.icon = undefined;
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("a", { class: {
+        "duet-slideout-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [this.size]: true,
+      }, href: this.href }, this.icon && h("duet-icon", { size: "medium", name: this.icon, margin: "none" }), h("span", null, h("slot", null)))));
+  }
+  static get is() { return "duet-slideout-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-slideout-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-slideout-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"#\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon"
+        },
+        "attribute": "icon",
+        "reflect": true,
+        "defaultValue": "undefined"
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size. Small, medium or large."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"medium\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -0,0 +1,149 @@
+*,
+*::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;
+  height: 100%;
+}
+
+:host slot::slotted(duet-slideout-panel-dropdown),
+:host slot::slotted(duet-slideout-panel-link) {
+  position: relative;
+  top: 0.5rem;
+  opacity: 0;
+  transition: top 0.3s ease-in, opacity 0.3s ease-in;
+}
+
+:host([open]) slot::slotted(duet-slideout-panel-link),
+:host([open]) slot::slotted(duet-slideout-panel-dropdown) {
+  top: 0;
+  opacity: 1;
+}
+
+.duet-slideout-panel {
+  position: relative;
+  height: 100%;
+}
+.duet-slideout-panel .link {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 8px 0;
+  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: 1.5rem;
+  font-weight: 800;
+  line-height: 1.25;
+  color: #00294d;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+.duet-slideout-panel .link .label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.duet-slideout-panel .link.active .label-text {
+  position: relative;
+}
+.duet-slideout-panel .link.active .label-text::after {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  content: "";
+  background: #0077b3;
+  transform: translateY(2px);
+}
+.duet-slideout-panel .dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 600;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  visibility: visible;
+  background: #f3f9fc;
+}
+.duet-slideout-panel .dialog.hidden {
+  visibility: hidden;
+}
+.duet-slideout-panel .dialog.hidden .top .back,
+.duet-slideout-panel .dialog.hidden .top span {
+  opacity: 0;
+}
+.duet-slideout-panel .top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px;
+}
+.duet-slideout-panel .top .back {
+  opacity: 1;
+  transition: top 0.3s ease-in, opacity 0.3s ease-in;
+}
+.duet-slideout-panel .top duet-icon {
+  padding: 16px;
+}
+.duet-slideout-panel .top span {
+  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.5;
+  color: #00294d;
+  opacity: 1;
+  transition: top 0.3s ease-in, opacity 0.3s ease-in;
+}
+.duet-slideout-panel .items {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 1rem 16px;
+  overflow-y: auto;
+  color: #00294d;
+}
+.duet-slideout-panel.duet-theme-turva .link {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #940925;
+}
+.duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
+  background: #c60c30;
+}
+.duet-slideout-panel.duet-theme-turva .dialog {
+  background: #f5f5f7;
+}
+.duet-slideout-panel.duet-theme-turva .top span {
+  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-slideout-panel.duet-theme-turva .items {
+  background: #f5f5f7;
+}

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -0,0 +1,175 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { FocusGuard } from "../../utils/focus-utils";
+import { getLocaleString } from "../../utils/language-utils";
+export class DuetSlideoutPanel {
+  constructor() {
+    this.exitLangObject = {
+      en: "Exit the dialog",
+      fi: "Poistu dialogista",
+      sv: "Stäng dialogrutan",
+    };
+    this.updateLabel = () => {
+      const labelSlotElement = this.element.querySelector("[slot='label']");
+      this.label = labelSlotElement;
+    };
+    this.onToggleClick = () => {
+      const toggle = !this.open;
+      this.open = toggle;
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onCloseClick = () => {
+      this.open = false;
+      const parentElement = this.element.parentElement;
+      if (parentElement.tagName === "DUET-SLIDEOUT") {
+        const slideout = this.element.parentElement;
+        slideout.toggle();
+      }
+    };
+    this.label = undefined;
+    this.theme = "";
+    this.active = false;
+    this.open = false;
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.updateLabel();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const exitTranslation = getLocaleString(this.exitLangObject);
+    return (h(Host, null, h("div", { class: {
+        "duet-slideout-panel": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+      } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        link: true,
+        active: this.active,
+      }, onClick: this.onToggleClick }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small" }))), h("div", { class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        back: true,
+      }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small" })), h("span", null, this.label.innerHTML), h("button", { type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+      } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  static get is() { return "duet-slideout-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-slideout-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-slideout-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Open"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon"
+        },
+        "attribute": "icon",
+        "reflect": true,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "label": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+}