@web-atoms/core 2.2.50 → 2.2.52

package/dist/web/services/PopupWindow.js

@@ -0,0 +1,378 @@
+System.register(["tslib", "../../core/Bind", "../../core/BindableProperty", "../../core/XNode", "../../core/sleep", "../../style/styled", "../controls/AtomControl", "../core/AtomUI"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, Bind, BindableProperty, XNode, sleep, styled, AtomControl, ChildEnumerator, PopupWindow, ConfirmPopup, popupService, loadPopupService;
+  _export({
+    default: void 0,
+    ConfirmPopup: void 0
+  });
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_coreBind) {
+      Bind = _coreBind.default;
+    }, function (_coreBindableProperty) {
+      BindableProperty = _coreBindableProperty.BindableProperty;
+    }, function (_coreXNode) {
+      XNode = _coreXNode.default;
+    }, function (_coreSleep) {
+      sleep = _coreSleep.default;
+    }, function (_styleStyled) {
+      styled = _styleStyled.default;
+    }, function (_controlsAtomControl) {
+      AtomControl = _controlsAtomControl.AtomControl;
+    }, function (_coreAtomUI) {
+      ChildEnumerator = _coreAtomUI.ChildEnumerator;
+    }],
+    execute: function () {
+      loadPopupService = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (popupService) {
+          return popupService;
+        }
+        return popupService = (yield _context.import("./PopupService")).default;
+      });
+      styled.css`
+        position: absolute;
+        border: solid 1px lightgray;
+        border-radius: 5px;
+        background-color: white;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 0 0 20px 1px rgba(0 0 0 / 75%);
+
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        grid-template-rows: auto auto 1fr auto;
+        grid-template-columns: auto 1fr auto;
+        opacity: 0;
+        transition: opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32) ;
+
+        &[data-ready=true] {
+            opacity: 1;
+        }
+        &[data-dragging=true] {
+            opacity: 0.5;
+        }
+        & > [data-window-element=icon] {
+            grid-row: 1;
+            grid-column: 1;
+        }
+        & > [data-window-element=title] {
+            grid-row: 1;
+            grid-column: 2;
+            font-size: medium;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            cursor: move;
+            padding: var(--spacing, 5px);
+        }
+        & > [data-window-element=close-button] {
+            grid-row: 1;
+            grid-column: 3;
+        }
+        & > [data-window-element=action-bar] {
+            grid-row: 1;
+            grid-column: 1 / span 3;
+            align-self: stretch;
+            justify-self: stretch;
+            background-color: var(--accent-color, rgba(211, 211, 211, 0.2))
+        }
+        & > [data-window-element=header] {
+            margin-top: 5px;
+            grid-row: 2;
+            grid-column: 1 / span 3;
+        }
+        & > [data-window-element=content] {
+            margin-top: 5px;
+            grid-row: 3;
+            grid-column: 1 / span 3;
+            position: relative;
+        }
+        & > [data-window-element=footer] {
+            margin-top: 5px;
+            grid-row: 3;
+            grid-column: 1 / span 3;
+            margin-bottom: 5px;
+        }
+
+    `.installGlobal("[data-popup-window=popup=window]");
+      _export("default", PopupWindow = class PopupWindow extends AtomControl {
+        static showWindow(window, options) {
+          return __awaiter(this, arguments, void 0, function* () {
+            if (arguments.length <= 1) {
+              options = arguments[0];
+              window = this;
+            }
+            yield sleep(1);
+            const PS = yield loadPopupService();
+            return PS.showWindow(PS.lastTarget, window, options);
+          });
+        }
+        static showModal(window, options) {
+          var _a;
+          return __awaiter(this, arguments, void 0, function* () {
+            if (arguments.length <= 1) {
+              options = arguments[0];
+              window = this;
+            }
+            options !== null && options !== void 0 ? options : options = {};
+            (_a = options.modal) !== null && _a !== void 0 ? _a : options.modal = true;
+            yield sleep(1);
+            const PS = yield loadPopupService();
+            return PS.showWindow(PS.lastTarget, window, options);
+          });
+        }
+        onPropertyChanged(name) {
+          super.onPropertyChanged(name);
+          switch (name) {
+            case "iconRenderer":
+              this.recreate(name, "icon");
+              break;
+            case "actionBarRenderer":
+              this.recreate(name, "action-bar");
+              break;
+            case "footerRenderer":
+              this.recreate(name, "footer");
+              break;
+            case "titleRenderer":
+              this.recreate(name, "title");
+              break;
+            case "headerRenderer":
+              this.recreate(name, "header");
+              break;
+          }
+        }
+        init() {}
+        requestCancel() {
+          return __awaiter(this, void 0, void 0, function* () {
+            if (this.closeWarning) {
+              if (!(yield ConfirmPopup.confirm({
+                message: this.closeWarning
+              }))) {
+                return;
+              }
+            }
+            this.cancel();
+          });
+        }
+        recreate(renderer, name) {
+          var _a, _b, _c;
+          const node = (_b = (_a = this[renderer]) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : undefined;
+          for (const e of ChildEnumerator.enumerate(this.element)) {
+            if (e.dataset.pageElement === name) {
+              this.dispose(e);
+              e.remove();
+              break;
+            }
+          }
+          if (node) {
+            const na = (_c = node.attributes) !== null && _c !== void 0 ? _c : node.attributes = {};
+            na["data-window-element"] = name;
+            super.render(XNode.create("div", null, node));
+            return this.element.querySelector(`[data-window-element="${name}"]`);
+          }
+          return null;
+        }
+        preCreate() {
+          this.title = null;
+          this.viewModelTitle = null;
+          const handler = e => {
+            if (e.key === "Escape") {
+              this.app.runAsync(() => this.requestCancel());
+              e.preventDefault();
+              return;
+            }
+          };
+          this.bindEvent(this.element, "keydown", handler);
+          this.element.dataset.popupWindow = "popup-window";
+          this.runAfterInit(() => this.app.runAsync(() => this.init()));
+          setTimeout(p => {
+            p.dataset.ready = "true";
+          }, 10, this.element);
+        }
+        render(node, e, creator) {
+          var _a, _b, _c, _d, _e;
+          this.render = super.render;
+          const titleContent = (_b = (_a = this.titleRenderer) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : XNode.create("span", {
+            class: "title-text",
+            text: Bind.oneWay(() => this.title || this.viewModelTitle)
+          });
+          const closeButton = (_d = (_c = this.closeButtonRenderer) === null || _c === void 0 ? void 0 : _c.call(this)) !== null && _d !== void 0 ? _d : XNode.create("button", {
+            class: "popup-close-button",
+            text: "x",
+            eventClick: Bind.event(() => this.requestCancel())
+          });
+          const a = (_e = node.attributes) !== null && _e !== void 0 ? _e : node.attributes = {};
+          a["data-window-content"] = "window-content";
+          a["data-window-element"] = "content";
+          titleContent["data-window-element"] = "title";
+          closeButton["data-window-element"] = "close";
+          const extracted = this.extractControlProperties(node);
+          super.render(XNode.create("div", Object.assign({
+            viewModelTitle: Bind.oneWay(() => this.viewModel.title)
+          }, extracted), XNode.create("div", {
+            "data-window-element": "action-bar"
+          }), titleContent, closeButton, node));
+          this.runAfterInit(() => {
+            if (!this.element) {
+              return;
+            }
+            const host = this.element.getElementsByClassName("title-host")[0];
+            this.setupDragging(host);
+            const anyAutofocus = this.element.querySelector(`*[autofocus]`);
+            if (!anyAutofocus) {
+              const windowContent = this.element.querySelector("[data-window-content]");
+              if (windowContent) {
+                const firstInput = windowContent.querySelector("input,button,a");
+                if (firstInput) {
+                  firstInput.focus();
+                  return;
+                }
+              }
+              const cb = this.element.querySelector(".popup-close-button");
+              if (cb) {
+                cb.focus();
+              }
+              return;
+            }
+          });
+        }
+        setupDragging(tp) {
+          this.bindEvent(tp, "mousedown", startEvent => {
+            if (startEvent.target.tagName === "BUTTON") {
+              return;
+            }
+            startEvent.preventDefault();
+            const disposables = [];
+            const element = this.element;
+            const offset = {
+              x: element.offsetLeft,
+              y: element.offsetTop
+            };
+            if (element.style.transform !== "none") {
+              offset.x -= element.offsetWidth / 2;
+              offset.y -= element.offsetHeight / 2;
+              element.style.left = offset.x + "px";
+              element.style.top = offset.y + "px";
+              element.style.transform = "none";
+            }
+            this.element.dataset.dragging = "true";
+            const rect = {
+              x: startEvent.clientX,
+              y: startEvent.clientY
+            };
+            const cursor = tp.style.cursor;
+            tp.style.cursor = "move";
+            disposables.push(this.bindEvent(document.body, "mousemove", moveEvent => {
+              const {
+                clientX,
+                clientY
+              } = moveEvent;
+              const dx = clientX - rect.x;
+              const dy = clientY - rect.y;
+              const finalX = offset.x + dx;
+              const finalY = offset.y + dy;
+              if (finalX < 5 || finalY < 5) {
+                return;
+              }
+              offset.x = finalX;
+              offset.y = finalY;
+              this.element.style.left = offset.x + "px";
+              this.element.style.top = offset.y + "px";
+              rect.x = clientX;
+              rect.y = clientY;
+            }));
+            disposables.push(this.bindEvent(document.body, "mouseup", endEvent => {
+              tp.style.cursor = cursor;
+              this.element.removeAttribute("data-dragging");
+              for (const iterator of disposables) {
+                iterator.dispose();
+              }
+            }));
+          });
+        }
+      });
+      __decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "title", void 0);
+      __decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "closeWarning", void 0);
+      delete PopupWindow.prototype.init;
+      styled.css`
+        & > .buttons[data-window-element=footer] > button{
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-width: 1px;
+            border-color: transparent;
+            margin: 5px;
+            margin-right: 5px;
+        }
+        & > .buttons > .yes {
+            background-color: lightgreen;
+            color: white;
+        }
+        & > .buttons > .no {
+            background-color: red;
+            color: white;
+        }
+        & > .buttons > .cancel {
+            background-color: gray;
+            color: white;
+        }
+    `.installGlobal("[data-confirm-popup=confirm-popup]");
+      _export("ConfirmPopup", ConfirmPopup = class ConfirmPopup extends PopupWindow {
+        static confirm({
+          message,
+          title = "Confirm",
+          yesLabel = "Yes",
+          noLabel = "No",
+          cancelLabel = null
+        }) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const PS = yield loadPopupService();
+            return PS.confirm({
+              title,
+              message,
+              yesLabel,
+              noLabel,
+              cancelLabel
+            });
+          });
+        }
+        preCreate() {
+          super.preCreate();
+          this.yesLabel = "Yes";
+          this.noLabel = "No";
+          this.cancelLabel = null;
+          this.element.dataset.confirmPopup = "confirm-popup";
+          this.footerRenderer = () => XNode.create("div", null, XNode.create("button", {
+            class: "yes",
+            autofocus: true,
+            text: Bind.oneWay(() => this.yesLabel),
+            eventClick: () => this.close(true),
+            "style-display": Bind.oneWay(() => !!this.yesLabel)
+          }), XNode.create("button", {
+            class: "no",
+            text: Bind.oneWay(() => this.noLabel),
+            eventClick: () => this.close(false),
+            "style-display": Bind.oneWay(() => !!this.noLabel)
+          }), XNode.create("button", {
+            class: "cancel",
+            text: Bind.oneWay(() => this.cancelLabel),
+            eventClick: () => this.requestCancel(),
+            "style-display": Bind.oneWay(() => !!this.cancelLabel)
+          }));
+          this.closeButtonRenderer = () => XNode.create("div", null);
+        }
+        requestCancel() {
+          this.cancel();
+          return Promise.resolve();
+        }
+      });
+    }
+  };
+});
+//# sourceMappingURL=PopupWindow.js.map

