jsl-ui 9.18.3 → 9.19.0

package/lib/components/date-range/DateRangeComponent.js

@@ -0,0 +1,136 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./DateRangeStyle.scss";
+import { noUiSlider } from "../slider/nouislider";
+import { DateComponent } from "../date/DateComponent";
+import { date } from "../../core/date";
+import { EventHandler } from "../../interaction/eventhandler";
+var DateRangeComponent = /** @class */ (function () {
+    function DateRangeComponent(o) {
+        var _this = this;
+        this.State = { currentMin: null, currentMax: null };
+        this.manualChange = false;
+        this.options = __assign({}, o);
+        if (this.options.minValue == null) {
+            this.options.minValue = this.options.min;
+        }
+        if (this.options.maxValue == null) {
+            this.options.maxValue = this.options.max;
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        this.minDate = new DateComponent({
+            min: this.options.min,
+            max: this.options.max,
+            value: this.options.minValue,
+            style: "width:6rem;",
+            onChange: function (val) {
+                if (_this.manualChange) {
+                    return;
+                }
+                _this.manualChange = true;
+                var min = _this.minDate.getValueAsDate();
+                var max = _this.maxDate.getValueAsDate();
+                _this.slider.set([date.getDaysBetween(_this.options.min, min), date.getDaysBetween(_this.options.min, max)]);
+                _this.manualChange = false;
+                _this.triggerChange();
+            }
+        });
+        this.maxDate = new DateComponent({
+            min: this.options.min,
+            max: this.options.max,
+            value: this.options.maxValue,
+            style: "width:6rem;text-align:right;",
+            onChange: function (val) {
+                if (_this.manualChange) {
+                    return;
+                }
+                _this.manualChange = true;
+                var min = _this.minDate.getValueAsDate();
+                var max = _this.maxDate.getValueAsDate();
+                _this.slider.set([date.getDaysBetween(_this.options.min, min), date.getDaysBetween(_this.options.min, max)]);
+                _this.manualChange = false;
+                _this.triggerChange();
+            }
+        });
+    }
+    DateRangeComponent.prototype.render = function () {
+        var _a;
+        return {
+            tag: "div", attr: { style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
+                {
+                    tag: "div", children: [
+                        this.minDate,
+                        { tag: "span", content: " - " },
+                        this.maxDate
+                    ]
+                }, {
+                    tag: "div", children: [
+                        { tag: "div", attr: { class: "slider-div" } }
+                    ]
+                }
+            ]
+        };
+    };
+    DateRangeComponent.prototype.onCreate = function (node) {
+        var _this = this;
+        var diffInDays = date.getDaysBetween(this.options.min, this.options.max);
+        if (this.options.increment !== "days") {
+            console.warn(" only days as increments are currently supported");
+        }
+        var min = 0;
+        var max = diffInDays;
+        this.slider = noUiSlider.create(node.dom.querySelector(".slider-div"), {
+            start: [date.getDaysBetween(this.options.min, this.options.minValue),
+                date.getDaysBetween(this.options.min, this.options.maxValue)],
+            connect: true,
+            step: 1,
+            range: {
+                min: min,
+                max: max
+            },
+        });
+        this.slider.on("update", function (values) {
+            if (_this.manualChange) {
+                return;
+            }
+            _this.manualChange = true;
+            _this.State.currentMin = values[0];
+            _this.State.currentMax = values[1];
+            var minVal = date.addDays(_this.options.min, parseFloat(values[0]));
+            var maxVal = date.addDays(_this.options.min, parseFloat(values[1]));
+            _this.minDate.getRef().setState({ selectedDate: minVal });
+            _this.maxDate.getRef().setState({ selectedDate: maxVal });
+            _this.manualChange = false;
+            _this.triggerChange();
+        });
+    };
+    DateRangeComponent.prototype.onRemove = function () {
+        if (this.slider != null) {
+            this.slider.destroy();
+            this.slider = null;
+        }
+    };
+    DateRangeComponent.prototype.getMin = function () {
+        return this.minDate.getValueAsDate();
+    };
+    DateRangeComponent.prototype.getMax = function () {
+        return this.maxDate.getValueAsDate();
+    };
+    DateRangeComponent.prototype.triggerChange = function () {
+        this.options.onChange.notify({
+            minValue: this.getMin(),
+            maxValue: this.getMin()
+        });
+    };
+    return DateRangeComponent;
+}());
+export { DateRangeComponent };

package/lib/components/date-range/DateRangeStyle.scss

@@ -0,0 +1,12 @@
+.date-range-comp {
+    display: inline-block;
+
+    .slider-div {
+        margin: 0.5rem 0.9rem;
+    }
+
+    // .noUi-handle:before, .noUi-handle:after {
+    //     width: 1rem;
+    //     height: 1rem;
+    // }
+}

package/lib/components/date-time/DateTimeComponent.d.ts

@@ -0,0 +1,15 @@
+import "./DateTimeStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDateComponentOptions } from "../date/DateComponent";
+import { ITimeComponentOptions } from "../time/TimeComponent";
+export interface IDateTimeComponentOptions<T> extends IDateComponentOptions<T>, ITimeComponentOptions<T> {
+}
+export declare class DateTimeComponent<T = any> implements IJSLComponent {
+    private options;
+    private dateComp;
+    private timeComp;
+    constructor(options: IDateTimeComponentOptions<T>);
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsDate(): Date;
+}

package/lib/components/date-time/DateTimeComponent.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./DateTimeStyle.scss";
+import { EventHandler } from "../../interaction/eventhandler";
+import { DateComponent } from "../date/DateComponent";
+import { TimeComponent } from "../time/TimeComponent";
+var DateTimeComponent = /** @class */ (function () {
+    function DateTimeComponent(options) {
+        var _this = this;
+        if (options.bindMode && options.bindMode !== "toModel") {
+            throw new Error("Currently DateTimeComponent only supports toModel as bindMode");
+        }
+        this.options = __assign({}, options);
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        var optionsCopy = __assign({}, options);
+        optionsCopy.bindTo = null;
+        optionsCopy.property = null;
+        optionsCopy.converter = null;
+        optionsCopy.onChange = function () {
+            var _a;
+            var val = _this.getValueAsDate();
+            if (_this.options.bindTo && options.property) {
+                _this.options.bindTo[options.property] =
+                    ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(val) : val;
+            }
+            _this.options.onChange.notify(val);
+        };
+        this.dateComp = new DateComponent(optionsCopy);
+        this.timeComp = new TimeComponent(optionsCopy);
+    }
+    DateTimeComponent.prototype.render = function () {
+        return { tag: "div", attr: { class: "date-time-comp" }, children: [
+                this.dateComp, this.timeComp
+            ] };
+    };
+    DateTimeComponent.prototype.getValue = function () {
+        return this.dateComp.getValue() + " " + this.timeComp.getValue();
+    };
+    DateTimeComponent.prototype.getValueAsDate = function () {
+        return this.timeComp.getValueAsDate(this.dateComp.getValueAsDate());
+    };
+    return DateTimeComponent;
+}());
+export { DateTimeComponent };

package/lib/components/date-time/DateTimeStyle.scss

@@ -0,0 +1,7 @@
+.date-time-comp {
+    display: inline-block;
+}
+
+.date-time-comp input:first-child {
+    width:6em;
+}

package/lib/components/dialog/DialogComponent.d.ts

@@ -0,0 +1,67 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDialogOptions, JSLDialog } from "../../ui/dialog";
+import { IMoveableOptions } from "../../interaction/moveable";
+import { IResizeOptions } from "../../interaction/resizable";
+export interface IDialogComponentOptions extends IDialogOptions {
+    width?: string;
+    minWidth?: string;
+    minHeight?: string;
+    height?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    header: IJSLVNode | string | IJSLComponent;
+    content: IJSLVNode | string | IJSLComponent;
+    footer: IJSLVNode | string | IJSLComponent;
+    showCloseButton?: boolean;
+    allowMove?: boolean;
+    allowResize?: boolean;
+    resizeOptions?: IResizeOptions;
+    moveOptions?: IMoveableOptions;
+    class?: string;
+}
+export interface IDialogButtonOptions {
+    content?: string;
+    class?: string;
+    onClick?: () => void | boolean | Promise<any>;
+    raw?: boolean;
+}
+export declare class DialogComponent implements IJSLComponent {
+    static Button(options: IDialogButtonOptions): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static Ok(onClick?: () => void | boolean | Promise<any>): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static Cancel(): {
+        tag: string;
+        attr: {
+            class: string;
+            click: () => Promise<void>;
+        };
+        content: string;
+        raw: boolean;
+    };
+    static show(options: IDialogComponentOptions): DialogComponent;
+    private static lastRenderedDlg;
+    private closeIcon;
+    private resizeHandle;
+    private ref;
+    private options;
+    constructor(options: IDialogComponentOptions);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    getRef(): JSLDialog;
+    private toNode;
+}

