@web-atoms/web-controls 2.6.5 → 2.6.7

package/dist-esm/mobile-app/MasterDetailPage.js

@@ -2,163 +2,164 @@ import PageNavigator from "../PageNavigator.js";
 import { ContentPage, isMobileView } from "./MobileApp.js";
 import { descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI.js";
 import AtomRepeater from "../basic/AtomRepeater.js";
-import "./MasterDetailPage.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./MasterDetailPage.global.css"));
 const findItem = (content, item) => {
-    for (const iterator of descendentElementIterator(content)) {
-        const repeater = iterator?.atomControl;
-        if (!(repeater instanceof AtomRepeater)) {
-            continue;
-        }
-        const index = repeater.items?.indexOf(item) ?? -1;
-        if (index === -1) {
-            continue;
-        }
-        const element = repeater.element?.querySelector(`[data-item-index="${index}"]`);
-        if (element) {
-            return element;
-        }
+  for (const iterator of descendentElementIterator(content)) {
+    const repeater = iterator?.atomControl;
+    if (!(repeater instanceof AtomRepeater)) {
+      continue;
+    }
+    const index = repeater.items?.indexOf(item) ?? -1;
+    if (index === -1) {
+      continue;
     }
+    const element = repeater.element?.querySelector(`[data-item-index="${index}"]`);
+    if (element) {
+      return element;
+    }
+  }
 };
 export default class MasterDetailPage extends ContentPage {
-    constructor() {
-        super(...arguments);
-        this.showClose = true;
-        this.scrollEveryNewTarget = false;
-        this.lookupItemForHighlight = true;
-        this.highlightAttributeValue = ["data-filter", "drop-shadow-accent"];
-    }
-    get highlightAttribute() {
-        return this.highlightAttributeValue;
-    }
-    set highlightAttribute(value) {
-        if (!value) {
-            this.highlightAttributeValue = ["data-filter", "drop-shadow-accent"];
-            return;
-        }
-        if (typeof value === "string") {
-            const tokens = value.split("=");
-            let key = tokens[0];
-            let v = tokens[1] ?? "true";
-            if (v.endsWith("]")) {
-                v = v.substring(0, v.length - 1);
-            }
-            if (key.startsWith("[")) {
-                key = key.substring(1);
-            }
-            value = [key, v];
-        }
-        this.highlightAttributeValue = value;
+  constructor() {
+    super(...arguments);
+    this.showClose = true;
+    this.scrollEveryNewTarget = false;
+    this.lookupItemForHighlight = true;
+    this.highlightAttributeValue = ["data-filter", "drop-shadow-accent"];
+  }
+  get highlightAttribute() {
+    return this.highlightAttributeValue;
+  }
+  set highlightAttribute(value) {
+    if (!value) {
+      this.highlightAttributeValue = ["data-filter", "drop-shadow-accent"];
+      return;
     }
-    openDetail(page, parameters, highlightElementOrItem) {
-        if (isMobileView) {
-            PageNavigator.pushPage(page, parameters);
-            return;
-        }
-        const content = this.element.querySelector(`[data-page-element="content"]`);
-        content.setAttribute("data-mode", "desktop");
-        this.element.setAttribute("data-is-open", "true");
-        let highlightElement;
-        if (highlightElementOrItem instanceof HTMLElement) {
-            highlightElement = highlightElementOrItem;
-        }
-        if (!highlightElement && this.lookupItemForHighlight) {
-            highlightElement = findItem(content, highlightElementOrItem);
-        }
-        const lastTargetElement = this.lastTargetElement;
-        if (lastTargetElement) {
-            const [key] = this.highlightAttributeValue;
-            lastTargetElement.removeAttribute(key);
-        }
-        this.lastTargetElement = highlightElement;
-        if (!this.closeButton && this.showClose) {
-            const closeButton = document.createElement("i");
-            closeButton.setAttribute("data-element", "close");
-            closeButton.className = "fas fa-times-circle";
-            this.closeButton = closeButton;
-            this.element.appendChild(closeButton);
-            closeButton.addEventListener("click", () => this.closeDetail());
-        }
-        let lastDetail = this.lastDetail;
-        if (lastDetail) {
-            const { element } = lastDetail;
-            lastDetail.dispose();
-            this.lastDetail = null;
-            element.remove();
-            if (this.scrollEveryNewTarget) {
-                this.scrollTargetIntoView();
-            }
-        }
-        else {
-            this.scrollTargetIntoView();
-        }
-        this.updateTargetSelector(highlightElement);
-        const P = page;
-        lastDetail = new P(this.app);
-        this.element.appendChild(lastDetail.element);
-        lastDetail.element.setAttribute("data-element", "detail");
-        this.lastDetail = lastDetail;
-        lastDetail.parameters = parameters;
-        const close = () => this.closeDetail();
-        lastDetail.cancel = close;
-        lastDetail.close = close;
-        this.app.runAsync(() => this.lastDetail?.init?.());
-    }
-    scrollTargetIntoView(dispose = false) {
-        const lastTargetElement = this.lastTargetElement;
-        if (lastTargetElement) {
-            setTimeout(() => {
-                if (lastTargetElement.isConnected) {
-                    lastTargetElement.scrollIntoView();
-                }
-                if (dispose) {
-                    this.lastTargetElement = void 0;
-                    this.updateTargetSelector(lastTargetElement, true, dispose);
-                }
-            }, 100);
-        }
+    if (typeof value === "string") {
+      const tokens = value.split("=");
+      let key = tokens[0];
+      let v = tokens[1] ?? "true";
+      if (v.endsWith("]")) {
+        v = v.substring(0, v.length - 1);
+      }
+      if (key.startsWith("[")) {
+        key = key.substring(1);
+      }
+      value = [key, v];
     }
-    updateTargetSelector(lastTargetElement, remove = false, delay = false) {
-        if (!lastTargetElement) {
-            return;
-        }
-        const [key, value] = this.highlightAttributeValue;
-        if (remove) {
-            if (delay) {
-                setTimeout(() => {
-                    lastTargetElement.removeAttribute(key);
-                }, 1000);
-            }
-            else {
-                lastTargetElement.removeAttribute(key);
-            }
-            return;
-        }
-        lastTargetElement.setAttribute(key, value);
+    this.highlightAttributeValue = value;
+  }
+  openDetail(page, parameters, highlightElementOrItem) {
+    if (isMobileView) {
+      PageNavigator.pushPage(page, parameters);
+      return;
     }
-    preCreate() {
-        super.preCreate();
-        if (!isMobileView) {
-            this.element.setAttribute("data-mode", "desktop");
-        }
-        this.element.setAttribute("data-page-type", "master-detail");
-    }
-    closeDetail() {
-        const lastDetail = this.lastDetail;
-        if (lastDetail) {
-            const { element } = lastDetail;
-            lastDetail.dispose();
-            element.remove();
-            this.lastDetail = void 0;
-        }
-        const closeButton = this.closeButton;
-        if (closeButton) {
-            closeButton.remove();
-            this.closeButton = void 0;
-        }
-        const content = this.element.querySelector(`[data-page-element="content"]`);
-        content.removeAttribute("data-mode");
-        this.element.removeAttribute("data-is-open");
-        this.scrollTargetIntoView(true);
+    const content = this.element.querySelector(`[data-page-element="content"]`);
+    content.setAttribute("data-mode", "desktop");
+    this.element.setAttribute("data-is-open", "true");
+    let highlightElement;
+    if (highlightElementOrItem instanceof HTMLElement) {
+      highlightElement = highlightElementOrItem;
+    }
+    if (!highlightElement && this.lookupItemForHighlight) {
+      highlightElement = findItem(content, highlightElementOrItem);
+    }
+    const lastTargetElement = this.lastTargetElement;
+    if (lastTargetElement) {
+      const [key] = this.highlightAttributeValue;
+      lastTargetElement.removeAttribute(key);
+    }
+    this.lastTargetElement = highlightElement;
+    if (!this.closeButton && this.showClose) {
+      const closeButton = document.createElement("i");
+      closeButton.setAttribute("data-element", "close");
+      closeButton.className = "fas fa-times-circle";
+      this.closeButton = closeButton;
+      this.element.appendChild(closeButton);
+      closeButton.addEventListener("click", () => this.closeDetail());
+    }
+    let lastDetail = this.lastDetail;
+    if (lastDetail) {
+      const {
+        element
+      } = lastDetail;
+      lastDetail.dispose();
+      this.lastDetail = null;
+      element.remove();
+      if (this.scrollEveryNewTarget) {
+        this.scrollTargetIntoView();
+      }
+    } else {
+      this.scrollTargetIntoView();
+    }
+    this.updateTargetSelector(highlightElement);
+    const P = page;
+    lastDetail = new P(this.app);
+    this.element.appendChild(lastDetail.element);
+    lastDetail.element.setAttribute("data-element", "detail");
+    this.lastDetail = lastDetail;
+    lastDetail.parameters = parameters;
+    const close = () => this.closeDetail();
+    lastDetail.cancel = close;
+    lastDetail.close = close;
+    this.app.runAsync(() => this.lastDetail?.init?.());
+  }
+  scrollTargetIntoView(dispose = false) {
+    const lastTargetElement = this.lastTargetElement;
+    if (lastTargetElement) {
+      setTimeout(() => {
+        if (lastTargetElement.isConnected) {
+          lastTargetElement.scrollIntoView();
+        }
+        if (dispose) {
+          this.lastTargetElement = void 0;
+          this.updateTargetSelector(lastTargetElement, true, dispose);
+        }
+      }, 100);
+    }
+  }
+  updateTargetSelector(lastTargetElement, remove = false, delay = false) {
+    if (!lastTargetElement) {
+      return;
+    }
+    const [key, value] = this.highlightAttributeValue;
+    if (remove) {
+      if (delay) {
+        setTimeout(() => {
+          lastTargetElement.removeAttribute(key);
+        }, 1000);
+      } else {
+        lastTargetElement.removeAttribute(key);
+      }
+      return;
+    }
+    lastTargetElement.setAttribute(key, value);
+  }
+  preCreate() {
+    super.preCreate();
+    if (!isMobileView) {
+      this.element.setAttribute("data-mode", "desktop");
+    }
+    this.element.setAttribute("data-page-type", "master-detail");
+  }
+  closeDetail() {
+    const lastDetail = this.lastDetail;
+    if (lastDetail) {
+      const {
+        element
+      } = lastDetail;
+      lastDetail.dispose();
+      element.remove();
+      this.lastDetail = void 0;
+    }
+    const closeButton = this.closeButton;
+    if (closeButton) {
+      closeButton.remove();
+      this.closeButton = void 0;
     }
-}
-//# sourceMappingURL=MasterDetailPage.js.map
+    const content = this.element.querySelector(`[data-page-element="content"]`);
+    content.removeAttribute("data-mode");
+    this.element.removeAttribute("data-is-open");
+    this.scrollTargetIntoView(true);
+  }
+}