@duetds/components 6.0.3 → 6.0.4

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

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

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

@@ -0,0 +1,331 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-3fc2d124.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './p-bd779757.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { f as focusElement, F as FocusGuard } from './p-0b8f16f1.js';
+import { b as isEscapeKey } from './p-d8549efe.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$7 } from './p-e294c0fb.js';
+import { d as defineCustomElement$6 } from './p-f7db7c40.js';
+import { d as defineCustomElement$5 } from './p-7739604d.js';
+import { d as defineCustomElement$4 } from './p-81c9b244.js';
+import { d as defineCustomElement$3 } from './p-3d987b87.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetModalCss = "*,*::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-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;background:rgba(0, 41, 77, 0.85);opacity:0;transition:300ms ease;transition-delay:200ms}.duet-modal-overlay.duet-theme-turva{background:rgba(23, 28, 58, 0.85)}.duet-modal-overlay.duet-modal-active{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}.duet-modal-overlay.duet-disable-transitions{transition:none}::slotted(img){width:100%}.duet-modal-inner{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){.duet-modal-inner{padding:48px 16px}}@media (max-width: 35.9375em){.duet-modal-inner.duet-modal-large{padding-right:0;padding-left:0}}.duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;background:white;border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}.duet-theme-turva .duet-modal{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-modal-active .duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}.duet-disable-transitions .duet-modal{transition:none}.duet-modal.small{max-width:545px}.duet-modal.large{max-width:100%}@media (min-width: 36em){.duet-modal.large{max-width:1110px}}.duet-modal:focus{outline:0}.duet-modal-body{width:100%;padding:36px 28px}.duet-modal-body.duet-modal-gutter-small{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}@media (max-width: 22.5em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 28px}}@media (max-width: 35.9375em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}}@media (min-width: 36em){.duet-modal-body{padding:36px}.duet-modal-body.duet-modal-gutter-large{padding:28px 72px}}@media (min-width: 48em){.duet-modal-body{padding:36px 72px}.duet-modal-body.duet-modal-gutter-large{padding:36px 72px}}@media (min-width: 76.25em){.duet-modal-body{padding:36px 48px 48px}.duet-modal-body.duet-modal-gutter-large{padding:48px 94px}.small .duet-modal-body{padding:36px 48px}}.duet-modal-header{text-align:center}.duet-modal-close{position:absolute;top:12px;right:12px}.duet-modal-heading{width:100%;padding-right:60px;overflow:hidden;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.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}.duet-modal-heading.duet-p-0{padding:0 !important}.duet-modal-heading.duet-m-0{margin:0 !important}";
+
+// The transition below is slightly higher than the actual CSS transition as VoiceOver on
+// iOS has otherwise problems moving the focus from modal back to the original element.
+// This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
+const TRANSITION_MS = 600;
+const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetOpen = createEvent(this, "duetOpen", 7);
+    this.duetClose = createEvent(this, "duetClose", 7);
+    this.duetBeforeClose = createEvent(this, "duetBeforeClose", 7);
+    var _a, _b;
+    /**
+     * Own Properties.
+     */
+    this.modalId = createID("DuetModal");
+    this.slotDefaultId = createID("DuetModal-default-slot");
+    this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+    this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+    this.handleAndroidResizeEvents = () => {
+      if (document.activeElement.tagName == "INPUT") {
+        window.setTimeout(function () {
+          var _a;
+          try {
+            //@ts-ignore
+            (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.scrollIntoViewIfNeeded(true);
+          }
+          catch (e) {
+            //dev-null any errors here
+          }
+        }, 100);
+      }
+    };
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.open = false;
+    /**
+     * The currently active language. This setting also changes the logo 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 ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+     */
+    this.accessibleCloseLabelDefaults = {
+      fi: "Sulje ikkuna",
+      sv: "Stäng fönstret",
+      en: "Close the dialog",
+    };
+    /**
+     * Adds accessible label for the close icon that is only shown for screen
+     * readers. This property is always required to create an accessibly interface!
+     * Swedish translation for this property is “Stäng fönstret”.
+     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+     */
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+    /**
+     * Size of the modal window.
+     */
+    this.size = "medium";
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Size of the modal window.
+     */
+    this.gutterSize = "medium";
+    /**
+     * Theme of the modal.
+     */
+    this.theme = "";
+    /**
+     * Accessible heading displayed in the modal. The modal marks this as the
+     * label of the modal when used. This helps screen reader users which is
+     * why this is a required property.
+     */
+    this.heading = "";
+    /**
+     * Accessible heading size
+     */
+    this.headingLevel = "h3";
+    /**
+     * Icon to display above the heading (from Duet’s icons). Example:
+     * "form-location"
+     */
+    this.icon = "";
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "primary".
+     */
+    this.color = "";
+    /**
+     * Use this property when you need to have the modal dialog initially active.
+     */
+    this.active = false;
+    /**
+     * Use this property when you want the modal to close when clicked outside of modal.
+     */
+    this.closeOnBlur = false;
+  }
+  openChanged() {
+    if (this.open) {
+      if (this.modalEl && this.modalEl.scrollTop) {
+        this.modalEl.scrollTop = 0;
+      }
+      this.focusedElBeforeOpen = document.activeElement;
+      disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
+      setTimeout(() => {
+        this.buttonEl.setFocus();
+      }, TRANSITION_MS);
+      setTimeout(() => {
+        this.modalEl.classList.add("duet-disable-transitions");
+      }, TRANSITION_MS + 200);
+      // fix for android devices where scrolling and softKeyboards MAY be
+      // acting weird when the modal contains an input field
+      if (this.isAndroidDevice) {
+        window.addEventListener("resize", this.handleAndroidResizeEvents);
+      }
+      this.duetOpen.emit();
+    }
+    else {
+      this.modalEl.classList.remove("duet-disable-transitions");
+      enableBodyScroll(this.modalEl);
+      this.duetClose.emit();
+      setTimeout(() => {
+        focusElement(this.focusedElBeforeOpen);
+      }, TRANSITION_MS);
+      if (this.isAndroidDevice) {
+        window.removeEventListener("resize", this.handleAndroidResizeEvents);
+      }
+    }
+  }
+  activeChanged() {
+    this.open = this.active;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    if (this.active) {
+      // This specific line below can’t be moved to componentWillLoad()
+      // as it breaks body scroll enabling.
+      this.open = true;
+      this.modalEl.classList.add("duet-disable-transitions");
+    }
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.modalEl);
+  }
+  /**
+   * Component event handling.
+   */
+  handleKeyUp(ev) {
+    if (this.open) {
+      // When Esc is pressed the modal should be closed
+      if (isEscapeKey(ev)) {
+        this.closeModal(ev);
+      }
+    }
+  }
+  /**
+   * Shows the modal dialog. Additionally saves the element that triggered
+   * the modal so that focus can be moved back to this specific element when
+   * the modal dialog is closed.
+   */
+  async show() {
+    this.open = true;
+  }
+  /**
+   * Hides the modal dialog and puts focus back to the original element
+   * that triggered the modal (if we’re still in the same view).
+   */
+  async hide() {
+    this.open = false;
+  }
+  /**
+   * Local methods.
+   */
+  closeModal(ev) {
+    this.duetBeforeClose.emit({
+      originalEvent: ev,
+      component: "duet-modal",
+    });
+    // Make sure the event wasn’t prevented previously
+    if (!ev.defaultPrevented) {
+      setTimeout(() => {
+        this.hide();
+      }, 1);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    let iconColor = "primary";
+    let closeColor = "secondary";
+    if (this.theme === "turva") {
+      iconColor = "primary-turva";
+      closeColor = "secondary-turva";
+    }
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+        "duet-modal-overlay": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-modal-active": this.open,
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { class: {
+        "duet-modal-inner": true,
+        "duet-modal-large": this.size === "large",
+      }, role: "document", onClick: e => {
+        if (this.closeOnBlur) {
+          this.closeModal(e);
+        }
+      } }, h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
+        if (this.closeOnBlur) {
+          e.stopPropagation();
+        }
+      } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+        "duet-modal-body": true,
+        "duet-modal-gutter-small": this.gutterSize === "small",
+        "duet-modal-gutter-medium": this.gutterSize === "medium",
+        "duet-modal-gutter-large": this.gutterSize === "large",
+      } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "open": ["openChanged"],
+    "active": ["activeChanged"]
+  }; }
+  static get style() { return duetModalCss; }
+}, [1, "duet-modal", {
+    "language": [1025],
+    "accessibleCloseLabelDefaults": [1, "accessible-close-label-default"],
+    "accessibleCloseLabel": [1, "accessible-close-label"],
+    "size": [1],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleDescription": [1, "accessible-description"],
+    "gutterSize": [1, "gutter-size"],
+    "theme": [1025],
+    "heading": [1],
+    "headingLevel": [1, "heading-level"],
+    "icon": [1],
+    "color": [1],
+    "active": [1540],
+    "closeOnBlur": [1028, "close-on-blur"],
+    "open": [32],
+    "show": [64],
+    "hide": [64]
+  }, [[8, "keyup", "handleKeyUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-modal", "duet-button", "duet-heading", "duet-icon", "duet-spacer", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetModal$1);
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetModal = DuetModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetModal, defineCustomElement };

package/lib/dist-custom-elements/duet-notification-drawer.d.ts

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

package/lib/dist-custom-elements/duet-notification-drawer.js

@@ -0,0 +1,194 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-3fc2d124.js';
+import { a as actionArrowDownSmall } from './p-115c79b6.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$4 } from './p-c70f3ccb.js';
+import { d as defineCustomElement$3 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-213ef84c.js';
+
+const duetNotificationDrawerCss = "*,*::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-drawer{position:relative}@media (min-width: 62em){.duet-drawer{display:inline-block}}.duet-drawer-toggle{position:relative;display:flex;align-items:center;width:100%;height:48px;padding:0 20px;overflow:hidden;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;font-variant-numeric:tabular-nums;line-height:48px;color:#00294d;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:white;border-bottom:1px solid #e1e3e6;border-radius:0;-webkit-appearance:none;appearance:none}@media (min-width: 62em){.duet-drawer-toggle{z-index:200;width:auto;max-width:200px;padding:0 30px 0 12px;overflow:hidden;font-size:0.875rem;line-height:4rem;border:0;border-radius:4px;transition:border 300ms ease}}.duet-theme-turva .duet-drawer-toggle{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-color:white;border-color:#e4e4e6}.duet-drawer-toggle:active{opacity:0.75}.duet-drawer-toggle:focus{outline:0}:host(.user-is-tabbing) .duet-drawer-toggle: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-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-drawer-toggle:hover{color:#004d80}.duet-theme-turva .duet-drawer-toggle:hover{color:#444445}.duet-drawer-toggle::after{display:none !important}@media (min-width: 62em){.duet-drawer-toggle::after{position:absolute;top:auto;bottom:0;left:0;display:block !important;width:100%;height:3px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(3px)}.duet-theme-turva .duet-drawer-toggle::after{background:#c60c30}}.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{color:#004d80;border-bottom:1px solid #f5f8fa;border-radius:0}.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:#444445;border-color:#f5f5f7}@media (min-width: 62em){.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{border:0}.duet-drawer-toggle[aria-expanded=true]::after,.duet-drawer-toggle[aria-expanded=true]:hover::after{left:0;width:100%;transform:translateY(0)}}.duet-drawer-icon{position:relative;display:inline-flex;min-width:12px;margin-right:12px;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-drawer-icon{margin-right:8px}}.duet-drawer-label{line-height:1}.duet-drawer-caret{position:absolute;top:50%;right:20px;display:flex;width:10px;height:10px;margin-left:8px;line-height:normal;pointer-events:none;transition:300ms ease;transform:translateY(-50%);transform-origin:50% 50%}@media (min-width: 62em){.duet-drawer-caret{right:16px;width:7px;height:7px}}.duet-drawer-caret duet-icon{width:10px}.duet-drawer-toggle[aria-expanded=true] .duet-drawer-caret{transform:translateY(-50%) rotate(180deg)}.duet-drawer-badge{position:absolute;top:0;right:0;display:inline-block;width:6px;height:6px;background:#f7b228;border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-drawer-badge{background:#faa40f}.duet-drawer-content{display:none;background-color:white;border-bottom:1px solid #e1e3e6}.duet-drawer-content:focus{outline:0}.duet-theme-turva .duet-drawer-content{background-color:white;border-color:#e1e3e6}@media (min-width: 62em){.duet-drawer-content{position:absolute;top:100%;z-index:600;display:block;width:450px;max-height:420px;padding-left:0;overflow-y:auto;visibility:hidden;background-color:white;border:1px solid #e1e3e6;border-radius:4px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:300ms ease;transform:scale(0.95) translateZ(0) translateY(-10px);transform-origin:50% 0;scrollbar-width:none}.duet-drawer-content::-webkit-scrollbar{display:none}.duet-theme-turva .duet-drawer-content{background-color:white}.duet-drawer-content.duet-drawer-left{right:0}.duet-drawer-content.duet-drawer-right{left:0}}.duet-drawer-content.duet-drawer-open{display:block}@media (min-width: 62em){.duet-drawer-content.duet-drawer-open{visibility:visible;opacity:1;transform:scale(1) translateZ(0) translateY(0)}}";
+
+const ESC_KEY = 27;
+const DuetNotificationDrawer$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.isOpen = false;
+    /**
+     * Icon to display to the left of the drawer button.
+     */
+    this.icon = "";
+    /**
+     * Label for the drawer button.
+     */
+    this.label = "Label";
+    /**
+     * The currently active language.
+     * Used to determine the message displayed when there are no notifications.
+     */
+    this.language = getLanguage();
+    /**
+     * Defaults for accessibleLabelNotifications
+     * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+     */
+    this.accessibleLabelNotificationsDefaults = {
+      en: "No notifications",
+      fi: "Ei ilmoituksia",
+      sv: "Inga notifikationer",
+    };
+    /**
+     * Adds accessible label for tooltip that is shown for notifications
+     * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+     */
+    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
+    /**
+     * Show a badge that indicates something has changed.
+     */
+    this.badge = false;
+    /**
+     * Theme of the notification drawer.
+     */
+    this.theme = "";
+    /**
+     * Which direction should the drawer open in?
+     */
+    this.direction = "left";
+    /**
+     * Component event handling.
+     */
+    this.handleKeyDown = (ev) => {
+      if (this.isOpen && ev.keyCode === ESC_KEY) {
+        this.close();
+      }
+    };
+    this.toggleMenu = (e) => {
+      // this is needed to prevent the main menu closing on mobile
+      e.stopPropagation();
+      this.isOpen ? this.close() : this.open();
+    };
+    this.updateNotificationState = () => {
+      this.hasNotifications = this.element.children.length > 0;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.updateNotificationState();
+  }
+  connectedCallback() {
+    this.observer = new MutationObserver(this.updateNotificationState);
+    this.observer.observe(this.element, { childList: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.observer = null;
+  }
+  handleClickFocusOutside(e) {
+    const target = e.target;
+    if (this.isOpen && !this.element.contains(target)) {
+      this.close(false);
+    }
+  }
+  /**
+   * Move focus to the menu's button. Use instead of the native `focus()` method
+   * @param options
+   */
+  async setFocus(options) {
+    this.drawerButtonEl.focus(options);
+  }
+  /**
+   * Open the menu
+   */
+  async open() {
+    const header = this.element.closest("duet-header");
+    if (header) {
+      header.closeMenus();
+    }
+    this.isOpen = true;
+    this.drawerContentEl.scrollTop = 0;
+  }
+  /**
+   * Close the menu
+   * @param moveFocusToButton should focus be moved to the menu's button on close?
+   */
+  async close(moveFocusToButton = true) {
+    this.isOpen = false;
+    if (moveFocusToButton) {
+      this.setFocus({ preventScroll: true });
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-drawer": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, onKeyDown: this.handleKeyDown }, h("button", { ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { class: "duet-drawer-icon" }, h("duet-icon", { margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { class: "duet-drawer-badge" }))), h("span", { class: "duet-drawer-label" }, this.label), h("div", { class: "duet-drawer-caret" }, h("duet-icon", { margin: "none", size: "auto", icon: actionArrowDownSmall.svg, color: "currentColor" }))), h("div", { id: "duet-drawer-content", class: {
+        "duet-drawer-content": true,
+        "duet-drawer-right": this.direction === "right",
+        "duet-drawer-left": this.direction === "left",
+        "duet-drawer-open": this.isOpen,
+      }, ref: element => (this.drawerContentEl = element) }, this.hasNotifications ? (h("div", { role: "list" }, h("slot", null))) : (h("duet-empty-state", { size: "small" }, h("duet-paragraph", { size: "small", margin: "none" }, this.accessibleLabelNotifications))))));
+  }
+  get element() { return this; }
+  static get style() { return duetNotificationDrawerCss; }
+}, [1, "duet-notification-drawer", {
+    "icon": [1],
+    "label": [1],
+    "language": [1],
+    "accessibleLabelNotificationsDefaults": [1, "accessible-label-notification-default"],
+    "accessibleLabelNotifications": [1, "accessible-label-notifications"],
+    "badge": [4],
+    "theme": [1025],
+    "direction": [1],
+    "isOpen": [32],
+    "hasNotifications": [32],
+    "setFocus": [64],
+    "open": [64],
+    "close": [64]
+  }, [[6, "focus", "handleClickFocusOutside"], [6, "click", "handleClickFocusOutside"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-notification-drawer", "duet-empty-state", "duet-icon", "duet-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-notification-drawer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetNotificationDrawer$1);
+      }
+      break;
+    case "duet-empty-state":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetNotificationDrawer = DuetNotificationDrawer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetNotificationDrawer, defineCustomElement };

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

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