@kth/style 0.6.3-alpha.0 → 0.6.4

package/dist/cjs/components/MenuPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+export declare function closeAllDialogs(): void;
+/**
+ * Add mouse and keyboard event listeners to a menu panel (<dialog>)
+ * @param dialog A <dialog> element
+ */
+export declare function addEventListeners(dialog: HTMLDialogElement): void;
+export declare class MenuPanel {
+    static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export { MenuPanel } from "./components/MenuPanel";

package/dist/cjs/index.js

@@ -0,0 +1,74 @@
+'use strict';
+
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
+}
+/**
+ * Add mouse and keyboard event listeners to a menu panel (<dialog>)
+ * @param dialog A <dialog> element
+ */
+function addEventListeners(dialog) {
+    const closeButton = dialog.querySelector(".kth-button.close");
+    const backButton = dialog.querySelector(".kth-button.back");
+    dialog.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            dialog.close();
+        }
+    });
+    if (closeButton instanceof HTMLButtonElement) {
+        closeButton.addEventListener("click", () => {
+            closeAllDialogs();
+        });
+    }
+    if (backButton instanceof HTMLButtonElement) {
+        backButton.addEventListener("click", () => {
+            dialog.close();
+        });
+    }
+}
+class MenuPanel {
+    static init(container, items) {
+        if (!container)
+            return;
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dialog = item.nextElementSibling;
+            if (!(dialog instanceof HTMLDialogElement))
+                continue;
+            addEventListeners(dialog);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                if (!dialog.open) {
+                    closeAllDialogs();
+                    dialog.show();
+                }
+                else {
+                    closeAllDialogs();
+                }
+            });
+        }
+        container.addEventListener("focusout", function (e) {
+            const target = e.relatedTarget;
+            if (target && target instanceof Node && !container.contains(target)) {
+                closeAllDialogs();
+            }
+        });
+    }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
+    }
+}
+
+exports.MenuPanel = MenuPanel;

package/dist/cjs/react.d.ts

@@ -0,0 +1 @@
+export default function hello(): string;

package/dist/cjs/react.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function hello() {
+    return "world";
+}
+
+module.exports = hello;

package/dist/esm/components/MenuPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+export declare function closeAllDialogs(): void;
+/**
+ * Add mouse and keyboard event listeners to a menu panel (<dialog>)
+ * @param dialog A <dialog> element
+ */
+export declare function addEventListeners(dialog: HTMLDialogElement): void;
+export declare class MenuPanel {
+    static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export { MenuPanel } from "./components/MenuPanel";

package/dist/esm/index.js

@@ -0,0 +1,72 @@
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
+}
+/**
+ * Add mouse and keyboard event listeners to a menu panel (<dialog>)
+ * @param dialog A <dialog> element
+ */
+function addEventListeners(dialog) {
+    const closeButton = dialog.querySelector(".kth-button.close");
+    const backButton = dialog.querySelector(".kth-button.back");
+    dialog.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            dialog.close();
+        }
+    });
+    if (closeButton instanceof HTMLButtonElement) {
+        closeButton.addEventListener("click", () => {
+            closeAllDialogs();
+        });
+    }
+    if (backButton instanceof HTMLButtonElement) {
+        backButton.addEventListener("click", () => {
+            dialog.close();
+        });
+    }
+}
+class MenuPanel {
+    static init(container, items) {
+        if (!container)
+            return;
+        for (const item of items) {
+            if (!(item instanceof HTMLElement))
+                continue;
+            const dialog = item.nextElementSibling;
+            if (!(dialog instanceof HTMLDialogElement))
+                continue;
+            addEventListeners(dialog);
+            item.addEventListener("click", (e) => {
+                e.preventDefault();
+                if (!dialog.open) {
+                    closeAllDialogs();
+                    dialog.show();
+                }
+                else {
+                    closeAllDialogs();
+                }
+            });
+        }
+        container.addEventListener("focusout", function (e) {
+            const target = e.relatedTarget;
+            if (target && target instanceof Node && !container.contains(target)) {
+                closeAllDialogs();
+            }
+        });
+    }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
+    }
+}
+
+export { MenuPanel };

package/dist/esm/react.d.ts

@@ -0,0 +1 @@
+export default function hello(): string;

package/dist/esm/react.js

@@ -0,0 +1,5 @@
+function hello() {
+    return "world";
+}
+
+export { hello as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.6.3-alpha.0",
+  "version": "0.6.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -12,7 +12,8 @@
       "import": "./dist/esm/react.js",
       "require": "./dist/cjs/react.js"
     },
-    "./scss/*": "./scss/*"
+    "./scss/*": "./scss/*",
+    "./assets/*": "./assets/*"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/scss/components/button.scss

@@ -57,6 +57,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
   .kth-button.previous {
     border: 1px solid var(--color-secondary);
     color: var(--color-secondary);
+    background: none;
 
     &:hover {
       background: var(--color-secondary-hover);