@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/Calendar.js

@@ -6,230 +6,238 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import DateTime from "@web-atoms/date-time/dist/DateTime.js";
 import AtomRepeater from "./AtomRepeater.js";
 import Select from "./Select.js";
-import "./styles/calendar.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/calendar.global.css"));
 const start = DateTime.now;
 const getWeekDays = (locale, type) => {
-    const baseDate = new Date(Date.UTC(2017, 0, 2));
-    const weekDays = [];
-    for (let i = 0; i < 7; i++) {
-        weekDays.push(baseDate.toLocaleDateString(locale, { weekday: type }));
-        baseDate.setDate(baseDate.getDate() + 1);
-    }
-    return weekDays;
+  const baseDate = new Date(Date.UTC(2017, 0, 2));
+  const weekDays = [];
+  for (let i = 0; i < 7; i++) {
+    weekDays.push(baseDate.toLocaleDateString(locale, {
+      weekday: type
+    }));
+    baseDate.setDate(baseDate.getDate() + 1);
+  }
+  return weekDays;
 };
 const getMonths = (locale, type) => {
-    const baseDate = new Date(Date.UTC(2017, 0, 2));
-    const weekDays = [];
-    for (let i = 0; i < 12; i++) {
-        weekDays.push(baseDate.toLocaleDateString(locale, { month: type }));
-        baseDate.setMonth(i + 1);
-    }
-    return weekDays;
+  const baseDate = new Date(Date.UTC(2017, 0, 2));
+  const weekDays = [];
+  for (let i = 0; i < 12; i++) {
+    weekDays.push(baseDate.toLocaleDateString(locale, {
+      month: type
+    }));
+    baseDate.setMonth(i + 1);
+  }
+  return weekDays;
 };
 function setValue(target, name, value) {
-    Object.defineProperty(target, name, { value });
-    return value;
+  Object.defineProperty(target, name, {
+    value
+  });
+  return value;
 }
 export const weekdays = {
-    get short() {
-        return setValue(this, "short", getWeekDays(navigator.language, "short"));
-    },
-    get long() {
-        return setValue(this, "long", getWeekDays(navigator.language, "long"));
-    }
+  get short() {
+    return setValue(this, "short", getWeekDays(navigator.language, "short"));
+  },
+  get long() {
+    return setValue(this, "long", getWeekDays(navigator.language, "long"));
+  }
 };
 export const months = {
-    get short() {
-        return setValue(this, "short", getMonths(navigator.language, "short"));
-    },
-    get long() {
-        return setValue(this, "long", getMonths(navigator.language, "long"));
-    },
-    get items() {
-        return setValue(this, "items", this.long.map((x, i) => ({ label: x, value: i })));
-    }
+  get short() {
+    return setValue(this, "short", getMonths(navigator.language, "short"));
+  },
+  get long() {
+    return setValue(this, "long", getMonths(navigator.language, "long"));
+  },
+  get items() {
+    return setValue(this, "items", this.long.map((x, i) => ({
+      label: x,
+      value: i
+    })));
+  }
 };
 export default class Calendar extends AtomRepeater {
-    constructor() {
-        super(...arguments);
-        this.dateModified = false;
+  constructor() {
+    super(...arguments);
+    this.dateModified = false;
+  }
+  set startDate(v) {
+    if (this.dateModified) {
+      return;
+    }
+    const year = v.getFullYear();
+    const month = v.getMonth();
+    if (this.year !== year) {
+      this.year = year;
     }
-    set startDate(v) {
-        if (this.dateModified) {
-            return;
-        }
-        const year = v.getFullYear();
-        const month = v.getMonth();
-        if (this.year !== year) {
-            this.year = year;
-        }
-        if (this.month !== month) {
-            this.month = month;
-        }
+    if (this.month !== month) {
+      this.month = month;
     }
-    get dates() {
-        const year = this.year;
-        const tm = this.month;
-        if (tm === undefined || year === undefined) {
-            return [];
-        }
-        const month = Number(tm);
-        const today = DateTime.today;
-        let startDate = new DateTime(year, month, 1);
-        while (startDate.dayOfWeek !== 1) {
-            startDate = startDate.add(-1);
-        }
-        const a = [];
-        const y = startDate.year;
-        const m = startDate.month;
-        const ef = this.enableFunc;
-        for (let index = 0; index < 42; index++) {
-            const cd = startDate.add(index);
-            const item = {
-                label: cd.day + "",
-                row: Math.floor(index / 7),
-                column: index % 7,
-                type: null,
-                value: cd,
-                isToday: cd.equals(today),
-                isOtherMonth: month !== cd.month,
-                isWeekend: (cd.dayOfWeek === 0 || cd.dayOfWeek === 6),
-                disabled: false
-            };
-            if (ef) {
-                item.disabled = !(ef(item));
-            }
-            a.push(item);
-        }
-        return a;
+  }
+  get dates() {
+    const year = this.year;
+    const tm = this.month;
+    if (tm === undefined || year === undefined) {
+      return [];
     }
-    get years() {
-        const years = [];
-        const s = start.year + this.yearStart;
-        const e = start.year + this.yearEnd + 1;
-        for (let index = s; index < e; index++) {
-            years.push({
-                label: index.toString(),
-                value: index
-            });
-        }
-        return years;
+    const month = Number(tm);
+    const today = DateTime.today;
+    let startDate = new DateTime(year, month, 1);
+    while (startDate.dayOfWeek !== 1) {
+      startDate = startDate.add(-1);
     }
-    get value() {
-        return super.value;
+    const a = [];
+    const y = startDate.year;
+    const m = startDate.month;
+    const ef = this.enableFunc;
+    for (let index = 0; index < 42; index++) {
+      const cd = startDate.add(index);
+      const item = {
+        label: cd.day + "",
+        row: Math.floor(index / 7),
+        column: index % 7,
+        type: null,
+        value: cd,
+        isToday: cd.equals(today),
+        isOtherMonth: month !== cd.month,
+        isWeekend: cd.dayOfWeek === 0 || cd.dayOfWeek === 6,
+        disabled: false
+      };
+      if (ef) {
+        item.disabled = !ef(item);
+      }
+      a.push(item);
     }
-    set value(v) {
-        if (v instanceof Date) {
-            this.startDate = v;
-        }
-        super.value = v;
+    return a;
+  }
+  get years() {
+    const years = [];
+    const s = start.year + this.yearStart;
+    const e = start.year + this.yearEnd + 1;
+    for (let index = s; index < e; index++) {
+      years.push({
+        label: index.toString(),
+        value: index
+      });
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        switch (name) {
-            case "enableFunc":
-            case "dateRenderer":
-                this.updateItems();
-                break;
-        }
+    return years;
+  }
+  get value() {
+    return super.value;
+  }
+  set value(v) {
+    if (v instanceof Date) {
+      this.startDate = v;
     }
-    next() {
-        if (this.month === 11) {
-            this.year++;
-            this.month = 0;
-            return;
-        }
-        this.month++;
+    super.value = v;
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    switch (name) {
+      case "enableFunc":
+      case "dateRenderer":
+        this.updateItems();
+        break;
     }
-    prev() {
-        if (this.month === 0) {
-            this.year--;
-            this.month = 11;
-            return;
-        }
-        this.month--;
+  }
+  next() {
+    if (this.month === 11) {
+      this.year++;
+      this.month = 0;
+      return;
     }
-    preCreate() {
-        super.preCreate();
-        const now = new Date();
-        this.selectedItems = [];
-        this.valuePath = (i) => i?.value;
-        this.yearStart = -10;
-        this.yearEnd = 10;
-        this.year = now.getFullYear();
-        this.month = now.getMonth();
-        this.comparer = (left, right) => left && right &&
-            DateTime.from(left).date?.msSinceEpoch === DateTime.from(right).date?.msSinceEpoch;
-        this.bindEvent(this.element, "change", () => this.dateModified = true, null, { capture: true });
-        this.bindEvent(this.element, "itemSelect", (e) => e.detail.disabled ? e.preventDefault() : null);
-        this.render(XNode.create("div", { "data-calendar": "calendar", items: Bind.oneWay(() => this.dates) },
-            XNode.create("i", { "data-element": "previous", "event-click": () => this.prev(), class: "fa-solid fa-circle-chevron-left", title: "Previous Month" }),
-            XNode.create(Select, { "data-element": "month", items: months.items, value: Bind.twoWays(() => this.month) }),
-            XNode.create(Select, { "data-element": "year", items: Bind.oneWay(() => this.years), value: Bind.twoWays(() => this.year) }),
-            XNode.create("i", { "data-element": "next", "event-click": () => this.next(), class: "fa-solid fa-circle-chevron-right", title: "Next Month" }),
-            XNode.create("div", { class: "week" }),
-            XNode.create("div", { "data-click-event": "item-select", class: "dates" })));
-        this.itemsPresenter = this.element.lastElementChild;
-        const week = this.element.lastElementChild.previousElementSibling;
-        let w = 1;
-        for (const iterator of weekdays.short) {
-            const text = document.createElement("span");
-            text.textContent = iterator;
-            week.appendChild(text);
-            text.style.gridColumnStart = `${w++}`;
-        }
-        this.dateRenderer = (item) => XNode.create("div", { text: item.label });
-        this.itemRenderer = (item) => {
-            const d = this.dateRenderer(item);
-            const a = d.attributes ??= {};
-            if (item.isToday) {
-                a["data-is-today"] = item.isToday;
-            }
-            if (item.isOtherMonth) {
-                a["data-is-other-month"] = item.isOtherMonth;
-            }
-            if (item.isWeekend) {
-                a["data-is-weekend"] = item.isWeekend;
-            }
-            if (item.disabled) {
-                a["data-disabled"] = item.disabled;
-            }
-            return d;
-        };
+    this.month++;
+  }
+  prev() {
+    if (this.month === 0) {
+      this.year--;
+      this.month = 11;
+      return;
     }
-    dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem) {
-        this.dateModified = true;
-        super.dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem);
+    this.month--;
+  }
+  preCreate() {
+    super.preCreate();
+    const now = new Date();
+    this.selectedItems = [];
+    this.valuePath = i => i?.value;
+    this.yearStart = -10;
+    this.yearEnd = 10;
+    this.year = now.getFullYear();
+    this.month = now.getMonth();
+    this.comparer = (left, right) => left && right && DateTime.from(left).date?.msSinceEpoch === DateTime.from(right).date?.msSinceEpoch;
+    this.bindEvent(this.element, "change", () => this.dateModified = true, null, {
+      capture: true
+    });
+    this.bindEvent(this.element, "itemSelect", e => e.detail.disabled ? e.preventDefault() : null);
+    this.render(XNode.create("div", {
+      "data-calendar": "calendar",
+      items: Bind.oneWay(() => this.dates)
+    }, XNode.create("i", {
+      "data-element": "previous",
+      "event-click": () => this.prev(),
+      class: "fa-solid fa-circle-chevron-left",
+      title: "Previous Month"
+    }), XNode.create(Select, {
+      "data-element": "month",
+      items: months.items,
+      value: Bind.twoWays(() => this.month)
+    }), XNode.create(Select, {
+      "data-element": "year",
+      items: Bind.oneWay(() => this.years),
+      value: Bind.twoWays(() => this.year)
+    }), XNode.create("i", {
+      "data-element": "next",
+      "event-click": () => this.next(),
+      class: "fa-solid fa-circle-chevron-right",
+      title: "Next Month"
+    }), XNode.create("div", {
+      class: "week"
+    }), XNode.create("div", {
+      "data-click-event": "item-select",
+      class: "dates"
+    })));
+    this.itemsPresenter = this.element.lastElementChild;
+    const week = this.element.lastElementChild.previousElementSibling;
+    let w = 1;
+    for (const iterator of weekdays.short) {
+      const text = document.createElement("span");
+      text.textContent = iterator;
+      week.appendChild(text);
+      text.style.gridColumnStart = `${w++}`;
     }
+    this.dateRenderer = item => XNode.create("div", {
+      text: item.label
+    });
+    this.itemRenderer = item => {
+      const d = this.dateRenderer(item);
+      const a = d.attributes ??= {};
+      if (item.isToday) {
+        a["data-is-today"] = item.isToday;
+      }
+      if (item.isOtherMonth) {
+        a["data-is-other-month"] = item.isOtherMonth;
+      }
+      if (item.isWeekend) {
+        a["data-is-weekend"] = item.isWeekend;
+      }
+      if (item.disabled) {
+        a["data-disabled"] = item.disabled;
+      }
+      return d;
+    };
+  }
+  dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem) {
+    this.dateModified = true;
+    super.dispatchItemEvent(eventName, item, recreate, originalTarget, nestedItem);
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], Calendar.prototype, "year", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], Calendar.prototype, "month", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], Calendar.prototype, "yearStart", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], Calendar.prototype, "yearEnd", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Function)
-], Calendar.prototype, "dateRenderer", void 0);
-__decorate([
-    WatchProperty,
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], Calendar.prototype, "dates", null);
-__decorate([
-    WatchProperty,
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
-], Calendar.prototype, "years", null);
-//# sourceMappingURL=Calendar.js.map
+__decorate([BindableProperty, __metadata("design:type", Number)], Calendar.prototype, "year", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], Calendar.prototype, "month", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], Calendar.prototype, "yearStart", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], Calendar.prototype, "yearEnd", void 0);
+__decorate([BindableProperty, __metadata("design:type", Function)], Calendar.prototype, "dateRenderer", void 0);
+__decorate([WatchProperty, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Calendar.prototype, "dates", null);
+__decorate([WatchProperty, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Calendar.prototype, "years", null);

package/dist-esm/basic/CheckBoxList.js

@@ -2,77 +2,97 @@ 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, { SameObjectValue } from "./AtomRepeater.js";
-import "./styles/check-box-list.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/check-box-list.global.css"));
 export default class CheckBoxList extends AtomRepeater {
-    preCreate() {
-        super.preCreate();
-        this.element.dataset.checkboxList = "checkbox-list";
-        this.bindEvent(this.element, "itemClick", (e) => {
-            const s = this.selectedItems;
-            if (!s) {
-                return;
+  preCreate() {
+    super.preCreate();
+    this.element.dataset.checkboxList = "checkbox-list";
+    this.bindEvent(this.element, "itemClick", e => {
+      const s = this.selectedItems;
+      if (!s) {
+        return;
+      }
+      const item = e.detail;
+      const vp = this.valuePath ?? SameObjectValue;
+      const value = vp(item);
+      let existing = s.find(i => vp(i) === value);
+      if (!existing) {
+        s.add(item);
+        this.element.dispatchEvent(new CustomEvent("itemSelect", {
+          detail: item,
+          bubbles: false
+        }));
+        if (this.softDeleteProperty) {
+          item[this.softDeleteProperty] = false;
+        }
+        this.refreshItem(item);
+      } else {
+        if (this.softDeleteProperty) {
+          const existingItem = this.items.find(i => vp(i) === value);
+          if (existing[this.softDeleteProperty] === true) {
+            existing[this.softDeleteProperty] = false;
+            if (existingItem && existingItem !== existing) {
+              existingItem[this.softDeleteProperty] = false;
+              this.element.dispatchEvent(new CustomEvent("itemSelect", {
+                detail: item,
+                bubbles: false
+              }));
+              this.refreshItem(existingItem);
             }
-            const item = e.detail;
-            const vp = this.valuePath ?? SameObjectValue;
-            const value = vp(item);
-            let existing = s.find((i) => vp(i) === value);
-            if (!existing) {
-                s.add(item);
-                this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
-                if (this.softDeleteProperty) {
-                    item[this.softDeleteProperty] = false;
-                }
-                this.refreshItem(item);
+            this.element.dispatchEvent(new CustomEvent("itemSelect", {
+              detail: item,
+              bubbles: false
+            }));
+          } else {
+            existing[this.softDeleteProperty] = true;
+            if (existingItem && existingItem !== existing) {
+              existingItem[this.softDeleteProperty] = true;
+              this.element.dispatchEvent(new CustomEvent("itemDeselect", {
+                detail: item,
+                bubbles: false
+              }));
+              this.refreshItem(existingItem);
             }
-            else {
-                if (this.softDeleteProperty) {
-                    const existingItem = this.items.find((i) => vp(i) === value);
-                    if (existing[this.softDeleteProperty] === true) {
-                        existing[this.softDeleteProperty] = false;
-                        if (existingItem && existingItem !== existing) {
-                            existingItem[this.softDeleteProperty] = false;
-                            this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
-                            this.refreshItem(existingItem);
-                        }
-                        this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
-                    }
-                    else {
-                        existing[this.softDeleteProperty] = true;
-                        if (existingItem && existingItem !== existing) {
-                            existingItem[this.softDeleteProperty] = true;
-                            this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: item, bubbles: false }));
-                            this.refreshItem(existingItem);
-                        }
-                        this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: existing, bubbles: false }));
-                    }
-                    this.refreshItem(existing);
-                }
-                else {
-                    this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: existing, bubbles: false }));
-                    s.remove(existing);
-                }
-            }
-        });
-        this.itemRenderer = (item) => {
-            if (this.softDeleteProperty) {
-                return XNode.create("div", { "data-deleted": !!item[this.softDeleteProperty], "data-item-type": "checkbox" },
-                    XNode.create("i", { class: "far fa-square" }),
-                    XNode.create("i", { class: "fas fa-check-square" }),
-                    XNode.create("span", { text: item.label }));
-            }
-            return XNode.create("div", { "data-deleted": "none", "data-item-type": "checkbox" },
-                XNode.create("i", { class: "far fa-square" }),
-                XNode.create("i", { class: "fas fa-check-square" }),
-                XNode.create("span", { text: item.label }));
-        };
-    }
+            this.element.dispatchEvent(new CustomEvent("itemDeselect", {
+              detail: existing,
+              bubbles: false
+            }));
+          }
+          this.refreshItem(existing);
+        } else {
+          this.element.dispatchEvent(new CustomEvent("itemDeselect", {
+            detail: existing,
+            bubbles: false
+          }));
+          s.remove(existing);
+        }
+      }
+    });
+    this.itemRenderer = item => {
+      if (this.softDeleteProperty) {
+        return XNode.create("div", {
+          "data-deleted": !!item[this.softDeleteProperty],
+          "data-item-type": "checkbox"
+        }, XNode.create("i", {
+          class: "far fa-square"
+        }), XNode.create("i", {
+          class: "fas fa-check-square"
+        }), XNode.create("span", {
+          text: item.label
+        }));
+      }
+      return XNode.create("div", {
+        "data-deleted": "none",
+        "data-item-type": "checkbox"
+      }, XNode.create("i", {
+        class: "far fa-square"
+      }), XNode.create("i", {
+        class: "fas fa-check-square"
+      }), XNode.create("span", {
+        text: item.label
+      }));
+    };
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], CheckBoxList.prototype, "labelPath", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], CheckBoxList.prototype, "softDeleteProperty", void 0);
-//# sourceMappingURL=CheckBoxList.js.map
+__decorate([BindableProperty, __metadata("design:type", Object)], CheckBoxList.prototype, "labelPath", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], CheckBoxList.prototype, "softDeleteProperty", void 0);

package/dist-esm/basic/Checkbox.js

@@ -1,9 +1,17 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/checkbox.global.css";
-export default function Checkbox({ checked, text, ...a }) {
-    return XNode.create("div", { "data-check-box": "check-box", ...a },
-        XNode.create("label", null,
-            XNode.create("input", { type: "checkbox", checked: checked }),
-            XNode.create("span", { text: text })));
-}
-//# sourceMappingURL=Checkbox.js.map
+ESMPack.installStyleSheet(import.meta.resolve("./styles/checkbox.global.css"));
+export default function Checkbox({
+  checked,
+  text,
+  ...a
+}) {
+  return XNode.create("div", {
+    "data-check-box": "check-box",
+    ...a
+  }, XNode.create("label", null, XNode.create("input", {
+    type: "checkbox",
+    checked: checked
+  }), XNode.create("span", {
+    text: text
+  })));
+}