@duetds/components 8.0.6 → 8.1.1

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -4,398 +4,397 @@
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
-  constructor() {
+    constructor() {
+        /**
+         * 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;
+        };
+        this.isOpen = false;
+        this.hasNotifications = undefined;
+        this.icon = "";
+        this.label = "Label";
+        this.language = getLanguage();
+        this.accessibleLabelNotificationsDefaults = {
+            en: "No notifications",
+            fi: "Ei ilmoituksia",
+            sv: "Inga notifikationer",
+        };
+        this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
+        this.badge = false;
+        this.theme = "";
+        this.direction = "left";
+    }
     /**
-     * Component event handling.
+     * Component lifecycle events.
      */
-    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;
-    };
-    this.isOpen = false;
-    this.hasNotifications = undefined;
-    this.icon = "";
-    this.label = "Label";
-    this.language = getLanguage();
-    this.accessibleLabelNotificationsDefaults = {
-      en: "No notifications",
-      fi: "Ei ilmoituksia",
-      sv: "Inga notifikationer",
-    };
-    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
-    this.badge = false;
-    this.theme = "";
-    this.direction = "left";
-  }
-  /**
-   * 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);
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.updateNotificationState();
     }
-  }
-  /**
-   * 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();
+    connectedCallback() {
+        this.observer = new MutationObserver(this.updateNotificationState);
+        this.observer.observe(this.element, { childList: true });
+        subscribeTabbingChange(this);
     }
-    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 });
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.observer = null;
+        unsubscribeTabbingChange(this);
     }
-  }
-  /**
-   * 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: arrowDownIcon.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))))));
-  }
-  static get is() { return "duet-notification-drawer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-notification-drawer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-notification-drawer.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetIconName",
-          "resolved": "string",
-          "references": {
-            "DuetIconName": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon to display to the left of the drawer button."
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for the drawer button."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"Label\""
-      },
-      "language": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The currently active language.\nUsed to determine the message displayed when there are no notifications."
-        },
-        "attribute": "language",
-        "reflect": false,
-        "defaultValue": "getLanguage()"
-      },
-      "accessibleLabelNotificationsDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| DuetLangObject\n    | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
-            }],
-          "text": "Defaults for accessibleLabelNotifications"
-        },
-        "attribute": "accessible-label-notification-default",
-        "reflect": false,
-        "defaultValue": "{\n    en: \"No notifications\",\n    fi: \"Ei ilmoituksia\",\n    sv: \"Inga notifikationer\",\n  }"
-      },
-      "accessibleLabelNotifications": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
-            }],
-          "text": "Adds accessible label for tooltip that is shown for notifications"
-        },
-        "attribute": "accessible-label-notifications",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
-      },
-      "badge": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show a badge that indicates something has changed."
-        },
-        "attribute": "badge",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the notification drawer."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetNotificationDrawerDirection",
-          "resolved": "\"left\" | \"right\"",
-          "references": {
-            "DuetNotificationDrawerDirection": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
-              "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Which direction should the drawer open in?"
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "\"left\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isOpen": {},
-      "hasNotifications": {}
-    };
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "options"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Move focus to the menu's button. Use instead of the native `focus()` method",
-          "tags": [{
-              "name": "param",
-              "text": "options"
-            }]
+    handleClickFocusOutside(e) {
+        const target = e.target;
+        if (this.isOpen && !this.element.contains(target)) {
+            this.close(false);
         }
-      },
-      "open": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Open the menu",
-          "tags": []
+    }
+    /**
+     * 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();
         }
-      },
-      "close": {
-        "complexType": {
-          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "moveFocusToButton should focus be moved to the menu's button on close?"
-                }],
-              "text": "should focus be moved to the menu's button on close?"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Close the menu",
-          "tags": [{
-              "name": "param",
-              "text": "moveFocusToButton should focus be moved to the menu's button on close?"
-            }]
+        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 });
         }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "focus",
-        "method": "handleClickFocusOutside",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleClickFocusOutside",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
+    }
+    /**
+     * 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: arrowDownIcon.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))))));
+    }
+    static get is() { return "duet-notification-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-notification-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-notification-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display to the left of the drawer button."
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the drawer button."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"Label\""
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently active language.\nUsed to determine the message displayed when there are no notifications."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "getLanguage()"
+            },
+            "accessibleLabelNotificationsDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| DuetLangObject\n    | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
+                        }],
+                    "text": "Defaults for accessibleLabelNotifications"
+                },
+                "attribute": "accessible-label-notification-default",
+                "reflect": false,
+                "defaultValue": "{\n    en: \"No notifications\",\n    fi: \"Ei ilmoituksia\",\n    sv: \"Inga notifikationer\",\n  }"
+            },
+            "accessibleLabelNotifications": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown for notifications"
+                },
+                "attribute": "accessible-label-notifications",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
+            },
+            "badge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a badge that indicates something has changed."
+                },
+                "attribute": "badge",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the notification drawer."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetNotificationDrawerDirection",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "DuetNotificationDrawerDirection": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which direction should the drawer open in?"
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "\"left\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "hasNotifications": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move focus to the menu's button. Use instead of the native `focus()` method",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options"
+                        }]
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the menu",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "moveFocusToButton",
+                            "type": "boolean",
+                            "docs": "should focus be moved to the menu's button on close?"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the menu",
+                    "tags": [{
+                            "name": "param",
+                            "text": "moveFocusToButton should focus be moved to the menu's button on close?"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "handleClickFocusOutside",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickFocusOutside",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }