@web-atoms/web-controls 2.5.39 → 2.5.41

package/dist-esm/basic/DataGrid.js

@@ -0,0 +1,290 @@
+import { __decorate, __metadata } from "tslib";
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
+import { CancelToken } from "@web-atoms/core/dist/core/types.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { SelectorCheckBox } from "./AtomRepeater.js";
+import { EditableInput, getPropertyInfo } from "./Editable.js";
+import TableRepeater from "./TableRepeater.js";
+import "./styles/data-grid.global.css";
+const cellEventName = Symbol("cell-event-name");
+const headerEventName = Symbol("header-event-name");
+const footerEventName = Symbol("footer-event-name");
+const fromHyphenToCamel = (input) => input.replace(/-([a-z])/ig, (g) => g[1].toUpperCase());
+const toEventName = (name) => {
+    const r = fromHyphenToCamel(name.replace(/\s+/, "-"));
+    return r[0].toLowerCase() + r.substring(1);
+};
+const getCellEventName = (d) => {
+    let name = d[cellEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.cellClickEvent ?? `cell-${d.header}-click`);
+    d[cellEventName] = name;
+    return name;
+};
+const getHeaderEventName = (d) => {
+    let name = d[headerEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.headerClickEvent ?? `header-${d.header}-click`);
+    d[headerEventName] = name;
+    return name;
+};
+const getFooterEventName = (d) => {
+    let name = d[footerEventName];
+    if (name !== void 0) {
+        return name;
+    }
+    name = toEventName(d.footerClickEvent ?? `footer-${d.header}-click`);
+    d[footerEventName] = name;
+    return name;
+};
+export const SelectAllColumn = {
+    header: "Select All",
+    headerRenderer: () => XNode.create("th", null,
+        XNode.create("input", { type: "checkbox", checked: Bind.oneTime((x) => x.allSelected) })),
+    headerClickHandler: (e) => {
+        const s = e.detail.repeater;
+        const items = s.items;
+        if (!(items)) {
+            return;
+        }
+        const selectedItems = s.selectedItems ??= [];
+        if (s.allSelected) {
+            selectedItems.clear();
+            return;
+        }
+        selectedItems.length = 0;
+        selectedItems.push(...items);
+        selectedItems.refresh();
+    },
+    cellRenderer: () => XNode.create(SelectorCheckBox, null)
+};
+export function InputColumn({ type = "text", header, propertyPath }) {
+    const property = getPropertyInfo(propertyPath);
+    return ({
+        header,
+        cellRenderer: (item) => XNode.create(EditableInput, { propertyPath: propertyPath, value: property.getter(item), type: type }),
+    });
+}
+export default class DataGrid extends TableRepeater {
+    columns;
+    orderBySet;
+    constructor(app, e = document.createElement("table")) {
+        super(app, e);
+    }
+    onPropertyChanged(name) {
+        super.onPropertyChanged(name);
+        if (name === "columns") {
+            super.onPropertyChanged("header");
+            super.onPropertyChanged("footer");
+            super.onPropertyChanged("items");
+        }
+        if (name === "orderBy") {
+            if (!this.orderBySet) {
+                this.onPropertyChanged("header");
+            }
+            this.orderBySet = true;
+        }
+    }
+    preCreate() {
+        super.preCreate();
+        this.header = true;
+        this.footer = null;
+        this.element.dataset.dataGrid = "data-grid";
+        this.headerRenderer = (item) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
+            if (x.headerRenderer === void 0) {
+                x.headerRenderer = (_) => {
+                    let order = this.orderBy;
+                    if (order !== void 0) {
+                        if (order === x.headerSort) {
+                            order = true;
+                        }
+                        else if (order === x.headerSortDescending) {
+                            order = false;
+                        }
+                    }
+                    return XNode.create("th", null,
+                        XNode.create("span", { "data-recreate": "true", text: x.header, title: x.header }),
+                        typeof order === "boolean" &&
+                            (order
+                                ? XNode.create("i", { "data-sort": "up", class: "fa-solid fa-arrow-up-short-wide" })
+                                : XNode.create("i", { "data-sort": "down", class: "fa-solid fa-arrow-down-wide-short" })));
+                };
+            }
+            const node = x.headerRenderer(item);
+            const na = node.attributes ??= {};
+            na["data-click-event"] ??= getHeaderEventName(x);
+            if (x.width !== void 0) {
+                na["style-width"] ??= x.width;
+            }
+            else {
+                if (x.maxWidth !== void 0) {
+                    na["style-max-width"] ??= x.maxWidth;
+                }
+                if (x.minWidth !== void 0) {
+                    na["style-min-width"] ??= x.minWidth;
+                }
+            }
+            return node;
+        }) ?? []);
+        this.itemRenderer = (item) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
+            x.ellipsis ??= true;
+            if (x.cellRenderer === void 0) {
+                x.labelPath ??= (i) => i[x.label];
+                if (x.ellipsis) {
+                    x.cellRenderer = (i) => XNode.create("td", { text: x.labelPath(i) });
+                }
+                else {
+                    x.cellRenderer = (i) => XNode.create("td", { text: x.labelPath(i), title: x.labelPath(i) });
+                }
+            }
+            const node = x.cellRenderer?.(item);
+            const na = node.attributes ??= {};
+            if (x.ellipsis) {
+                na["data-ellipsis"] = "true";
+            }
+            na["data-click-event"] ??= getCellEventName(x);
+            if (x.width !== void 0) {
+                na["style-width"] ??= x.width;
+            }
+            else {
+                if (x.maxWidth !== void 0) {
+                    na["style-max-width"] ??= x.maxWidth;
+                }
+                if (x.minWidth !== void 0) {
+                    na["style-min-width"] ??= x.minWidth;
+                }
+            }
+            return node;
+        }) ?? []);
+        this.footerRenderer = (item) => XNode.create("tr", null, ...this.columns?.map?.((x) => {
+            const node = x.footerRenderer?.(item);
+            if (node === void 0) {
+                return node;
+            }
+            const na = node.attributes ??= {};
+            if (na["data-click-event"] === void 0) {
+                na["data-click-event"] = getFooterEventName(x);
+            }
+            return node;
+        }) ?? []);
+    }
+    dispatchHeaderFooterEvent(eventName, type, recreate, originalTarget) {
+        let detail = this[type];
+        const column = this.columns.find((x) => getHeaderEventName(x) === eventName
+            || getFooterEventName(x) === eventName);
+        let order = this.orderBy;
+        const originalOrder = this.orderBy;
+        const isHeader = type === "header";
+        const setOrderBy = isHeader && column.headerSort !== void 0;
+        if (isHeader) {
+            if (setOrderBy) {
+                if (order === column.headerSortDescending) {
+                    order = column.headerSort;
+                }
+                else if (order === column.headerSort) {
+                    order = column.headerSortDescending;
+                }
+                else {
+                    order = column.headerSortDefault ?? column.headerSort;
+                }
+            }
+            detail = {
+                repeater: this,
+                detail,
+                type,
+                order
+            };
+        }
+        const ce = new CustomEvent(eventName ?? `${type}Click`, {
+            detail,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+        });
+        originalTarget.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+        this.invokeHandler(isHeader ? column.headerClickHandler : column.footerClickHandler, ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+        if (setOrderBy && this.orderBy === originalOrder) {
+            this.orderBy = order;
+            ce.executed = true;
+        }
+        if (ce.executed) {
+            this.onPropertyChanged(type);
+        }
+    }
+    dispatchItemEvent(eventName, item, recreate, originalTarget) {
+        const ce = new CustomEvent(eventName ?? "itemClick", {
+            detail: item,
+            bubbles: this.bubbleEvents,
+            cancelable: true
+        });
+        originalTarget.dispatchEvent(ce);
+        if (ce.defaultPrevented) {
+            return;
+        }
+        for (const iterator of this.columns) {
+            if (getCellEventName(iterator) === eventName) {
+                this.invokeHandler(iterator.cellClickHandler, ce);
+                break;
+            }
+        }
+        if (ce.defaultPrevented) {
+            return;
+        }
+        if (eventName === "itemSelect" || eventName === "itemDeselect") {
+            const si = this.selectedItems ??= [];
+            if (si) {
+                const index = si.indexOf(item);
+                if (index === -1) {
+                    if (this.allowMultipleSelection) {
+                        si.add(item);
+                    }
+                    else {
+                        si.set(0, item);
+                    }
+                }
+                else {
+                    si.removeAt(index);
+                }
+            }
+        }
+        if (recreate && ce.executed) {
+            this.refreshItem(item, ce.promise);
+        }
+    }
+    invokeHandler(h, e) {
+        if (!h) {
+            return;
+        }
+        const p = h(e);
+        e.executed = true;
+        if (p && p.then) {
+            if (e.promise) {
+                e.promise = Promise.all([e.promise, p]);
+            }
+            else {
+                e.promise = p;
+            }
+            p?.catch((error) => {
+                if (CancelToken.isCancelled(error)) {
+                    return;
+                }
+                console.error(error);
+            });
+        }
+    }
+}
+__decorate([
+    BindableProperty,
+    __metadata("design:type", Array)
+], DataGrid.prototype, "columns", void 0);
+//# sourceMappingURL=DataGrid.js.map

