@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/basic/TimeEditor.js

@@ -4,63 +4,108 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan.js";
 import Select from "./Select.js";
 import Bind from "@web-atoms/core/dist/core/Bind.js";
-import "./styles/time-editor.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/time-editor.global.css"));
 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 TimeEditor extends AtomControl {
-    get time() {
-        let t = new TimeSpan(0, this.hour, this.minute);
-        if (this.isPM) {
-            t = t.add(TimeSpan.fromHours(12));
-        }
-        return t;
+  get time() {
+    let t = new TimeSpan(0, this.hour, this.minute);
+    if (this.isPM) {
+      t = t.add(TimeSpan.fromHours(12));
     }
-    set time(v) {
-        if (!v) {
-            v = TimeSpan.fromSeconds(0);
-        }
-        let h = v.hours;
-        if (h > 12) {
-            h -= 12;
-            this.isPM = true;
-        }
-        this.hour = h;
-        this.minute = v.minutes;
-        AtomBinder.refreshValue(this, "time");
+    return t;
+  }
+  set time(v) {
+    if (!v) {
+      v = TimeSpan.fromSeconds(0);
     }
-    create() {
-        this.isPM = false;
-        this.hour = 12;
-        this.minute = 0;
-        this.render(XNode.create("div", { "data-time-editor": "time-editor", "event-change": () => setTimeout(() => AtomBinder.refreshValue(this, "time"), 1) },
-            XNode.create(Select, { "data-element": "hour", items: hours(), value: Bind.twoWays(() => this.hour) }),
-            XNode.create(Select, { "data-element": "minute", items: minutes(), value: Bind.twoWays(() => this.minute) }),
-            XNode.create("button", { "event-click": () => (this.isPM = false, AtomBinder.refreshValue(this, "time")), "data-selected": Bind.oneWay(() => !this.isPM), "data-element": "am", text: "AM" }),
-            XNode.create("button", { "event-click": () => (this.isPM = true, AtomBinder.refreshValue(this, "time")), "data-selected": Bind.oneWay(() => this.isPM), "data-element": "pm", text: "PM" })));
+    let h = v.hours;
+    if (h > 12) {
+      h -= 12;
+      this.isPM = true;
     }
-}
-//# sourceMappingURL=TimeEditor.js.map
+    this.hour = h;
+    this.minute = v.minutes;
+    AtomBinder.refreshValue(this, "time");
+  }
+  create() {
+    this.isPM = false;
+    this.hour = 12;
+    this.minute = 0;
+    this.render(XNode.create("div", {
+      "data-time-editor": "time-editor",
+      "event-change": () => setTimeout(() => AtomBinder.refreshValue(this, "time"), 1)
+    }, XNode.create(Select, {
+      "data-element": "hour",
+      items: hours(),
+      value: Bind.twoWays(() => this.hour)
+    }), XNode.create(Select, {
+      "data-element": "minute",
+      items: minutes(),
+      value: Bind.twoWays(() => this.minute)
+    }), XNode.create("button", {
+      "event-click": () => (this.isPM = false, AtomBinder.refreshValue(this, "time")),
+      "data-selected": Bind.oneWay(() => !this.isPM),
+      "data-element": "am",
+      text: "AM"
+    }), XNode.create("button", {
+      "event-click": () => (this.isPM = true, AtomBinder.refreshValue(this, "time")),
+      "data-selected": Bind.oneWay(() => this.isPM),
+      "data-element": "pm",
+      text: "PM"
+    })));
+  }
+}

package/dist-esm/basic/TitleEditor.js

@@ -1,101 +1,121 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-import "./styles/title-editor.global.css";
-const paste = (e) => {
-    const input = e.target;
-    const capitalize = input.autocapitalize;
-    if (!capitalize || capitalize === "off" || capitalize === "none") {
-        return;
-    }
-    setTimeout(() => {
-        const start = input.selectionStart;
-        const end = input.selectionEnd;
-        formatText(input, capitalize);
-        input.setSelectionRange(start, end);
-    }, 1);
+ESMPack.installStyleSheet(import.meta.resolve("./styles/title-editor.global.css"));
+const paste = e => {
+  const input = e.target;
+  const capitalize = input.autocapitalize;
+  if (!capitalize || capitalize === "off" || capitalize === "none") {
+    return;
+  }
+  setTimeout(() => {
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    formatText(input, capitalize);
+    input.setSelectionRange(start, end);
+  }, 1);
 };
 const formatText = (input, capitalize, all = true) => {
-    let value = input.value;
-    if (!value) {
-        return;
-    }
-    switch (capitalize) {
-        case "on":
-        case "sentences":
-            if (value.length === 1) {
-                value = value.toLocaleUpperCase();
-            }
-            break;
-        case "words":
-            if (all) {
-                value = value.replace(/(\S+)/g, (s) => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
-            }
-            else {
-                value = value.replace(/(\S+)$/g, (s) => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
-            }
-            break;
-        case "characters":
-            value = value.toLocaleUpperCase();
-            break;
-    }
-    input.value = value;
+  let value = input.value;
+  if (!value) {
+    return;
+  }
+  switch (capitalize) {
+    case "on":
+    case "sentences":
+      if (value.length === 1) {
+        value = value.toLocaleUpperCase();
+      }
+      break;
+    case "words":
+      if (all) {
+        value = value.replace(/(\S+)/g, s => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
+      } else {
+        value = value.replace(/(\S+)$/g, s => s.substring(0, 1).toLocaleUpperCase() + s.substring(1));
+      }
+      break;
+    case "characters":
+      value = value.toLocaleUpperCase();
+      break;
+  }
+  input.value = value;
 };
-const capitalizeText = /android|iPhone|iOS/i.test(navigator.userAgent)
-    ? () => undefined
-    : (e) => {
-        const input = e.target;
-        const capitalize = input.autocapitalize;
-        if (!capitalize || capitalize === "off" || capitalize === "none") {
-            return;
-        }
-        const start = input.selectionStart;
-        const end = input.selectionEnd;
-        formatText(input, capitalize, false);
-        input.setSelectionRange(start, end);
-    };
-const toText = (capitalize) => {
-    switch (capitalize) {
-        case "off":
-        case "none":
-            return "Caps Off";
-        case "characters":
-            return "All Caps";
-        case "on":
-        case "sentences":
-            return "Sentence";
-        case "words":
-            return "Title Case";
-    }
-    return "";
+const capitalizeText = /android|iPhone|iOS/i.test(navigator.userAgent) ? () => undefined : e => {
+  const input = e.target;
+  const capitalize = input.autocapitalize;
+  if (!capitalize || capitalize === "off" || capitalize === "none") {
+    return;
+  }
+  const start = input.selectionStart;
+  const end = input.selectionEnd;
+  formatText(input, capitalize, false);
+  input.setSelectionRange(start, end);
 };
-const changeCase = (e) => {
-    let element = e.target;
-    if (element.tagName === "SPAN") {
-        element = element.previousElementSibling;
-    }
-    const input = element.previousElementSibling;
-    const span = element.nextElementSibling;
-    let capitalize = input.autocapitalize;
-    switch (capitalize) {
-        case "sentences":
-            capitalize = "words";
-            break;
-        case "words":
-            capitalize = "characters";
-            break;
-        case "characters":
-            capitalize = "off";
-            break;
-        default:
-            capitalize = "sentences";
-            break;
-    }
-    span.textContent = toText(capitalize);
-    input.autocapitalize = capitalize;
+const toText = capitalize => {
+  switch (capitalize) {
+    case "off":
+    case "none":
+      return "Caps Off";
+    case "characters":
+      return "All Caps";
+    case "on":
+    case "sentences":
+      return "Sentence";
+    case "words":
+      return "Title Case";
+  }
+  return "";
 };
-export default function TitleEditor({ value, type, placeholder, capitalize = "on", capitalizationTitle = "Capitalization", ...a }) {
-    return XNode.create("div", { "data-title-editor": "title-editor", ...a },
-        XNode.create("input", { autocapitalize: capitalize, type: type, placeholder: placeholder, value: value, "event-input": capitalizeText, "event-paste": paste }),
-        XNode.create("i", { "data-element": "icon", class: "fas fa-font-case", "event-click": changeCase, title: capitalizationTitle }),
-        XNode.create("span", { "data-element": "text", text: toText(capitalize), "event-click": changeCase, title: capitalizationTitle }));
-}
-//# sourceMappingURL=TitleEditor.js.map
+const changeCase = e => {
+  let element = e.target;
+  if (element.tagName === "SPAN") {
+    element = element.previousElementSibling;
+  }
+  const input = element.previousElementSibling;
+  const span = element.nextElementSibling;
+  let capitalize = input.autocapitalize;
+  switch (capitalize) {
+    case "sentences":
+      capitalize = "words";
+      break;
+    case "words":
+      capitalize = "characters";
+      break;
+    case "characters":
+      capitalize = "off";
+      break;
+    default:
+      capitalize = "sentences";
+      break;
+  }
+  span.textContent = toText(capitalize);
+  input.autocapitalize = capitalize;
+};
+export default function TitleEditor({
+  value,
+  type,
+  placeholder,
+  capitalize = "on",
+  capitalizationTitle = "Capitalization",
+  ...a
+}) {
+  return XNode.create("div", {
+    "data-title-editor": "title-editor",
+    ...a
+  }, XNode.create("input", {
+    autocapitalize: capitalize,
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    "event-input": capitalizeText,
+    "event-paste": paste
+  }), XNode.create("i", {
+    "data-element": "icon",
+    class: "fas fa-font-case",
+    "event-click": changeCase,
+    title: capitalizationTitle
+  }), XNode.create("span", {
+    "data-element": "text",
+    text: toText(capitalize),
+    "event-click": changeCase,
+    title: capitalizationTitle
+  }));
+}

package/dist-esm/basic/ToggleButtonBar.js

@@ -2,28 +2,27 @@ 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 from "./AtomRepeater.js";
-import "./styles/toggle-button-bar.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/toggle-button-bar.global.css"));
 export default class ToggleButtonBar extends AtomRepeater {
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        if (name === "labelPath") {
-            this.updateItems();
-            return;
-        }
-    }
-    preCreate() {
-        super.preCreate();
-        this.element.dataset.buttonBar = "button-bar";
-        this.bindEvent(this.element, "itemClick", (e) => {
-            this.selectedItem = e.detail;
-        });
-        this.valuePath = (item) => item?.value ?? item;
-        this.labelPath = (item) => item?.label ?? item;
-        this.itemRenderer = (item) => XNode.create("div", { "data-item-type": "toggle-button", text: this.labelPath(item) });
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    if (name === "labelPath") {
+      this.updateItems();
+      return;
     }
+  }
+  preCreate() {
+    super.preCreate();
+    this.element.dataset.buttonBar = "button-bar";
+    this.bindEvent(this.element, "itemClick", e => {
+      this.selectedItem = e.detail;
+    });
+    this.valuePath = item => item?.value ?? item;
+    this.labelPath = item => item?.label ?? item;
+    this.itemRenderer = item => XNode.create("div", {
+      "data-item-type": "toggle-button",
+      text: this.labelPath(item)
+    });
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Object)
-], ToggleButtonBar.prototype, "labelPath", void 0);
-//# sourceMappingURL=ToggleButtonBar.js.map
+__decorate([BindableProperty, __metadata("design:type", Object)], ToggleButtonBar.prototype, "labelPath", void 0);

package/dist-esm/basic/Tooltip.js

@@ -1,56 +1,58 @@
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { getParentRepeaterItem } from "./AtomRepeater.js";
-import "./styles/tooltip.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("./styles/tooltip.global.css"));
 import AtomPopover from "./elements/AtomPopover.js";
 const tooltips = new Map();
 ElementValueSetters.tooltip = (control, e, value) => {
-    tooltips.set(e, [{ control, tooltip: undefined }, value]);
-    control.registerDisposable({
-        dispose: () => {
-            tooltips.delete(e);
-        }
-    });
+  tooltips.set(e, [{
+    control,
+    tooltip: undefined
+  }, value]);
+  control.registerDisposable({
+    dispose: () => {
+      tooltips.delete(e);
+    }
+  });
 };
-document.body.addEventListener("pointerenter", (ev) => Tooltip.showTooltip(ev.target), true);
-document.body.addEventListener("pointerleave", (ev) => {
-    const start = ev.target;
-    setTimeout(() => {
-        const item = tooltips.get(start);
-        if (!item) {
-            return;
-        }
-        const [host] = item;
-        if (host.tooltip) {
-            host.tooltip.cancel();
-            host.tooltip = undefined;
-        }
-    }, 250);
+document.body.addEventListener("pointerenter", ev => Tooltip.showTooltip(ev.target), true);
+document.body.addEventListener("pointerleave", ev => {
+  const start = ev.target;
+  setTimeout(() => {
+    const item = tooltips.get(start);
+    if (!item) {
+      return;
+    }
+    const [host] = item;
+    if (host.tooltip) {
+      host.tooltip.cancel();
+      host.tooltip = undefined;
+    }
+  }, 250);
 }, true);
 export default class Tooltip extends AtomPopover {
-    static showTooltip(target) {
-        let item;
-        while (target) {
-            item = tooltips.get(target);
-            if (!item) {
-                target = target.parentElement;
-                continue;
-            }
-            break;
-        }
-        if (!item) {
-            return;
-        }
-        const [host, node] = item;
-        host.tooltip = node.create(target, {
-            dataFactory: () => {
-                let data = getParentRepeaterItem(target);
-                if (!data) {
-                    return AtomControl.from(target).data;
-                }
-                data = data[2];
-                return data;
-            }
-        });
+  static showTooltip(target) {
+    let item;
+    while (target) {
+      item = tooltips.get(target);
+      if (!item) {
+        target = target.parentElement;
+        continue;
+      }
+      break;
     }
-}
-//# sourceMappingURL=Tooltip.js.map
+    if (!item) {
+      return;
+    }
+    const [host, node] = item;
+    host.tooltip = node.create(target, {
+      dataFactory: () => {
+        let data = getParentRepeaterItem(target);
+        if (!data) {
+          return AtomControl.from(target).data;
+        }
+        data = data[2];
+        return data;
+      }
+    });
+  }
+}

package/dist-esm/basic/TypeWriter.js

@@ -2,49 +2,52 @@ import XNode from "@web-atoms/core/dist/core/XNode.js";
 import sleep from "@web-atoms/core/dist/core/sleep.js";
 import { CancelToken } from "@web-atoms/core/dist/core/types.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import "../styles/type-writer.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("../styles/type-writer.global.css"));
 const disposableProperty = Symbol("type-writer-timer");
 const nbsp = "\u202f";
 const tp = AtomControl.registerProperty("data-type-writer", "type-writer", (c, e, value) => {
-    e[disposableProperty]?.cancel();
-    const ct = new CancelToken();
-    e[disposableProperty] = ct;
-    c.app.runAsync(async () => {
-        const separator = e.getAttribute("separator") ?? e.getAttribute("data-separator") ?? ",";
-        const typeDelay = Number(e.getAttribute("type-delay") ?? e.getAttribute("data-type-delay") ?? "180");
-        const pause = Number(e.getAttribute("pause") ?? e.getAttribute("data-pause") ?? "700");
-        const deleteDelay = Number(e.getAttribute("delete-delay") ?? e.getAttribute("data-delete-delay") ?? "100");
-        const textList = value
-            .split(separator)
-            .map((x) => x.trim())
-            .filter((x) => x);
-        e.textContent = nbsp;
-        let index = 0;
-        const max = textList.length;
-        while (!ct.cancelled) {
-            if (!e.isConnected) {
-                return;
-            }
-            const current = textList[index];
-            let length = 0;
-            while (length < current.length) {
-                e.textContent = current.substring(0, ++length) || nbsp;
-                await sleep(typeDelay);
-            }
-            await sleep(pause);
-            while (length) {
-                e.textContent = current.substring(0, --length) || nbsp;
-                await sleep(deleteDelay);
-            }
-            await sleep(deleteDelay);
-            index++;
-            if (index === max) {
-                index = 0;
-            }
-        }
-    });
+  e[disposableProperty]?.cancel();
+  const ct = new CancelToken();
+  e[disposableProperty] = ct;
+  c.app.runAsync(async () => {
+    const separator = e.getAttribute("separator") ?? e.getAttribute("data-separator") ?? ",";
+    const typeDelay = Number(e.getAttribute("type-delay") ?? e.getAttribute("data-type-delay") ?? "180");
+    const pause = Number(e.getAttribute("pause") ?? e.getAttribute("data-pause") ?? "700");
+    const deleteDelay = Number(e.getAttribute("delete-delay") ?? e.getAttribute("data-delete-delay") ?? "100");
+    const textList = value.split(separator).map(x => x.trim()).filter(x => x);
+    e.textContent = nbsp;
+    let index = 0;
+    const max = textList.length;
+    while (!ct.cancelled) {
+      if (!e.isConnected) {
+        return;
+      }
+      const current = textList[index];
+      let length = 0;
+      while (length < current.length) {
+        e.textContent = current.substring(0, ++length) || nbsp;
+        await sleep(typeDelay);
+      }
+      await sleep(pause);
+      while (length) {
+        e.textContent = current.substring(0, --length) || nbsp;
+        await sleep(deleteDelay);
+      }
+      await sleep(deleteDelay);
+      index++;
+      if (index === max) {
+        index = 0;
+      }
+    }
+  });
 });
-export default function TypeWriter({ text, ...a }) {
-    return XNode.create("div", { "data-component": "type-writer", ...tp(text), ...a });
-}
-//# sourceMappingURL=TypeWriter.js.map
+export default function TypeWriter({
+  text,
+  ...a
+}) {
+  return XNode.create("div", {
+    "data-component": "type-writer",
+    ...tp(text),
+    ...a
+  });
+}