@web-atoms/web-controls 2.6.4 → 2.6.6

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);
+  }
+}

package/dist-esm/mobile-app/MobileApp.global.css

@@ -0,0 +1,2 @@
+[data-page-app=page-app]{left:0;right:0;top:0}[data-page-app=page-app]>[data-container]{bottom:0;left:0;top:0;transition:left .3s ease-out;width:100%}@media screen{[data-page-app=page-app],[data-page-app=page-app]>[data-container]{overflow:hidden;position:absolute}}[data-page-app=page-app][data-drawer=visible]>[data-container]{left:80%}[data-page-app=page-app][data-drawer=visible]>[data-drawer-page]{left:0}[data-page-app=page-app] [data-drawer-page=drawer-page]{height:100%;left:-80%;overflow:hidden;position:absolute;top:0;transition:left .3s ease-out;width:80%}[data-base-page=base-page]{contain:content;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:40px auto 1fr auto;height:100%;left:0;top:0;transform:translate(100%);transition:transform .3s ease-out;width:100%}@media screen{[data-base-page=base-page]{overflow:hidden;position:absolute}}[data-base-page=base-page]>[data-icon-button=icon-button]{padding:5px}[data-base-page=base-page]>[data-page-element=action-bar]{background-color:var(--accent-color,#d3d3d3);grid-column-end:span 3;grid-column-start:1;grid-row-start:1;z-index:11}[data-base-page=base-page]>[data-page-element=icon]{align-self:center;color:var(--accent-text-color,#000);font-size:20px;grid-column-start:1;grid-row-start:1;justify-self:center;padding:10px;text-align:center;width:40px;z-index:14}[data-base-page=base-page]>[data-page-element=title]{align-self:center;color:var(--accent-text-color,#000);font-size:20px;grid-column-start:2;grid-row-start:1;justify-self:stretch;padding:5px;z-index:14}[data-base-page=base-page]>[data-page-element=action]{color:var(--accent-text-color,#000);font-size:20px;grid-column-start:3;grid-row-start:1;min-width:40px;padding:10px;z-index:14}[data-base-page=base-page]>[data-page-element=action] button{background:transparent;border:none;font-size:inherit;outline:none;width:30px}[data-base-page=base-page]>button[data-page-element=action]{background:transparent;border:none;min-width:40px;outline:none}[data-base-page=base-page]>[data-page-element=header]{background-color:#c0c0c030;grid-column-end:span 3;grid-column-start:1;grid-row-start:2;padding:5px;z-index:12}[data-base-page=base-page]>[data-page-element=pull-to-refresh]{align-self:start;grid-column-end:span 3;grid-column-start:1;grid-row-start:3;justify-self:center;margin:10px;padding:5px;z-index:9}[data-base-page=base-page]>[data-page-element=pull-to-refresh] .pull-icon{transition:all .3s ease-out}[data-base-page=base-page]>[data-page-element=pull-to-refresh][data-mode=up] .pull-icon{transform:rotate(180deg)}[data-base-page=base-page]>[data-page-element=pull-to-refresh]:not([data-mode=down]) .down,[data-base-page=base-page]>[data-page-element=pull-to-refresh]:not([data-mode=loading]) .loading,[data-base-page=base-page]>[data-page-element=pull-to-refresh]:not([data-mode=up]) .up,[data-base-page=base-page]>[data-page-element=pull-to-refresh][data-mode=loading] .pull-icon{display:none}[data-base-page=base-page]>[data-page-element=content]{grid-column-end:span 3;grid-column-start:1;grid-row-start:3;overflow-x:hidden;overflow-y:auto;padding:5px;position:relative;scrollbar-color:var(--accent-color,orange) transparent;scrollbar-width:5px;z-index:10}[data-base-page=base-page]>[data-page-element=content]::-webkit-scrollbar{width:5px}[data-base-page=base-page]>[data-page-element=content]::-webkit-scrollbar-thumb{background-color:#fff;border:3px solid var(--accent-color,orange);border-radius:20px}[data-base-page=base-page]>[data-page-element=footer]{grid-column-end:span 3;grid-column-start:1;grid-row-start:4;padding:5px;z-index:11}[data-base-page=base-page][data-page-state=ready]{transform:translate(0)}[data-base-page=base-page][data-page-state=hidden]{transform:translate(-100%)}[data-base-page=base-page][data-page-removed]{display:none;z-index:-1000}[data-base-page=base-page][data-hide-drawer=true] [data-drwaer-page],[data-base-page=base-page][data-hide-drawer=true] drawer-menu,[data-base-page=base-page][data-hide-toolbar=true] [data-page-element=status-bar],[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=action-bar],[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=action],[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=icon],[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=title]{display:none}[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=header]{grid-row:1}[data-base-page=base-page][data-hide-toolbar=true]>[data-page-element=content]{grid-row:2/span 3}@media screen{body{overflow:hidden}body>[data-page-app=page-app]{height:100vh}}@supports (height:100dvh){body>[data-page-app=page-app]{height:100dvh}}
+/*# sourceMappingURL=MobileApp.global.css.map */

package/dist-esm/mobile-app/MobileApp.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile-app/MobileApp.global.css"],"names":[],"mappings":"AAAA,yBAEI,MAAS,CACT,OAAU,CAFV,KA6CJ,CAzCI,0CAII,QAAW,CAFX,MAAS,CADT,KAAQ,CAIR,4BAA8B,CAF9B,UAGJ,CAEA,cAKQ,mEAEI,eAAgB,CADhB,iBAEJ,CAER,CAII,+DACI,QACJ,CAEA,iEACI,MACJ,CAGJ,wDAKI,WAAY,CAFZ,SAAU,CAGV,eAAgB,CALhB,iBAAkB,CAClB,KAAQ,CAKR,4BAA8B,CAH9B,SAIJ,CAKJ,2BAKI,eAAgB,CAEhB,YAAa,CAEb,mCAAoC,CADpC,qCAAsC,CAJtC,WAAY,CAFZ,MAAS,CADT,KAAQ,CASR,yBAA4B,CAJ5B,iCAAmC,CAHnC,UA0MJ,CAjMI,cACI,2BAEI,eAAgB,CADhB,iBAEJ,CACJ,CAEA,0DACI,WACJ,CAEA,0DAKI,4CAAgD,CADhD,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CADjB,UAKJ,CAEA,oDAKI,iBAAkB,CAIlB,mCAAsC,CARtC,cAAe,CAOf,mBAAoB,CADpB,gBAAiB,CADjB,mBAAoB,CAHpB,YAAa,CACb,iBAAkB,CAMlB,UAAW,CARX,UASJ,CAEA,qDAII,iBAAkB,CAIlB,mCAAsC,CAPtC,cAAe,CAMf,mBAAoB,CADpB,gBAAiB,CADjB,oBAAqB,CAFrB,WAAY,CADZ,UAOJ,CAEA,sDAOI,mCAAsC,CANtC,cAAe,CAIf,mBAAoB,CADpB,gBAAiB,CAEjB,cAAe,CAHf,YAAa,CADb,UAcJ,CAPI,6DAII,sBAAuB,CAFvB,WAAY,CAGZ,iBAAkB,CAFlB,YAAa,CAFb,UAKJ,CAGJ,4DAII,sBAAuB,CAFvB,WAAY,CADZ,cAAe,CAEf,YAEJ,CAEA,sDAMI,0BAA2B,CAD3B,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CADjB,WAAY,CADZ,UAMJ,CAEA,+DAOI,gBAAiB,CAJjB,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CAOjB,mBAAoB,CAHpB,WAAY,CADZ,WAAY,CAEZ,SA2BJ,CAvBI,0EACI,2BACJ,CAEA,wFACI,wBACJ,CAcA,gXACI,YACJ,CAGJ,uDAGI,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CAKjB,iBAAkB,CAClB,eAAgB,CAHhB,WAAY,CACZ,iBAAkB,CAKlB,sDAAyD,CADzD,mBAAoB,CADpB,UAcJ,CAVI,0EACI,SACJ,CAEA,gFACI,qBAAuB,CAEvB,2CAA8C,CAD9C,kBAEJ,CAIJ,sDAGI,sBAAuB,CADvB,mBAAoB,CADpB,gBAAiB,CAIjB,WAAY,CADZ,UAEJ,CAEA,kDACI,sBACJ,CAEA,mDACI,0BACJ,CAEA,8CACI,YAAa,CACb,aACJ,CA0BI,8gBACI,YACJ,CAEA,8EACI,UACJ,CAEA,+EACI,iBACJ,CAIR,cACI,KACI,eAKJ,CAJI,8BACI,YAEJ,CAER,CAEA,0BAEQ,8BACI,aACJ,CAER","file":"MobileApp.global.css"}