package/dist-esm/basic/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../../src/basic/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist-esm/basic/DateField.d.ts

@@ -0,0 +1,18 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+import { ICalendarDate } from "./Calendar.js";
+import "./styles/date-field.global.css";
+export default class DateField extends AtomControl {
+    enableTime: boolean;
+    value: Date;
+    enableFunc: (d: ICalendarDate) => boolean;
+    format: (d: Date, displayTime?: boolean) => string;
+    yearStart: any;
+    yearEnd: any;
+    year: number;
+    hour: number;
+    minute: number;
+    prompt: string;
+    constructor(app: any, e?: HTMLButtonElement);
+    protected preCreate(): void;
+}
+//# sourceMappingURL=DateField.d.ts.map

package/dist-esm/basic/DateField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/basic/DateField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAC;AAE/E,OAAiB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAIxD,OAAO,gCAAgC,CAAC;AA+BxC,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,WAAW;IAEvC,UAAU,EAAE,OAAO,CAAC;IAGpB,KAAK,EAAE,IAAI,CAAC;IAGZ,UAAU,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IAG1C,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IAGnD,SAAS,EAAE,GAAG,CAAC;IAGf,OAAO,EAAE,GAAG,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IAMb,IAAI,EAAE,MAAM,CAAC;IAMb,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,EAAE,MAAM,CAAC;gBAEV,GAAG,KAAA,EAAE,CAAC,oBAAmC;IAIrD,SAAS,CAAC,SAAS,IAAI,IAAI;CA2G9B"}