package/dist/web/services/PopupWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PopupWindow","ConfirmPopup","popupService","loadPopupService","_export","default","setters","_tslib","Bind","_coreBind","_coreBindableProperty","BindableProperty","_coreXNode","XNode","_coreSleep","sleep","_styleStyled","styled","_controlsAtomControl","AtomControl","_coreAtomUI","ChildEnumerator","execute","__awaiter","_context","import","css","installGlobal","showWindow","window","options","arguments","length","PS","lastTarget","showModal","_a","modal","onPropertyChanged","name","recreate","init","requestCancel","closeWarning","confirm","message","cancel","renderer","node","_b","call","undefined","e","enumerate","element","dataset","pageElement","dispose","remove","na","_c","attributes","render","create","querySelector","preCreate","title","viewModelTitle","handler","key","app","runAsync","preventDefault","bindEvent","popupWindow","runAfterInit","setTimeout","p","ready","creator","titleContent","titleRenderer","class","text","oneWay","closeButton","_d","closeButtonRenderer","eventClick","event","a","_e","extracted","extractControlProperties","Object","assign","viewModel","host","getElementsByClassName","setupDragging","anyAutofocus","windowContent","firstInput","focus","cb","tp","startEvent","target","tagName","disposables","offset","x","offsetLeft","y","offsetTop","style","transform","offsetWidth","offsetHeight","left","top","dragging","rect","clientX","clientY","cursor","push","document","body","moveEvent","dx","dy","finalX","finalY","endEvent","removeAttribute","iterator","__decorate","prototype","yesLabel","noLabel","cancelLabel","confirmPopup","footerRenderer","autofocus","close","Promise","resolve"],"sources":["../../../src/web/services/PopupWindow.tsx"],"sourcesContent":[null],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/core",
-  "version": "2.2.50",
+  "version": "2.2.52",
   "description": "Web Atoms Core",
   "main": "index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/neurospeech/web-atoms-core#readme",
   "devDependencies": {
-    "@web-atoms/module-loader": "^2.0.6",
+    "@web-atoms/module-loader": "^2.1.18",
     "@web-atoms/ts-to-systemjs": "^1.1.7",
     "@web-atoms/unit-test": "^1.0.32",
     "colors": "^1.4.0",

package/src/style/styled.ts

@@ -105,6 +105,7 @@ class StyleFragment {
         const style = document.createElement("style");
         style.textContent = this.expand(selector);
         document.head.appendChild(style);
+        style.id = selector;
     }
 
     installLocal() {