@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/DateField.js

@@ -7,140 +7,162 @@ import DateTime from "@web-atoms/date-time/dist/DateTime.js";
 import Calendar from "./Calendar.js";
 import TimeEditor from "./TimeEditor.js";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan.js";
-import "./styles/date-field.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/date-field.global.css"));
 import AtomPopover from "./elements/AtomPopover.js";
 function hours() {
-    return [
-        { label: "01", value: 1 },
-        { label: "02", value: 2 },
-        { label: "03", value: 3 },
-        { label: "04", value: 4 },
-        { label: "05", value: 5 },
-        { label: "06", value: 6 },
-        { label: "07", value: 7 },
-        { label: "08", value: 8 },
-        { label: "09", value: 9 },
-        { label: "10", value: 10 },
-        { label: "11", value: 11 },
-        { label: "12", value: 12 },
-    ];
+  return [{
+    label: "01",
+    value: 1
+  }, {
+    label: "02",
+    value: 2
+  }, {
+    label: "03",
+    value: 3
+  }, {
+    label: "04",
+    value: 4
+  }, {
+    label: "05",
+    value: 5
+  }, {
+    label: "06",
+    value: 6
+  }, {
+    label: "07",
+    value: 7
+  }, {
+    label: "08",
+    value: 8
+  }, {
+    label: "09",
+    value: 9
+  }, {
+    label: "10",
+    value: 10
+  }, {
+    label: "11",
+    value: 11
+  }, {
+    label: "12",
+    value: 12
+  }];
 }
 function minutes() {
-    const items = [];
-    for (let index = 0; index < 10; index++) {
-        items.push({ label: "0" + index, value: index });
-    }
-    for (let index = 10; index < 60; index++) {
-        items.push({ label: index.toString(), value: index });
-    }
-    return items;
+  const items = [];
+  for (let index = 0; index < 10; index++) {
+    items.push({
+      label: "0" + index,
+      value: index
+    });
+  }
+  for (let index = 10; index < 60; index++) {
+    items.push({
+      label: index.toString(),
+      value: index
+    });
+  }
+  return items;
 }
 export default class DateField extends AtomControl {
-    constructor(app, e = document.createElement("button")) {
-        super(app, e);
-    }
-    preCreate() {
-        this.prompt = "Select";
-        this.enableTime = false;
-        this.value = null;
-        this.format = (d, showTime) => showTime
-            ? d?.toLocaleString(navigator.language, {
-                month: "short",
-                year: "numeric",
-                day: "numeric",
-                weekday: "short",
-                hour12: true,
-                hour: "numeric",
-                minute: "2-digit"
-            })
-            : d?.toLocaleDateString(navigator.language, {
-                month: "short",
-                year: "numeric",
-                day: "numeric",
-                weekday: "short"
-            });
-        const owner = this;
-        class CalendarPopup extends AtomPopover {
-            init() {
-                this.owner = owner;
-                this.type = "AM";
-                const now = DateTime.from(owner.value ?? DateTime.today.addHours(owner.hour || 0).addMinutes(owner.minute || 0));
-                this.time = new TimeSpan(0, now.hour, now.minute);
-                const yearStart = typeof this.owner.yearStart === "number" ? this.owner.yearStart : -10;
-                const yearEnd = typeof this.owner.yearEnd === "number" ? this.owner.yearEnd : 10;
-                const year = typeof this.owner.year === "number" ? this.owner.year : now.year;
-                this.renderer = XNode.create("div", { class: "calendar-popup" },
-                    XNode.create(Calendar, { yearStart: yearStart, yearEnd: yearEnd, year: year, "event-item-select": Bind.event((s, e) => {
-                            if (e.detail.disabled) {
-                                return;
-                            }
-                            this.save(e.detail.value);
-                        }), enableFunc: Bind.oneTime(() => this.owner.enableFunc), value: Bind.oneWay(() => this.owner.value) }),
-                    this.owner.enableTime && XNode.create(TimeEditor, { time: Bind.twoWays(() => this.time) }),
-                    XNode.create("button", { class: "clear", text: "Clear", "event-click": (e) => {
-                            e.preventDefault();
-                            e.stopImmediatePropagation();
-                            e.stopPropagation();
-                            this.save();
-                        } }),
-                    XNode.create("button", { class: "today", text: "Today", "event-click": (e) => {
-                            e.preventDefault();
-                            e.stopImmediatePropagation();
-                            e.stopPropagation();
-                            this.save(DateTime.today.asJSDate);
-                        } }));
-            }
-            save(d) {
-                if (!d) {
-                    this.owner.value = d;
-                    this.close(d);
-                    return;
-                }
-                let date = DateTime.from((d));
-                if (this.owner.enableTime) {
-                    date = date.add(this.time);
-                }
-                this.owner.value = date.asJSDate;
-                this.close(date);
+  constructor(app, e = document.createElement("button")) {
+    super(app, e);
+  }
+  preCreate() {
+    this.prompt = "Select";
+    this.enableTime = false;
+    this.value = null;
+    this.format = (d, showTime) => showTime ? d?.toLocaleString(navigator.language, {
+      month: "short",
+      year: "numeric",
+      day: "numeric",
+      weekday: "short",
+      hour12: true,
+      hour: "numeric",
+      minute: "2-digit"
+    }) : d?.toLocaleDateString(navigator.language, {
+      month: "short",
+      year: "numeric",
+      day: "numeric",
+      weekday: "short"
+    });
+    const owner = this;
+    class CalendarPopup extends AtomPopover {
+      init() {
+        this.owner = owner;
+        this.type = "AM";
+        const now = DateTime.from(owner.value ?? DateTime.today.addHours(owner.hour || 0).addMinutes(owner.minute || 0));
+        this.time = new TimeSpan(0, now.hour, now.minute);
+        const yearStart = typeof this.owner.yearStart === "number" ? this.owner.yearStart : -10;
+        const yearEnd = typeof this.owner.yearEnd === "number" ? this.owner.yearEnd : 10;
+        const year = typeof this.owner.year === "number" ? this.owner.year : now.year;
+        this.renderer = XNode.create("div", {
+          class: "calendar-popup"
+        }, XNode.create(Calendar, {
+          yearStart: yearStart,
+          yearEnd: yearEnd,
+          year: year,
+          "event-item-select": Bind.event((s, e) => {
+            if (e.detail.disabled) {
+              return;
             }
+            this.save(e.detail.value);
+          }),
+          enableFunc: Bind.oneTime(() => this.owner.enableFunc),
+          value: Bind.oneWay(() => this.owner.value)
+        }), this.owner.enableTime && XNode.create(TimeEditor, {
+          time: Bind.twoWays(() => this.time)
+        }), XNode.create("button", {
+          class: "clear",
+          text: "Clear",
+          "event-click": e => {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+            this.save();
+          }
+        }), XNode.create("button", {
+          class: "today",
+          text: "Today",
+          "event-click": e => {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+            this.save(DateTime.today.asJSDate);
+          }
+        }));
+      }
+      save(d) {
+        if (!d) {
+          this.owner.value = d;
+          this.close(d);
+          return;
+        }
+        let date = DateTime.from(d);
+        if (this.owner.enableTime) {
+          date = date.add(this.time);
         }
-        this.render(XNode.create("div", { "data-layout": "flex", "data-date-field": "date-field", text: Bind.oneWay(() => this.format?.(this.value, this.enableTime) || this.prompt), "event-click": () => CalendarPopup.show(this, { "anchor-left": "parent-left", closeOnClick: false }) }));
+        this.owner.value = date.asJSDate;
+        this.close(date);
+      }
     }
+    this.render(XNode.create("div", {
+      "data-layout": "flex",
+      "data-date-field": "date-field",
+      text: Bind.oneWay(() => this.format?.(this.value, this.enableTime) || this.prompt),
+      "event-click": () => CalendarPopup.show(this, {
+        "anchor-left": "parent-left",
+        closeOnClick: false
+      })
+    }));
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Date)
-], DateField.prototype, "value", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DateField.prototype, "enableFunc", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DateField.prototype, "format", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], DateField.prototype, "yearStart", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], DateField.prototype, "yearEnd", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], DateField.prototype, "year", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], DateField.prototype, "hour", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], DateField.prototype, "minute", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DateField.prototype, "prompt", void 0);
-//# sourceMappingURL=DateField.js.map
+__decorate([BindableProperty, __metadata("design:type", Date)], DateField.prototype, "value", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DateField.prototype, "enableFunc", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DateField.prototype, "format", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], DateField.prototype, "yearStart", void 0);
+__decorate([BindableProperty, __metadata("design:type", Object)], DateField.prototype, "yearEnd", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], DateField.prototype, "year", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], DateField.prototype, "hour", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], DateField.prototype, "minute", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DateField.prototype, "prompt", void 0);

