@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/basic/InlinePopup.js

@@ -1,299 +1,328 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+System.register(["@web-atoms/core/dist/core/AtomDisposableList", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var AtomDisposableList, Colors, sleep, XNode, StyleRule, AtomControl, ElementValueSetters, CSS, InlinePopup, __awaiter, __rest;
+  function closeHandler(opener, container, close) {
+    let handler = null;
+    const body = document.body;
+    handler = e => {
+      var _a;
+      let start = e.target;
+      if (e.defaultPrevented) {
+        return;
+      }
+      while (start) {
+        if (start === body) {
+          break;
+        }
+        if (start === opener) {
+          return;
+        }
+        if (start === container) {
+          return;
         }
-    return t;
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
+        start = start.parentElement;
+      }
+      close();
+      e.preventDefault();
+      (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    };
+    document.body.addEventListener("click", handler, true);
+    let ce = container;
+    const containNoneList = [];
+    while (ce) {
+      const isNotNone = window.getComputedStyle(ce).contain !== "none";
+      if (isNotNone) {
+        ce.setAttribute("data-force-contain", "none");
+        containNoneList.push(ce);
+      }
+      ce = ce.parentElement;
     }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@web-atoms/core/dist/core/AtomDisposableList", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    return () => {
+      document.body.removeEventListener("click", handler, true);
+      for (const iterator of containNoneList) {
+        iterator.removeAttribute("data-force-contain");
+      }
+    };
+  }
+  function InlinePopupButton(_a, ...popupNodes) {
+    var {
+        text,
+        label,
+        icon,
+        hasBorder = false,
+        nodes = [],
+        defaultOnClick = "close",
+        anchorRight = false,
+        popup
+      } = _a,
+      a = __rest(_a, ["text", "label", "icon", "hasBorder", "nodes", "defaultOnClick", "anchorRight", "popup"]);
+    if (popup) {
+      return XNode.create("button", Object.assign({
+        "data-popup-class": popup,
+        "data-has-border": !!hasBorder,
+        "data-inline-popup-button": "inline-popup-button",
+        "data-alignment": anchorRight ? "bottomRight" : "bottomLeft"
+      }, a), icon && XNode.create("i", {
+        class: icon
+      }), text && XNode.create("span", {
+        text: text
+      }), label && XNode.create("label", {
+        text: text
+      }), ...nodes);
     }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.InlinePopupButton = void 0;
-    const AtomDisposableList_1 = require("@web-atoms/core/dist/core/AtomDisposableList");
-    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
-    const sleep_1 = require("@web-atoms/core/dist/core/sleep");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .position("absolute")
-        .borderRadius(5)
-        .padding(5)
-        .border("solid 1px lightgray")
-        .defaultBoxShadow()
-        .zIndex(5000)
-        .backgroundColor("var(--primary-bg, white)")
-        .color("var(--primary-color, darkgray)")
-        .left(0), "*[data-inline-popup=inline-popup]");
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .right(0)
-        .left("unset"), "*[data-alignment=bottom-right] > [data-inline-popup=inline-popup]");
-    function closeHandler(opener, container, close) {
-        let handler = null;
-        const body = document.body;
-        handler = (e) => {
-            var _a;
-            let start = e.target;
-            if (e.defaultPrevented) {
-                return;
-            }
-            while (start) {
-                if (start === body) {
-                    break;
-                }
-                if (start === opener) {
-                    return;
-                }
-                if (start === container) {
-                    return;
-                }
-                start = start.parentElement;
+    let isOpen = false;
+    const done = () => isOpen = false;
+    const click = e => __awaiter(this, void 0, void 0, function* () {
+      if (isOpen || e.defaultPrevented) {
+        return;
+      }
+      const popupNode = popupNodes.length > 1 ? XNode.create("div", null, ...popupNodes) : popupNodes[0];
+      try {
+        isOpen = true;
+        yield InlinePopup.show(e.currentTarget, popupNode, {
+          defaultOnClick
+        });
+      } finally {
+        done();
+      }
+    });
+    return XNode.create("button", Object.assign({
+      "event-click": click,
+      "data-has-border": !!hasBorder,
+      "data-alignment": anchorRight ? "bottomRight" : "bottomLeft",
+      "data-inline-popup-button": "inline-popup-button"
+    }, a), icon && XNode.create("i", {
+      class: icon
+    }), text && XNode.create("span", {
+      text: text
+    }), label && XNode.create("label", {
+      text: text
+    }), ...nodes);
+  }
+  _export({
+    default: void 0,
+    InlinePopupButton: InlinePopupButton
+  });
+  return {
+    setters: [function (_webAtomsCoreDistCoreAtomDisposableList) {
+      AtomDisposableList = _webAtomsCoreDistCoreAtomDisposableList.AtomDisposableList;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreSleep) {
+      sleep = _webAtomsCoreDistCoreSleep.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+      ElementValueSetters = _webAtomsCoreDistWebControlsAtomControl.ElementValueSetters;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }],
+    execute: function () {
+      __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+        function adopt(value) {
+          return value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          });
+        }
+        return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) {
+            try {
+              step(generator.next(value));
+            } catch (e) {
+              reject(e);
             }
-            close();
-            e.preventDefault();
-            (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-        };
-        document.body.addEventListener("click", handler, true);
-        let ce = container;
-        const containNoneList = [];
-        while (ce) {
-            const isNotNone = window.getComputedStyle(ce).contain !== "none";
-            if (isNotNone) {
-                ce.setAttribute("data-force-contain", "none");
-                containNoneList.push(ce);
+          }
+          function rejected(value) {
+            try {
+              step(generator["throw"](value));
+            } catch (e) {
+              reject(e);
             }
-            ce = ce.parentElement;
+          }
+          function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+          }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+      };
+      __rest = void 0 && (void 0).__rest || function (s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
         }
-        return () => {
-            document.body.removeEventListener("click", handler, true);
-            for (const iterator of containNoneList) {
-                iterator.removeAttribute("data-force-contain");
-            }
-        };
-    }
-    class InlinePopup extends AtomControl_1.AtomControl {
+        return t;
+      };
+      CSS(StyleRule().position("absolute").borderRadius(5).padding(5).border("solid 1px lightgray").defaultBoxShadow().zIndex(5000).backgroundColor("var(--primary-bg, white)").color("var(--primary-color, darkgray)").left(0), "*[data-inline-popup=inline-popup]");
+      CSS(StyleRule().right(0).left("unset"), "*[data-alignment=bottom-right] > [data-inline-popup=inline-popup]");
+      _export("default", InlinePopup = class InlinePopup extends AtomControl {
         static show(target, node, options = {}) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function* () {
-                const targetElement = ((_a = target.element) !== null && _a !== void 0 ? _a : target);
-                const control = target.element ? target : AtomControl_1.AtomControl.from(target);
-                const targetStyle = window.getComputedStyle(targetElement);
-                if (!/fixed|absolute|relative/i.test(targetStyle.position)) {
-                    targetElement.style.position = "relative";
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function* () {
+            const targetElement = (_a = target.element) !== null && _a !== void 0 ? _a : target;
+            const control = target.element ? target : AtomControl.from(target);
+            const targetStyle = window.getComputedStyle(targetElement);
+            if (!/fixed|absolute|relative/i.test(targetStyle.position)) {
+              targetElement.style.position = "relative";
+            }
+            yield sleep(10);
+            const container = document.createElement("div");
+            container.setAttribute("data-inline-popup", "inline-popup");
+            const alignment = (_b = options.alignment) !== null && _b !== void 0 ? _b : "none";
+            switch (alignment) {
+              case "bottomLeft":
+                container.style.top = `${targetElement.offsetHeight}px`;
+                container.style.left = "0px";
+                break;
+              case "bottomRight":
+                container.style.top = `${targetElement.offsetHeight}px`;
+                container.style.right = "0px";
+                break;
+              case "topRight":
+                container.style.top = "0px";
+                container.style.left = `${targetElement.offsetWidth}px`;
+                break;
+              default:
+                container.style.top = `${targetElement.offsetHeight}px`;
+                break;
+            }
+            container._logicalParent = targetElement;
+            control.render(XNode.create("div", null, " ", node, " "), container, control);
+            targetElement.insertAdjacentElement("beforeend", container);
+            return yield new Promise((resolve, reject) => {
+              var _a;
+              const disposables = new AtomDisposableList();
+              let resolved = false;
+              const close = r => {
+                if (resolved) {
+                  return;
+                }
+                resolved = true;
+                resolve(r);
+                disposables.dispose();
+              };
+              const cancel = (r = "cancelled") => {
+                if (resolved) {
+                  return;
+                }
+                resolved = true;
+                reject(r);
+                disposables.dispose();
+              };
+              const firstChild = container.firstElementChild.atomControl;
+              if (firstChild instanceof InlinePopup) {
+                firstChild.cancel = cancel;
+                firstChild.close = close;
+              } else {
+                if (options.onClick === void 0) {
+                  options.onClick = options.defaultOnClick;
                 }
-                yield (0, sleep_1.default)(10);
-                const container = document.createElement("div");
-                container.setAttribute("data-inline-popup", "inline-popup");
-                const alignment = (_b = options.alignment) !== null && _b !== void 0 ? _b : "none";
-                switch (alignment) {
-                    case "bottomLeft":
-                        container.style.top = `${targetElement.offsetHeight}px`;
-                        container.style.left = "0px";
-                        break;
-                    case "bottomRight":
-                        container.style.top = `${targetElement.offsetHeight}px`;
-                        container.style.right = "0px";
-                        break;
-                    case "topRight":
-                        container.style.top = "0px";
-                        container.style.left = `${targetElement.offsetWidth}px`;
-                        break;
-                    default:
-                        container.style.top = `${targetElement.offsetHeight}px`;
-                        break;
+              }
+              const defaultClose = options.onClick === "close" ? close : cancel;
+              const observer = new MutationObserver(() => {
+                if (!container.isConnected) {
+                  defaultClose();
                 }
-                container._logicalParent = targetElement;
-                // @ts-ignore
-                control.render(XNode_1.default.create("div", null,
-                    " ",
-                    node,
-                    " "), container, control);
-                targetElement.insertAdjacentElement("beforeend", container);
-                return yield new Promise((resolve, reject) => {
-                    var _a;
-                    const disposables = new AtomDisposableList_1.AtomDisposableList();
-                    let resolved = false;
-                    const close = (r) => {
-                        if (resolved) {
-                            return;
-                        }
-                        resolved = true;
-                        resolve(r);
-                        disposables.dispose();
-                    };
-                    const cancel = (r = "cancelled") => {
-                        if (resolved) {
-                            return;
-                        }
-                        resolved = true;
-                        reject(r);
-                        disposables.dispose();
-                    };
-                    const firstChild = container.firstElementChild.atomControl;
-                    if (firstChild instanceof InlinePopup) {
-                        firstChild.cancel = cancel;
-                        firstChild.close = close;
-                    }
-                    else {
-                        if (options.onClick === void 0) {
-                            options.onClick = options.defaultOnClick;
-                        }
-                    }
-                    const defaultClose = options.onClick === "close" ? close : cancel;
-                    const observer = new MutationObserver(() => {
-                        if (!container.isConnected) {
-                            defaultClose();
-                        }
-                    });
-                    observer.observe(targetElement, { childList: true });
-                    disposables.add(() => {
-                        observer.disconnect();
-                        control.dispose(container);
-                        container.remove();
-                    });
-                    if (options.onClick) {
-                        disposables.add(control.bindEvent(container, "click", () => __awaiter(this, void 0, void 0, function* () {
-                            yield (0, sleep_1.default)(200);
-                            defaultClose();
-                        })));
-                    }
-                    (_a = options.cancelToken) === null || _a === void 0 ? void 0 : _a.registerForCancel(cancel);
-                    disposables.add(closeHandler(targetElement, container, defaultClose));
-                });
+              });
+              observer.observe(targetElement, {
+                childList: true
+              });
+              disposables.add(() => {
+                observer.disconnect();
+                control.dispose(container);
+                container.remove();
+              });
+              if (options.onClick) {
+                disposables.add(control.bindEvent(container, "click", () => __awaiter(this, void 0, void 0, function* () {
+                  yield sleep(200);
+                  defaultClose();
+                })));
+              }
+              (_a = options.cancelToken) === null || _a === void 0 ? void 0 : _a.registerForCancel(cancel);
+              disposables.add(closeHandler(targetElement, container, defaultClose));
             });
+          });
         }
         static showControl(target, options = {}) {
-            const node = XNode_1.default.create(this, {});
-            return this.show(target, node, options);
+          const node = XNode.create(this, {});
+          return this.show(target, node, options);
         }
         dispatchClickEvent(e, data) {
-            let start = this.element.parentElement;
-            while (start) {
-                const atomControl = AtomControl_1.AtomControl.from(start);
-                if (atomControl) {
-                    atomControl.dispatchClickEvent(e, data);
-                    return;
-                }
-                start = start.parentElement;
+          let start = this.element.parentElement;
+          while (start) {
+            const atomControl = AtomControl.from(start);
+            if (atomControl) {
+              atomControl.dispatchClickEvent(e, data);
+              return;
             }
-            super.dispatchClickEvent(e, data);
+            start = start.parentElement;
+          }
+          super.dispatchClickEvent(e, data);
         }
-    }
-    exports.default = InlinePopup;
-    (0, CSS_1.default)((0, StyleRule_1.default)()
-        .flexLayout({ alignItems: "center", inline: true, justifyContent: "center" })
-        .flexWrap("wrap")
-        .padding(3)
-        .paddingLeft(5)
-        .paddingRight(5)
-        .and((0, StyleRule_1.default)("[data-has-border=false]")
-        .border("none")
-        .backgroundColor(Colors_1.default.transparent)), "*[data-inline-popup-button=inline-popup-button]");
-    document.body.addEventListener("click", (e) => {
+      });
+      CSS(StyleRule().flexLayout({
+        alignItems: "center",
+        inline: true,
+        justifyContent: "center"
+      }).flexWrap("wrap").padding(3).paddingLeft(5).paddingRight(5).and(StyleRule("[data-has-border=false]").border("none").backgroundColor(Colors.transparent)), "*[data-inline-popup-button=inline-popup-button]");
+      document.body.addEventListener("click", e => {
         let start = e.target;
         let popupFactory;
         let alignment;
         while (start) {
-            popupFactory = start.popupFactory;
-            if (popupFactory) {
-                alignment = start.dataset.alignment;
-                // stop...
-                break;
-            }
-            start = start.parentElement;
+          popupFactory = start.popupFactory;
+          if (popupFactory) {
+            alignment = start.dataset.alignment;
+            break;
+          }
+          start = start.parentElement;
         }
         if (!start) {
-            return;
+          return;
         }
-        const control = AtomControl_1.AtomControl.from(start);
+        const control = AtomControl.from(start);
         const app = control.app;
         const target = start;
         const element = control.element;
         let itemIndex;
         let data;
         if (control.items && control.itemRenderer) {
-            // this is atom repeater
-            while (start && start !== element) {
-                itemIndex !== null && itemIndex !== void 0 ? itemIndex : (itemIndex = start.dataset.itemIndex);
-                if (itemIndex) {
-                    data = control.items[itemIndex];
-                    break;
-                }
-                start = start.parentElement;
+          while (start && start !== element) {
+            itemIndex !== null && itemIndex !== void 0 ? itemIndex : itemIndex = start.dataset.itemIndex;
+            if (itemIndex) {
+              data = control.items[itemIndex];
+              break;
             }
+            start = start.parentElement;
+          }
         }
         if (!data) {
-            data = new Proxy(target, {
-                get(t, p, receiver) {
-                    let s = target;
-                    while (s) {
-                        const v = s.dataset[p];
-                        if (v !== void 0) {
-                            return v;
-                        }
-                        s = s.parentElement;
-                    }
-                },
-            });
+          data = new Proxy(target, {
+            get(t, p, receiver) {
+              let s = target;
+              while (s) {
+                const v = s.dataset[p];
+                if (v !== void 0) {
+                  return v;
+                }
+                s = s.parentElement;
+              }
+            }
+          });
         }
         const node = popupFactory(data);
-        app.runAsync(() => InlinePopup.show(target, node, { alignment }));
-    });
-    AtomControl_1.ElementValueSetters["data-popup-class"] = (c, e, v) => {
+        app.runAsync(() => InlinePopup.show(target, node, {
+          alignment
+        }));
+      });
+      ElementValueSetters["data-popup-class"] = (c, e, v) => {
         e.popupFactory = v;
-    };
-    function InlinePopupButton(_a, ...popupNodes) {
-        var { text, label, icon, hasBorder = false, nodes = [], defaultOnClick = "close", anchorRight = false, popup } = _a, a = __rest(_a, ["text", "label", "icon", "hasBorder", "nodes", "defaultOnClick", "anchorRight", "popup"]);
-        if (popup) {
-            return XNode_1.default.create("button", Object.assign({ "data-popup-class": popup, "data-has-border": !!hasBorder, "data-inline-popup-button": "inline-popup-button", "data-alignment": anchorRight ? "bottomRight" : "bottomLeft" }, a),
-                icon && XNode_1.default.create("i", { class: icon }),
-                text && XNode_1.default.create("span", { text: text }),
-                label && XNode_1.default.create("label", { text: text }),
-                ...nodes);
-        }
-        let isOpen = false;
-        const done = () => isOpen = false;
-        const click = (e) => __awaiter(this, void 0, void 0, function* () {
-            if (isOpen || e.defaultPrevented) {
-                return;
-            }
-            const popupNode = popupNodes.length > 1 ? XNode_1.default.create("div", null, ...popupNodes) : popupNodes[0];
-            try {
-                isOpen = true;
-                yield InlinePopup.show(e.currentTarget, popupNode, { defaultOnClick });
-            }
-            finally {
-                done();
-            }
-        });
-        return XNode_1.default.create("button", Object.assign({ "event-click": click, "data-has-border": !!hasBorder, "data-alignment": anchorRight ? "bottomRight" : "bottomLeft", "data-inline-popup-button": "inline-popup-button" }, a),
-            icon && XNode_1.default.create("i", { class: icon }),
-            text && XNode_1.default.create("span", { text: text }),
-            label && XNode_1.default.create("label", { text: text }),
-            ...nodes);
+      };
     }
-    exports.InlinePopupButton = InlinePopupButton;
-});
+  };
+});
 //# sourceMappingURL=InlinePopup.js.map