package/lib/components/dialog/DialogComponent.js

@@ -0,0 +1,242 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { JSLRender } from "jsl-render";
+import { Dialog } from "../../ui/dialog";
+import { Moveable } from "../../interaction/moveable";
+import { EventHandler } from "../../interaction/eventhandler";
+import { Resizable } from "../../interaction/resizable";
+import { UILang } from "../../core/lang";
+var DialogComponent = /** @class */ (function () {
+    function DialogComponent(options) {
+        var _this = this;
+        this.closeIcon = {
+            tag: "div", content: "✖" /*"🗙"*/, attr: {
+                class: "dlg-close-btn", click: function () {
+                    _this.ref.close();
+                }
+            }
+        };
+        this.resizeHandle = {
+            tag: "div", attr: { class: "dlg-res-handle rs-b rs-r" }
+        };
+        this.options = __assign({ maxHeight: "calc(100vh - 7.5rem)", width: "50vw" }, options);
+    }
+    DialogComponent.Button = function (options) {
+        var _this = this;
+        var _a, _b, _c;
+        var res = {
+            tag: "button", attr: {
+                class: "jsl-button " + ((_a = options.class) !== null && _a !== void 0 ? _a : ""),
+                click: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var clickRes, isPromise;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!(options.onClick != null)) return [3 /*break*/, 3];
+                                clickRes = options.onClick();
+                                isPromise = clickRes && typeof clickRes.then === "function" && typeof clickRes.catch === "function";
+                                if (!isPromise) return [3 /*break*/, 2];
+                                return [4 /*yield*/, clickRes];
+                            case 1:
+                                clickRes = _a.sent();
+                                _a.label = 2;
+                            case 2:
+                                if (clickRes === false) {
+                                    return [2 /*return*/];
+                                }
+                                _a.label = 3;
+                            case 3:
+                                if (DialogComponent.lastRenderedDlg != null) {
+                                    DialogComponent.lastRenderedDlg.getRef().close();
+                                }
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }
+            }, content: (_b = options.content) !== null && _b !== void 0 ? _b : "OK", raw: (_c = options.raw) !== null && _c !== void 0 ? _c : false
+        };
+        return res;
+    };
+    DialogComponent.Ok = function (onClick) {
+        return DialogComponent.Button({ content: UILang.core.Ok, onClick: onClick, class: "dlg-ok-btn" });
+    };
+    DialogComponent.Cancel = function () {
+        return DialogComponent.Button({ content: UILang.core.Cancel, class: "dlg-cancel-btn jsl-button-outline" });
+    };
+    DialogComponent.show = function (options) {
+        var container = document.createElement("div");
+        document.body.appendChild(container);
+        var oldRenderer = JSLRender.lastCreatedRenderer;
+        var oldLastDlg = DialogComponent.lastRenderedDlg;
+        var renderer = new JSLRender(container, oldRenderer != null);
+        if (oldRenderer != null) {
+            JSLRender.lastCreatedRenderer = renderer;
+        }
+        var o = __assign({}, options);
+        if (o.autoOpen == null) {
+            o.autoOpen = true;
+        }
+        o.onClose = function () {
+            if (options.onClose) {
+                if (options.onClose() === false) {
+                    return;
+                }
+            }
+            document.body.removeChild(container);
+            JSLRender.lastCreatedRenderer = oldRenderer;
+            if (oldRenderer != null) {
+                oldRenderer.refresh();
+            }
+            DialogComponent.lastRenderedDlg = oldLastDlg;
+        };
+        var dlg = new DialogComponent(o);
+        DialogComponent.lastRenderedDlg = dlg;
+        renderer.render(dlg);
+        return dlg;
+    };
+    DialogComponent.prototype.render = function () {
+        var header = this.toNode(this.options.header);
+        var body = this.toNode(this.options.content);
+        var footer = this.toNode(this.options.footer);
+        var styleW = "";
+        var styleH = "";
+        if (this.options.width != null) {
+            styleW += "width:" + this.options.width + ";";
+        }
+        if (this.options.minWidth != null) {
+            styleW += "min-width:" + this.options.minWidth + ";";
+        }
+        if (this.options.maxWidth != null) {
+            styleW += "max-width:" + this.options.maxWidth + ";";
+        }
+        if (this.options.height != null) {
+            styleH += "height:" + this.options.height + ";";
+        }
+        if (this.options.minHeight != null) {
+            styleH += "min-height:" + this.options.minHeight + ";";
+        }
+        if (this.options.maxHeight != null) {
+            styleH += "max-height:" + this.options.maxHeight + ";";
+        }
+        var headerStyle = this.options.allowMove ? "cursor:move" : undefined;
+        return {
+            tag: "div", attr: {
+                class: "jsl-dialog-overlay", wheel: function (e) {
+                    e.preventDefault();
+                }
+            }, children: [
+                {
+                    tag: "div", attr: {
+                        class: "jsl-dialog " + (this.options.class || ""), style: styleW, wheel: function (e) {
+                            e.stopImmediatePropagation();
+                            e.stopPropagation();
+                        }
+                    }, children: [
+                        {
+                            tag: "div", attr: { class: "dlg-header", style: headerStyle },
+                            children: this.options.showCloseButton ? [header, this.closeIcon] : [header]
+                        },
+                        { tag: "div", attr: { class: "dlg-body", style: styleH }, children: [body] },
+                        {
+                            tag: "div", attr: { class: "dlg-footer" },
+                            children: [footer]
+                        },
+                        this.options.allowResize ? this.resizeHandle : undefined
+                    ]
+                }
+            ]
+        };
+    };
+    DialogComponent.prototype.onCreate = function (node) {
+        this.ref = Dialog(node.dom, this.options);
+        if (this.options.allowMove) {
+            Moveable(this.ref.getOverlay(), __assign({ onStart: new EventHandler(function (e) {
+                    var headerWasClicked = false;
+                    var parent = e.evt.target;
+                    while (parent != null && !parent.classList.contains("jsl-dialog-overlay")) {
+                        if (parent.classList.contains("dlg-header")) {
+                            headerWasClicked = true;
+                            break;
+                        }
+                        parent = parent.parentElement;
+                    }
+                    if (headerWasClicked) {
+                        var rect = e.target.getBoundingClientRect();
+                        e.target.style.transform = "translate(0, 0)";
+                        e.target.style.left = rect.left + "px";
+                        e.target.style.top = rect.top + "px";
+                    }
+                    else {
+                        e.cancelEvent();
+                    }
+                }) }, this.options.moveOptions));
+        }
+        if (this.options.allowResize) {
+            var dlgEl = this.ref.getOverlay().querySelector(".jsl-dialog");
+            Resizable(dlgEl, this.options.resizeOptions);
+            var rect = dlgEl.getBoundingClientRect();
+            dlgEl.style.transform = "translate(0, 0)";
+            dlgEl.style.left = rect.left + "px";
+            dlgEl.style.top = rect.top + "px";
+            var bodyEl = dlgEl.querySelector(".dlg-body");
+            var bodyRect = bodyEl.getBoundingClientRect();
+            bodyEl.style.height = "calc(100% - " + (rect.height - bodyRect.height) + "px)";
+        }
+    };
+    DialogComponent.prototype.getRef = function () {
+        return this.ref;
+    };
+    DialogComponent.prototype.toNode = function (content) {
+        if (typeof content === "string") {
+            return { tag: "div", content: content };
+        }
+        return content;
+    };
+    return DialogComponent;
+}());
+export { DialogComponent };