package/dist-esm/basic/DropDown.js

@@ -2,114 +2,102 @@ import { __decorate, __metadata } from "tslib";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import AtomRepeater, { askSuggestion, askSuggestionPopup, disposeChildren, MatchAnyCaseInsensitive } from "./AtomRepeater.js";
-import "./styles/drop-down.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/drop-down.global.css"));
 export default class DropDown extends AtomRepeater {
-    constructor() {
-        super(...arguments);
-        this.isPopupOpen = false;
+  constructor() {
+    super(...arguments);
+    this.isPopupOpen = false;
+  }
+  updateItems(container) {}
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "labelPath":
+        this.itemRenderer = item => XNode.create("div", {
+          text: this.labelPath(item)
+        });
+        break;
+      case "prompt":
+        this.updateClasses();
+        break;
     }
-    updateItems(container) {
+  }
+  preCreate() {
+    super.preCreate();
+    this.disableSearch = false;
+    this.prompt = "Select";
+    this.popupSuggestions = true;
+    this.bindEvent(this.element, "click", e => this.openPopup(e));
+    this.valuePath = item => item?.value ?? item;
+    this.labelPath = item => item?.label ?? item;
+    this.itemRenderer = item => XNode.create("div", {
+      text: this.labelPath(item)
+    });
+    this.element.dataset.dropDown = "drop-down";
+    this.render(XNode.create("div", null, XNode.create("div", {
+      "data-white-space": "nowrap",
+      text: this.prompt
+    }), XNode.create("i", {
+      class: "fad fa-caret-circle-down"
+    })));
+  }
+  async openPopup(e) {
+    if (this.isPopupOpen) {
+      return;
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "labelPath":
-                this.itemRenderer = (item) => XNode.create("div", { text: this.labelPath(item) });
-                break;
-            case "prompt":
-                this.updateClasses();
-                break;
-        }
+    this.isPopupOpen = true;
+    try {
+      if (!this.popupSuggestions) {
+        const selected = await askSuggestion(this.items, this.suggestionRenderer ?? this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), {
+          title: this.suggestionPrompt ?? this.prompt
+        });
+        this.selectedItem = selected;
+        return;
+      }
+      const selectedItem = await askSuggestionPopup(this, this.items, this.suggestionRenderer ?? this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), this.selectedItem);
+      if (this.selectedItem !== selectedItem) {
+        this.selectedItem = selectedItem;
+        this.element.dispatchEvent(new CustomEvent("selectionChanged", {
+          bubbles: true,
+          detail: selectedItem,
+          cancelable: true
+        }));
+      }
+    } finally {
+      this.isPopupOpen = false;
     }