package/dist-esm/basic/DateField.js

@@ -0,0 +1,158 @@
+import { __decorate, __metadata } from "tslib";
+import Bind from "@web-atoms/core/dist/core/Bind.js";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
+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";
+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 },
+    ];
+}
+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;
+}
+export default class DateField extends AtomControl {
+    enableTime;
+    value;
+    enableFunc;
+    format;
+    yearStart;
+    yearEnd;
+    year;
+    hour;
+    minute;
+    prompt;
+    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 {
+            type;
+            time;
+            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);
+            }
+        }
+        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

package/dist-esm/basic/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../src/basic/DateField.tsx"],"names":[],"mappings":"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"}

package/dist-esm/basic/DropDown.d.ts

@@ -0,0 +1,22 @@
+import XNode from "@web-atoms/core/dist/core/XNode.js";
+import AtomRepeater, { Match } from "./AtomRepeater.js";
+import "./styles/drop-down.global.css";
+export default class DropDown<T = any> extends AtomRepeater<T> {
+    "event-selection-changed"?: (e: CustomEvent) => void;
+    "data-alignment"?: "bottom-right" | "bottom-left";
+    disableSearch: boolean;
+    popupSuggestions: boolean;
+    search: string;
+    prompt: string;
+    suggestionPrompt: string;
+    labelPath: (item: T) => string;
+    match: Match<any>;
+    suggestionRenderer: (item: T) => XNode;
+    private isPopupOpen;
+    updateItems(container?: HTMLElement): void;
+    onPropertyChanged(name: string): void;
+    protected preCreate(): void;
+    protected openPopup(e?: Event): Promise<void>;
+    protected updateClasses(): void;
+}
+//# sourceMappingURL=DropDown.d.ts.map

package/dist-esm/basic/DropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../src/basic/DropDown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,oCAAoC,CAAC;AACvD,OAAO,YAAY,EAAE,EACA,KAAK,EAA2B,MAAM,mBAAmB,CAAC;AAE/E,OAAO,+BAA+B,CAAC;AAEvC,MAAM,CAAC,OAAO,OAAO,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IAEnD,yBAAyB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAErD,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IAElD,aAAa,EAAE,OAAO,CAAC;IAGvB,gBAAgB,EAAE,OAAO,CAAC;IAG1B,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,EAAE,MAAM,CAAC;IAGf,gBAAgB,EAAE,MAAM,CAAC;IAGzB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAG/B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAGlB,kBAAkB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC;IAE9C,OAAO,CAAC,WAAW,CAAS;IAErB,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI;IAI1C,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAmB5C,SAAS,CAAC,SAAS,IAAI,IAAI;cAgBX,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK;IAsCnC,SAAS,CAAC,aAAa,IAAI,IAAI;CA0BlC"}

package/dist-esm/basic/DropDown.js

@@ -0,0 +1,122 @@
+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";
+export default class DropDown extends AtomRepeater {
+    "event-selection-changed";
+    "data-alignment";
+    disableSearch;
+    popupSuggestions;
+    search;
+    prompt;
+    suggestionPrompt;
+    labelPath;
+    match;
+    suggestionRenderer;
+    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;
+        }
+    }
+    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;
+        }
+        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;
+        }
+    }
+    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" })));
+    }
+}
+__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

package/dist-esm/basic/DropDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/basic/DropDown.tsx"],"names":[],"mappings":"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"}