jsl-ui 10.0.5 → 10.1.0

package/lib/components/dropdown-menu/DropdownMenuComponent.js

@@ -0,0 +1,399 @@
+import "./DropdownMenuStyle.scss";
+import { JSLRender } from "jsl-render";
+import { helper } from "../../core/helper";
+/** A button-like trigger that opens an anchored, keyboard-accessible menu. */
+export class DropdownMenuComponent {
+    constructor(options) {
+        this.State = { id: helper.newDomGuid(), open: false };
+        this.options = {
+            width: "12rem",
+            height: "max-content",
+            maxWidth: "calc(100vw - 1rem)",
+            maxHeight: "calc(100vh - 1rem)",
+            closeOnClick: false,
+            placement: "bottom-start",
+            showIndicator: true,
+            children: [],
+            ...options
+        };
+    }
+    isEqual(node) {
+        return Object.getPrototypeOf(this) === Object.getPrototypeOf(node);
+    }
+    render() {
+        var _a, _b;
+        this.State.owner = this;
+        const tag = (_a = this.options.tag) !== null && _a !== void 0 ? _a : "button";
+        const isButton = tag.toLowerCase() === "button";
+        const disabled = this.options.disabled === true;
+        const customContent = typeof this.options.content !== "string";
+        return {
+            tag,
+            attr: {
+                id: this.State.id + "-trigger",
+                class: ["jsl-dropdown-trigger", this.options.showIndicator ? "" : "jsl-dropdown-trigger--no-indicator", this.options.class].filter(Boolean).join(" "),
+                style: this.options.style,
+                title: this.options.title,
+                type: isButton ? (_b = this.options.type) !== null && _b !== void 0 ? _b : "button" : undefined,
+                disabled: isButton && disabled ? "disabled" : undefined,
+                role: isButton ? undefined : "button",
+                tabindex: !isButton ? (disabled ? "-1" : "0") : undefined,
+                "aria-disabled": !isButton && disabled ? "true" : undefined,
+                "aria-label": this.options.ariaLabel,
+                "aria-haspopup": "menu",
+                "aria-expanded": String(this.State.open),
+                "aria-controls": this.State.id + "-menu",
+                click: (event) => this.onTriggerClick(event),
+                keydown: (event) => this.onTriggerKeydown(event)
+            },
+            content: typeof this.options.content === "string" ? this.options.content : undefined,
+            raw: this.options.rawContent,
+            children: customContent ? [this.options.content] : undefined
+        };
+    }
+    onCreate(node) {
+        this.State.trigger = node.dom;
+        this.State.owner = this;
+    }
+    onUpdate(node) {
+        this.State.trigger = node.dom;
+        this.State.owner = this;
+        this.syncTrigger();
+    }
+    onRemove() {
+        this.closeInternal(false);
+        this.State.trigger = undefined;
+        this.State.owner = undefined;
+    }
+    /** Open the menu and move focus to its first or last enabled item. */
+    open(initialFocus = "first") {
+        var _a, _b, _c;
+        if (this.State.open || this.options.disabled || !this.State.trigger) {
+            return;
+        }
+        if (((_b = (_a = this.options).onOpen) === null || _b === void 0 ? void 0 : _b.call(_a, this.options)) === false) {
+            return;
+        }
+        const state = this.State;
+        state.open = true;
+        this.syncTrigger();
+        const portal = document.createElement("div");
+        portal.className = "jsl-dropdown-portal";
+        this.inheritTheme(portal);
+        const dialogHost = state.trigger.closest("dialog[open]");
+        (dialogHost !== null && dialogHost !== void 0 ? dialogHost : document.body).appendChild(portal);
+        state.portal = portal;
+        state.renderer = new JSLRender(portal, false);
+        state.renderer.render(this.menuNode());
+        state.menu = portal.querySelector("[role=menu]");
+        this.prepareMenuItems();
+        this.positionMenu();
+        const outsidePointer = (event) => {
+            var _a, _b, _c;
+            const target = event.target;
+            if (!((_a = state.trigger) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = state.menu) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                (_c = state.owner) === null || _c === void 0 ? void 0 : _c.closeInternal(false);
+            }
+        };
+        const outsideFocus = (event) => {
+            var _a, _b, _c;
+            const target = event.target;
+            if (!((_a = state.trigger) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = state.menu) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                (_c = state.owner) === null || _c === void 0 ? void 0 : _c.closeInternal(false);
+            }
+        };
+        const reposition = () => { var _a; return (_a = state.owner) === null || _a === void 0 ? void 0 : _a.positionMenu(); };
+        document.addEventListener("pointerdown", outsidePointer, true);
+        document.addEventListener("focusin", outsideFocus, true);
+        document.addEventListener("scroll", reposition, true);
+        window.addEventListener("resize", reposition);
+        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(reposition);
+        if (state.trigger) {
+            observer === null || observer === void 0 ? void 0 : observer.observe(state.trigger);
+        }
+        if (state.menu) {
+            observer === null || observer === void 0 ? void 0 : observer.observe(state.menu);
+        }
+        state.cleanup = () => {
+            document.removeEventListener("pointerdown", outsidePointer, true);
+            document.removeEventListener("focusin", outsideFocus, true);
+            document.removeEventListener("scroll", reposition, true);
+            window.removeEventListener("resize", reposition);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (state.typeaheadTimer != null) {
+                window.clearTimeout(state.typeaheadTimer);
+            }
+        };
+        if (initialFocus !== "none") {
+            const items = this.menuItems();
+            const item = initialFocus === "last" ? items[items.length - 1] : items[0];
+            (_c = (item !== null && item !== void 0 ? item : state.menu)) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }
+    toggle() {
+        if (this.State.open) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Close the menu and restore focus to its trigger. */
+    close() {
+        this.closeInternal(true);
+    }
+    menuNode() {
+        var _a, _b;
+        const style = [
+            "position:fixed", "left:0", "top:0", "width:" + this.options.width,
+            "height:" + this.options.height, "max-width:" + this.options.maxWidth,
+            "max-height:" + this.options.maxHeight, this.options.menuStyle
+        ].filter(Boolean).join(";");
+        return {
+            tag: "div",
+            attr: {
+                id: this.State.id + "-menu",
+                class: "jsl-dropdown-menu " + ((_a = this.options.menuClass) !== null && _a !== void 0 ? _a : ""),
+                style,
+                role: "menu",
+                tabindex: "-1",
+                "aria-label": (_b = this.options.menuLabel) !== null && _b !== void 0 ? _b : "Actions",
+                keydown: (event) => { var _a; return ((_a = this.State.owner) !== null && _a !== void 0 ? _a : this).onMenuKeydown(event); },
+                click: () => {
+                    var _a, _b;
+                    const owner = (_a = this.State.owner) !== null && _a !== void 0 ? _a : this;
+                    if (owner.options.closeOnClick) {
+                        const active = document.activeElement;
+                        owner.closeInternal(!!((_b = owner.State.menu) === null || _b === void 0 ? void 0 : _b.contains(active)));
+                    }
+                    return false;
+                }
+            },
+            children: [{
+                    tag: "div",
+                    attr: { class: "dd-menu-comp" },
+                    children: this.options.children
+                }]
+        };
+    }
+    onTriggerClick(event) {
+        event.preventDefault();
+        if (!this.options.disabled) {
+            this.toggle();
+        }
+        return false;
+    }
+    onTriggerKeydown(event) {
+        var _a;
+        if (this.options.disabled) {
+            return false;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.open(event.key === "ArrowUp" ? "last" : "first");
+            return false;
+        }
+        const isNativeButton = ((_a = this.options.tag) !== null && _a !== void 0 ? _a : "button").toLowerCase() === "button";
+        if (!isNativeButton && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            this.toggle();
+        }
+        else if (event.key === "Escape" && this.State.open) {
+            event.preventDefault();
+            this.close();
+        }
+        return false;
+    }
+    onMenuKeydown(event) {
+        var _a;
+        const items = this.menuItems();
+        const active = document.activeElement;
+        const index = items.indexOf(active);
+        let next = -1;
+        switch (event.key) {
+            case "ArrowDown":
+                next = index < 0 ? 0 : (index + 1) % items.length;
+                break;
+            case "ArrowUp":
+                next = index < 0 ? items.length - 1 : (index - 1 + items.length) % items.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = items.length - 1;
+                break;
+            case "Escape":
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                return false;
+            case "Tab":
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveFocusFromTrigger(event.shiftKey);
+                return false;
+            case "Enter":
+                if (active && active.tagName !== "BUTTON" && !(active.tagName === "A" && active.hasAttribute("href")) &&
+                    ((_a = active.getAttribute("role")) === null || _a === void 0 ? void 0 : _a.startsWith("menuitem"))) {
+                    event.preventDefault();
+                    active.click();
+                }
+                return false;
+            case " ":
+                if ((active === null || active === void 0 ? void 0 : active.tagName) !== "BUTTON") {
+                    event.preventDefault();
+                    active === null || active === void 0 ? void 0 : active.click();
+                }
+                return false;
+            default:
+                if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                    this.typeahead(event.key, index);
+                    event.preventDefault();
+                }
+                return false;
+        }
+        if (items.length) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusMenuItem(items[next]);
+        }
+        return false;
+    }
+    prepareMenuItems() {
+        const menu = this.State.menu;
+        if (!menu) {
+            return;
+        }
+        const selector = "button, a, [role^='menuitem'], [data-menu-item]";
+        menu.querySelectorAll(selector).forEach(item => {
+            const role = item.getAttribute("role");
+            if (!role || role === "button" || role === "link") {
+                item.setAttribute("role", "menuitem");
+            }
+            item.setAttribute("tabindex", "-1");
+        });
+    }
+    menuItems() {
+        const menu = this.State.menu;
+        if (!menu) {
+            return [];
+        }
+        return Array.from(menu.querySelectorAll("[role^='menuitem']"))
+            .filter(item => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true" &&
+            item.getAttribute("hidden") == null && item.getClientRects().length > 0);
+    }
+    focusMenuItem(item) {
+        const menu = this.State.menu;
+        if (!menu) {
+            return;
+        }
+        menu.querySelectorAll("[role^='menuitem']").forEach(entry => entry.setAttribute("tabindex", "-1"));
+        item.setAttribute("tabindex", "0");
+        item.focus();
+    }
+    typeahead(character, currentIndex) {
+        var _a;
+        const state = this.State;
+        state.typeahead = ((_a = state.typeahead) !== null && _a !== void 0 ? _a : "") + character.toLocaleLowerCase();
+        if (state.typeaheadTimer != null) {
+            window.clearTimeout(state.typeaheadTimer);
+        }
+        state.typeaheadTimer = window.setTimeout(() => { state.typeahead = ""; }, 500);
+        const items = this.menuItems();
+        for (let offset = 1; offset <= items.length; offset++) {
+            const index = (currentIndex + offset + items.length) % items.length;
+            const item = items[index];
+            const label = (item.getAttribute("aria-label") || item.textContent || "").trim().toLocaleLowerCase();
+            if (label.startsWith(state.typeahead)) {
+                this.focusMenuItem(item);
+                return;
+            }
+        }
+    }
+    moveFocusFromTrigger(backward) {
+        var _a;
+        const trigger = this.State.trigger;
+        const menu = this.State.menu;
+        const selector = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+        const candidates = Array.from(document.querySelectorAll(selector)).filter(element => !(menu === null || menu === void 0 ? void 0 : menu.contains(element)) && element.getAttribute("aria-disabled") !== "true" &&
+            !element.closest("[hidden]") && element.getClientRects().length > 0);
+        const current = candidates.indexOf(trigger);
+        const target = candidates[current + (backward ? -1 : 1)];
+        this.closeInternal(false);
+        (_a = (target !== null && target !== void 0 ? target : trigger)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    positionMenu() {
+        var _a, _b, _c, _d, _e;
+        const menu = this.State.menu;
+        const trigger = this.State.trigger;
+        if (!menu || !trigger) {
+            return;
+        }
+        const rect = trigger.getBoundingClientRect();
+        const width = menu.getBoundingClientRect().width;
+        const height = menu.getBoundingClientRect().height;
+        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        const placement = (_a = this.options.placement) !== null && _a !== void 0 ? _a : "bottom-start";
+        const topPlacement = placement.startsWith("top");
+        const endPlacement = placement.endsWith("end");
+        const rtl = getComputedStyle(trigger).direction === "rtl";
+        let top = (topPlacement ? rect.top - height : rect.bottom) + ((_b = this.options.offsetY) !== null && _b !== void 0 ? _b : 0);
+        let left = (endPlacement !== rtl ? rect.right - width : rect.left) + ((_c = this.options.offsetX) !== null && _c !== void 0 ? _c : 0);
+        if (!topPlacement && top + height > viewportHeight - 8 && rect.top - height >= 8) {
+            top = rect.top - height + ((_d = this.options.offsetY) !== null && _d !== void 0 ? _d : 0);
+        }
+        else if (topPlacement && top < 8 && rect.bottom + height <= viewportHeight - 8) {
+            top = rect.bottom + ((_e = this.options.offsetY) !== null && _e !== void 0 ? _e : 0);
+        }
+        left = Math.max(8, Math.min(left, viewportWidth - width - 8));
+        top = Math.max(8, Math.min(top, viewportHeight - height - 8));
+        menu.style.left = left + "px";
+        menu.style.top = top + "px";
+    }
+    inheritTheme(portal) {
+        const trigger = this.State.trigger;
+        if (!trigger) {
+            return;
+        }
+        const computed = getComputedStyle(trigger);
+        portal.style.color = computed.color;
+        portal.style.font = computed.font;
+        for (let index = 0; index < computed.length; index++) {
+            const property = computed.item(index);
+            if (property.startsWith("--jsl-")) {
+                portal.style.setProperty(property, computed.getPropertyValue(property));
+            }
+        }
+    }
+    syncTrigger() {
+        var _a;
+        (_a = this.State.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", String(this.State.open));
+    }
+    closeInternal(restoreFocus) {
+        var _a;
+        const state = this.State;
+        if (!state.open && !state.portal) {
+            return;
+        }
+        const trigger = state.trigger;
+        const renderer = state.renderer;
+        const portal = state.portal;
+        state.open = false;
+        (_a = state.cleanup) === null || _a === void 0 ? void 0 : _a.call(state);
+        state.cleanup = undefined;
+        state.renderer = undefined;
+        state.portal = undefined;
+        state.menu = undefined;
+        state.typeahead = "";
+        this.syncTrigger();
+        renderer === null || renderer === void 0 ? void 0 : renderer.render({ tag: "div" });
+        portal === null || portal === void 0 ? void 0 : portal.remove();
+        if (restoreFocus) {
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+        }
+    }
+}
+export { DropdownMenuComponent as DropdownMenuButtonComponent };

package/lib/components/dropdown-menu/DropdownMenuStyle.scss

@@ -0,0 +1,48 @@
+@import "../../ui/theme.css";
+
+.jsl-dropdown-trigger:not(.jsl-dropdown-trigger--no-indicator)::after {
+    content: "";
+    display: inline-block;
+    flex: 0 0 auto;
+    width: .42em;
+    height: .42em;
+    margin-inline-start: .55em;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: translateY(-.12em) rotate(45deg);
+    transition: transform .15s ease;
+}
+.jsl-dropdown-trigger[aria-expanded="true"]::after { transform: translateY(.08em) rotate(225deg); }
+.jsl-dropdown-portal { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
+.jsl-dropdown-menu {
+    box-sizing: border-box;
+    overflow: auto;
+    padding: .2rem;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .5rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
+    pointer-events: auto;
+    outline: none;
+}
+.dd-menu-comp > * { display: block; width: calc(100% - .2rem); margin: .1rem; }
+.dd-menu-comp {
+    --jsl-button-primary: var(--jsl-color-surface);
+    --jsl-button-on-primary: var(--jsl-color-text);
+    --jsl-button-primary-hover: var(--jsl-color-surface-hover);
+    --jsl-button-primary-active: var(--jsl-color-surface-selected);
+    --jsl-button-radius: .25rem;
+    display: flex;
+    flex-direction: column;
+}
+.dd-menu-comp > .jsl-button {
+    --jsl-button-height: 2.2rem;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+}
+.jsl-dropdown-menu [role^="menuitem"]:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: -2px; }
+@media (prefers-reduced-motion: reduce) { .jsl-dropdown-trigger::after { transition: none; } }

package/lib/components/select/SelectStyle.scss

@@ -7,7 +7,7 @@
     width: 14rem;
     max-width: 100%;
     min-width: 0;
-    min-height: 2.5rem;
+    min-height: 2.2rem;
     vertical-align: middle;
     color: var(--jsl-color-text);
     font: inherit;

package/lib/components/slider/SliderComponent.d.ts

@@ -0,0 +1,97 @@
+import "./SliderStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export type ISliderValue = number | number[];
+export interface INoUiSliderFormat {
+    to(value: number): string;
+    from(value: string): number;
+}
+export interface INoUiSliderRange {
+    min: number;
+    max: number;
+    [percentage: string]: number | [number, number];
+}
+export interface INoUiSliderPipsOptions {
+    mode: "range" | "steps" | "positions" | "count" | "values";
+    values?: number | number[];
+    density?: number;
+    stepped?: boolean;
+    filter?: (value: number, type: number) => number;
+    format?: {
+        to(value: number): string;
+    };
+}
+export type ISliderEventHandler = (value: ISliderValue, handle: number, values: number[]) => void;
+/** Options supported by the bundled noUiSlider 14.6 build and the component wrapper. */
+export interface ISliderComponentOptions {
+    start: number | number[];
+    range: INoUiSliderRange;
+    connect?: boolean | "lower" | "upper" | boolean[];
+    direction?: "ltr" | "rtl";
+    orientation?: "horizontal" | "vertical";
+    step?: number;
+    margin?: number;
+    limit?: number;
+    padding?: number | [number, number];
+    behaviour?: string;
+    snap?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    keyboardSupport?: boolean;
+    keyboardPageMultiplier?: number;
+    keyboardDefaultStep?: number;
+    format?: INoUiSliderFormat;
+    ariaFormat?: INoUiSliderFormat;
+    tooltips?: boolean | {
+        to(value: number): string;
+    } | Array<boolean | {
+        to(value: number): string;
+    }>;
+    pips?: INoUiSliderPipsOptions;
+    cssPrefix?: string | false;
+    cssClasses?: {
+        [key: string]: string;
+    };
+    documentElement?: HTMLElement;
+    enabled?: boolean;
+    ariaLabel?: string | string[];
+    class?: string;
+    style?: string;
+    onStart?: ISliderEventHandler;
+    onSlide?: ISliderEventHandler;
+    onUpdate?: ISliderEventHandler;
+    onChange?: ISliderEventHandler;
+    onSet?: ISliderEventHandler;
+    onEnd?: ISliderEventHandler;
+}
+export interface INoUiSliderInstance {
+    destroy(): void;
+    get(): string | string[];
+    set(value: number | string | Array<number | string | null>, fireSetEvent?: boolean): void;
+    setHandle(handle: number, value: number | string, fireSetEvent?: boolean): void;
+    reset(fireSetEvent?: boolean): void;
+    updateOptions(options: Partial<ISliderComponentOptions>, fireSetEvent?: boolean): void;
+    on(event: string, callback: (formattedValues: string[], handle: number, unencodedValues: number[]) => void): void;
+    off(event?: string): void;
+    target: HTMLElement;
+}
+export declare class SliderComponent implements IJSLComponent {
+    private options;
+    private slider;
+    private target;
+    private currentValue;
+    constructor(options: ISliderComponentOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    getValue(): ISliderValue;
+    /** Set a value without firing noUiSlider's `set` event unless requested. */
+    setValue(value: ISliderValue, fireSetEvent?: boolean): void;
+    setEnabled(enabled: boolean): void;
+    getRef(): INoUiSliderInstance | null;
+    private bindEvent;
+    private applyHandleLabels;
+    private applyEnabledState;
+    private normalize;
+    private copyValue;
+}

package/lib/components/slider/SliderComponent.js

@@ -0,0 +1,135 @@
+import "./SliderStyle.scss";
+import { numeric } from "../../core/numeric";
+import { noUiSlider } from "./nouislider";
+const numericFormat = {
+    to: value => numeric.format(value),
+    from: value => numeric.parse(value)
+};
+export class SliderComponent {
+    constructor(options) {
+        var _a;
+        this.options = {
+            enabled: true, keyboardSupport: true, ...options,
+            format: (_a = options.format) !== null && _a !== void 0 ? _a : numericFormat
+        };
+        this.currentValue = this.normalize(options.start);
+    }
+    isEqual(node) {
+        return this.__proto__ === node.__proto__;
+    }
+    render() {
+        return {
+            tag: "div",
+            attr: {
+                class: "jsl-slider" + (this.options.orientation === "vertical" ? " jsl-slider-vertical" : "") +
+                    (this.options.class ? " " + this.options.class : "") + (this.options.enabled ? "" : " jsl-slider-disabled"),
+                style: this.options.style,
+                disabled: this.options.enabled ? undefined : ""
+            }
+        };
+    }
+    onCreate(node) {
+        this.target = node.dom;
+        const { start: _start, enabled: _enabled, ariaLabel: _ariaLabel, class: _class, style: _style, onStart: _onStart, onSlide: _onSlide, onUpdate: _onUpdate, onChange: _onChange, onSet: _onSet, onEnd: _onEnd, ...sliderOptions } = this.options;
+        this.slider = noUiSlider.create(this.target, {
+            ...sliderOptions,
+            start: Array.isArray(this.currentValue) ? this.currentValue.slice() : this.currentValue
+        });
+        this.applyHandleLabels();
+        this.applyEnabledState();
+        this.slider.on("update", (_formatted, handle, values) => {
+            var _a, _b;
+            this.currentValue = this.normalize(values);
+            (_b = (_a = this.options).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, this.copyValue(this.currentValue), handle, values.slice());
+        });
+        this.bindEvent("start", this.options.onStart);
+        this.bindEvent("slide", this.options.onSlide);
+        this.bindEvent("change", this.options.onChange);
+        this.bindEvent("set", this.options.onSet);
+        this.bindEvent("end", this.options.onEnd);
+    }
+    onRemove() {
+        var _a;
+        (_a = this.slider) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.slider = null;
+        this.target = null;
+    }
+    getValue() {
+        return this.copyValue(this.currentValue);
+    }
+    /** Set a value without firing noUiSlider's `set` event unless requested. */
+    setValue(value, fireSetEvent = false) {
+        this.currentValue = this.normalize(value);
+        if (this.slider) {
+            this.slider.set(Array.isArray(value) ? value.slice() : value, fireSetEvent);
+        }
+        else {
+            this.options.start = this.copyValue(this.currentValue);
+        }
+    }
+    setEnabled(enabled) {
+        this.options.enabled = enabled;
+        this.applyEnabledState();
+    }
+    getRef() {
+        var _a;
+        return (_a = this.slider) !== null && _a !== void 0 ? _a : null;
+    }
+    bindEvent(event, callback) {
+        if (!callback) {
+            return;
+        }
+        this.slider.on(event, (_formatted, handle, values) => {
+            const numericValues = values.map(Number);
+            callback(this.normalize(numericValues), handle, numericValues);
+        });
+    }
+    applyHandleLabels() {
+        if (!this.target) {
+            return;
+        }
+        const handles = this.target.querySelectorAll("[role=slider]");
+        handles.forEach((handle, index) => {
+            const configured = Array.isArray(this.options.ariaLabel)
+                ? this.options.ariaLabel[index]
+                : this.options.ariaLabel;
+            const label = configured || (handles.length === 1 ? "Slider value" : "Slider value " + (index + 1));
+            handle.setAttribute("aria-label", label);
+        });
+    }
+    applyEnabledState() {
+        if (!this.target) {
+            return;
+        }
+        const enabled = this.options.enabled !== false;
+        if (enabled) {
+            this.target.removeAttribute("disabled");
+            this.target.classList.remove("jsl-slider-disabled");
+        }
+        else {
+            this.target.setAttribute("disabled", "");
+            this.target.classList.add("jsl-slider-disabled");
+        }
+        this.target.querySelectorAll("[role=slider]").forEach(handle => {
+            if (enabled) {
+                handle.removeAttribute("aria-disabled");
+                if (this.options.keyboardSupport !== false) {
+                    handle.setAttribute("tabindex", "0");
+                }
+                else {
+                    handle.removeAttribute("tabindex");
+                }
+            }
+            else {
+                handle.setAttribute("aria-disabled", "true");
+                handle.setAttribute("tabindex", "-1");
+            }
+        });
+    }
+    normalize(value) {
+        return Array.isArray(value) ? value.map(Number) : Number(value);
+    }
+    copyValue(value) {
+        return Array.isArray(value) ? value.slice() : value;
+    }
+}