-    preCreate() {
-        super.preCreate();
-        this.disableSearch = false;
-        this.prompt = "Select";
-        this.popupSuggestions = true;
-        this.bindEvent(this.element, "click", (e) => this.openPopup(e));
-        this.valuePath = (item) => item?.value ?? item;
-        this.labelPath = (item) => item?.label ?? item;
-        this.itemRenderer = (item) => XNode.create("div", { text: this.labelPath(item) });
-        this.element.dataset.dropDown = "drop-down";
-        this.render(XNode.create("div", null,
-            XNode.create("div", { "data-white-space": "nowrap", text: this.prompt }),
-            XNode.create("i", { class: "fad fa-caret-circle-down" })));
+  }
+  updateClasses() {
+    disposeChildren(this, this.element);
+    const ir = this.itemRenderer;
+    if (!ir) {
+      return;
     }
-    async openPopup(e) {
-        if (this.isPopupOpen) {
-            return;
-        }
-        this.isPopupOpen = true;
-        try {
-            if (!this.popupSuggestions) {
-                const selected = await askSuggestion(this.items, this.suggestionRenderer ?? this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), { title: this.suggestionPrompt ?? this.prompt });
-                this.selectedItem = selected;
-                return;
-            }
-            const selectedItem = await askSuggestionPopup(this, this.items, this.suggestionRenderer ?? this.itemRenderer, this.match ?? MatchAnyCaseInsensitive(this.labelPath), this.selectedItem);
-            if (this.selectedItem !== selectedItem) {
-                this.selectedItem = selectedItem;
-                this.element.dispatchEvent(new CustomEvent("selectionChanged", {
-                    bubbles: true,
-                    detail: selectedItem,
-                    cancelable: true
-                }));
-            }
-        }
-        finally {
-            this.isPopupOpen = false;
-        }
+    if (!this.selectedItem) {
+      this.render(XNode.create("div", null, XNode.create("div", {
+        "data-white-space": "nowrap",
+        text: this.prompt
+      }), XNode.create("i", {
+        class: "fad fa-caret-circle-down"
+      })));
+      return;
     }
-    updateClasses() {
-        disposeChildren(this, this.element);
-        const ir = this.itemRenderer;
-        if (!ir) {
-            return;
-        }
-        if (!this.selectedItem) {
-            this.render(XNode.create("div", null,
-                XNode.create("div", { "data-white-space": "nowrap", text: this.prompt }),
-                XNode.create("i", { class: "fad fa-caret-circle-down" })));
-            return;
-        }
-        const selectedItem = this.selectedItem;
-        const index = this.items.indexOf(selectedItem);
-        const node = ir(selectedItem, index, this);
-        const na = node.attributes ??= {};
-        if (!na["data-white-space"]) {
-            na["data-white-space"] = "nowrap";
-        }
-        this.render(XNode.create("div", null,
-            node,
-            XNode.create("i", { class: "fad fa-caret-circle-down" })));
+    const selectedItem = this.selectedItem;
+    const index = this.items.indexOf(selectedItem);
+    const node = ir(selectedItem, index, this);
+    const na = node.attributes ??= {};
+    if (!na["data-white-space"]) {
+      na["data-white-space"] = "nowrap";
     }
+    this.render(XNode.create("div", null, node, XNode.create("i", {
+      class: "fad fa-caret-circle-down"
+    })));
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Boolean)
-], DropDown.prototype, "popupSuggestions", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDown.prototype, "search", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDown.prototype, "prompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], DropDown.prototype, "suggestionPrompt", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDown.prototype, "labelPath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDown.prototype, "match", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], DropDown.prototype, "suggestionRenderer", void 0);
-//# sourceMappingURL=DropDown.js.map
+__decorate([BindableProperty, __metadata("design:type", Boolean)], DropDown.prototype, "popupSuggestions", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDown.prototype, "search", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDown.prototype, "prompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], DropDown.prototype, "suggestionPrompt", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDown.prototype, "labelPath", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDown.prototype, "match", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], DropDown.prototype, "suggestionRenderer", void 0);

package/dist-esm/basic/DropDownInput.global.css

@@ -0,0 +1,2 @@
+drop-down-input{border-bottom:1px solid #d3d3d3;display:inline-grid;grid-template-columns:1fr auto;padding-left:5px;padding-right:5px}drop-down-input>*{grid-column:1;grid-row:1}drop-down-input>label{pointer-events:none}drop-down-input>input{border:none;opacity:0;outline:none}drop-down-input>input:focus{opacity:1}drop-down-input:has(input:focus)>label{opacity:0}drop-down-input:has(input:focus){border-bottom-color:var(--focus-border-color,#000)}drop-down-input>i{background-image:url(../../images/svgs/caret-down.svg);background-position:100%;background-repeat:no-repeat;background-size:16px 16px;display:inline-block;grid-column:2;height:16px;width:16px}
+/*# sourceMappingURL=DropDownInput.global.css.map */

package/dist-esm/basic/DropDownInput.global.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/basic/DropDownInput.global.css","<no source>"],"names":[],"mappings":"AAAA,gBAGI,+BAAkC,CAFlC,mBAAoB,CACpB,8BAA+B,CAE/B,gBAAiB,CACjB,iBAiCJ,CAhCI,kBAEI,aAAc,CADd,UAEJ,CACA,sBACI,mBACJ,CACA,sBAGI,WAAY,CAFZ,SAAU,CACV,YAEJ,CACA,4BACI,SACJ,CAEI,uCACI,SACJ,CCxBR,iCDyBQ,mDCzBR,AD4BI,kBAEI,sDAAuD,CAEvD,wBAAiC,CACjC,2BAA4B,CAF5B,yBAA0B,CAK1B,oBAAqB,CAPrB,aAAc,CAMd,WAAY,CADZ,UAGJ","file":"DropDownInput.global.css"}