package/lib/components/drop-down/DropDownComponent.d.ts

@@ -0,0 +1,27 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDropDownOptions, IDropDown } from "../../ui/drop.down";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface IDropDownComponentOptions<T = any> extends IDropDownOptions {
+    class?: string;
+    placeholder?: string;
+    /**
+     * @deprecated
+     */
+    onSelect?: (value: string | string[]) => void;
+    onChange?: EventHandler<string | string[]> | ((value?: string | string[]) => void);
+    value?: string | string[];
+    bindTo?: T;
+    property?: keyof T;
+    converter?: IDataConverter<any, string | string[]>;
+    enabled?: boolean;
+}
+export declare class DropDownComponent<T = any> implements IJSLComponent {
+    private ref;
+    private options;
+    constructor(options: IDropDownComponentOptions<T>);
+    render(): IJSLVNode;
+    getRef(): IDropDown;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+}

package/lib/components/drop-down/DropDownComponent.js

@@ -0,0 +1,74 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { DropDown } from "../../ui/drop.down";
+import { EventHandler } from "../../interaction/eventhandler";
+var DropDownComponent = /** @class */ (function () {
+    function DropDownComponent(options) {
+        var _a;
+        this.options = __assign({ enabled: true }, options);
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+    }
+    DropDownComponent.prototype.render = function () {
+        return {
+            tag: "select"
+        };
+    };
+    DropDownComponent.prototype.getRef = function () {
+        return this.ref;
+    };
+    DropDownComponent.prototype.onCreate = function (node) {
+        var _this = this;
+        this.ref = DropDown(node.dom, this.options);
+        if (!this.options.enabled) {
+            this.ref.disable();
+        }
+        node.dom.parentElement.classList.add(this.options.class);
+        if (this.options.width) {
+            node.dom.parentElement.style.display = "inline-block";
+        }
+        node.dom.addEventListener("change", function (evt) {
+            var _a;
+            var value;
+            if (_this.options.multiple) {
+                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map(function (v) { return v.value; });
+            }
+            else {
+                value = node.dom.value;
+            }
+            if (_this.options.bindTo != null && _this.options.property != null) {
+                _this.options.bindTo[_this.options.property] =
+                    ((_a = _this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? _this.options.converter.toData(value) : value;
+            }
+            if (_this.options.onSelect != null) {
+                _this.options.onSelect(value);
+            }
+            if (_this.options.onChange != null) {
+                _this.options.onChange.notify(value);
+            }
+        });
+        if (this.options.value != null) {
+            this.ref.setValue(this.options.value);
+        }
+    };
+    DropDownComponent.prototype.onRemove = function () {
+        if (this.ref != null) {
+            this.ref.destroy();
+        }
+    };
+    return DropDownComponent;
+}());
+export { DropDownComponent };

package/lib/components/expander/ExpanderComponent.d.ts

@@ -0,0 +1,27 @@
+import "./ExpanderStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface IExpanderOptions {
+    header: IJSLVNode | string | IJSLComponent;
+    body: IJSLVNode | string | IJSLComponent;
+    expanded?: boolean;
+    onToggle?: (isExpanding: boolean) => void | boolean;
+    expandedIcon?: IJSLVNode;
+    collapsedIcon?: IJSLVNode;
+    isToggleOnHeader?: boolean;
+    class?: string;
+    style?: string;
+    iconSize?: string;
+}
+export declare class ExpanderComponent implements IJSLComponent {
+    State: {
+        expanded: boolean;
+        waitingForAnimation: boolean;
+    };
+    private options;
+    constructor(optionsOrHeader: IExpanderOptions | IJSLVNode | string | IJSLComponent, body?: IJSLVNode | string | IJSLComponent, expanded?: boolean);
+    getIcon(expanded: boolean): IJSLVNode;
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private toggleExpand;
+    private toNode;
+}