@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-slider.mjs

@@ -0,0 +1,1049 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, Pipe, DestroyRef, signal, viewChildren, NgZone, computed, contentChild, TemplateRef, input, output, afterNextRender, viewChild, model, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, tap, filter, switchMap, takeUntil } from 'rxjs';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class SliderTickDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderTickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SliderTickDirective, isStandalone: true, selector: "span[monaSliderTick]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderTickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "span[monaSliderTick]"
+                }]
+        }] });
+
+const valueToPosition = (value, min, max) => {
+    if (value <= min) {
+        return 0;
+    }
+    if (value >= max) {
+        return 100;
+    }
+    if (max === min) {
+        return 0;
+    }
+    return ((value - min) / (max - min)) * 100;
+};
+
+class LabelStylePipe {
+    transform(tick, args) {
+        const styles = {};
+        const { labelPosition, min, max, orientation } = args;
+        const valuePosition = valueToPosition(tick.value, min, max);
+        if (orientation === "horizontal") {
+            styles.left = `${valuePosition}%`;
+            styles[labelPosition === "before" ? "bottom" : "top"] = "100%";
+            styles.transform = "translateX(-50%)";
+        }
+        else {
+            styles.bottom = `${valuePosition}%`;
+            styles[labelPosition === "before" ? "right" : "left"] = "100%";
+            styles.transform = "translateY(50%)";
+        }
+        return styles;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: LabelStylePipe, isStandalone: true, name: "labelStyle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "labelStyle"
+                }]
+        }] });
+
+class TickStylePipe {
+    transform(tick, args) {
+        const { largeTickStep, min, max, orientation, smallTickStep } = args;
+        const position = valueToPosition(tick.value, min, max);
+        const height = this.getHeight(tick, smallTickStep, largeTickStep, orientation);
+        const width = this.getWidth(tick, smallTickStep, largeTickStep, orientation);
+        if (orientation === "horizontal") {
+            return {
+                position: "absolute",
+                left: `${position}%`,
+                top: "50%",
+                transform: "translateX(-50%) translateY(-50%) translateZ(0)",
+                width: "1px",
+                height: `${height}px`,
+                backfaceVisibility: "hidden",
+                willChange: "transform"
+            };
+        }
+        else {
+            return {
+                position: "absolute",
+                bottom: `${position}%`,
+                left: "50%",
+                transform: "translateX(-50%) translateY(50%) translateZ(0)",
+                width: `${width}px`,
+                height: "1px",
+                backfaceVisibility: "hidden"
+            };
+        }
+    }
+    getHeight(tick, smallStep, largeStep, orientation) {
+        if (orientation === "vertical") {
+            return 8;
+        }
+        if (smallStep === 1 && largeStep === null) {
+            return 16;
+        }
+        if (smallStep === 1 && largeStep !== null) {
+            return tick.index % largeStep !== 0 ? 16 : 24;
+        }
+        if (smallStep > 1 && largeStep === null) {
+            return tick.index % smallStep !== 0 ? 0 : 16;
+        }
+        if (smallStep > 1 && largeStep !== null) {
+            return tick.index % smallStep !== 0 ? 0 : tick.index % largeStep !== 0 ? 16 : 24;
+        }
+        return 8;
+    }
+    getWidth(tick, smallStep, largeStep, orientation) {
+        if (orientation === "vertical") {
+            if (smallStep === 1) {
+                return 16; // Default width for vertical orientation with no step
+            }
+            return tick.index % smallStep !== 0 ? 0 : 16;
+        }
+        return 8; // Default width for horizontal orientation
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TickStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: TickStylePipe, isStandalone: true, name: "tickStyle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TickStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "tickStyle"
+                }]
+        }] });
+
+class SliderHandleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderHandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SliderHandleTemplateDirective, isStandalone: true, selector: "ng-template[monaSliderHandleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderHandleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSliderHandleTemplate]"
+                }]
+        }] });
+
+class SliderTickValueTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderTickValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SliderTickValueTemplateDirective, isStandalone: true, selector: "ng-template[monaSliderTickValueTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderTickValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSliderTickValueTemplate]"
+                }]
+        }] });
+
+const sliderBaseVariants = cva(`
+        flex relative select-none
+
+        data-[orientation="horizontal"]:h-6
+        data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:min-w-[200px]
+        data-[orientation="horizontal"]:items-center
+
+        data-[orientation="vertical"]:w-6
+        data-[orientation="vertical"]:h-[200px]
+        data-[orientation="vertical"]:justify-center
+
+        data-[disabled="true"]:pointer-events-none
+        data-[disabled="true"]:opacity-50
+        data-[disabled="true"]:cursor-not-allowed
+    `);
+const sliderTrackVariants = cva(`
+        relative z-2 cursor-pointer
+        border border-input-border
+        bg-background
+
+        data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-1.5
+
+        data-[orientation="vertical"]:h-full
+        data-[orientation="vertical"]:w-1.5
+
+    `);
+const sliderSelectionVariants = cva(`
+        absolute
+        bg-primary border-none
+
+        ease-out duration-200
+
+        data-[orientation="horizontal"]:top-0
+        data-[orientation="horizontal"]:bottom-0
+        data-[orientation="horizontal"]:transition-[left,right]
+        data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
+
+        data-[orientation="vertical"]:left-0
+        data-[orientation="vertical"]:right-0
+        data-[orientation="vertical"]:transition-[top,bottom]
+        data-[orientation="vertical"]:data-[dragging="true"]:transition-none
+    `);
+const sliderTickListVariants = cva(`
+        absolute
+
+        data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-6
+        data-[orientation="horizontal"]:top-0
+        data-[orientation="horizontal"]:left-0
+
+        data-[orientation="vertical"]:w-6
+        data-[orientation="vertical"]:h-full
+        data-[orientation="vertical"]:top-0
+        data-[orientation="vertical"]:left-0
+    `);
+const sliderTickVariants = cva(`
+        cursor-pointer
+        bg-input-border
+        brightness-75
+    `);
+const sliderTickLabelListVariants = cva(`
+        absolute
+        w-full h-full
+        select-none
+    `);
+const sliderTickLabelVariants = cva(`
+        absolute flex
+        items-center justify-center
+
+        text-xs/[1.667]
+        text-foreground
+
+        data-[orientation="vertical"]:w-4.25
+        data-[orientation="vertical"]:h-auto
+    `);
+const sliderHandleVariants = cva(`
+        absolute z-2 flex items-center justify-center
+        w-4.25 h-4.25
+        cursor-pointer
+        outline-none
+        bg-primary border border-border
+
+        ease-out duration-200
+
+        data-[orientation="horizontal"]:translate-x-[-50%]
+        data-[orientation="horizontal"]:transition-[left]
+        data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
+
+        data-[orientation="vertical"]:translate-y-[50%]
+        data-[orientation="vertical"]:transition-[bottom]
+        data-[orientation="vertical"]:data-[dragging="true"]:transition-none
+
+        data-[focused="true"]:ring-2
+        data-[focused="true"]:ring-primary/40
+
+        data-[invalid="true"]:border-error
+        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/40
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+
+const sliderBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderBaseVariants;
+        default:
+            return sliderBaseVariants; // Default to Mona styles
+    }
+};
+const sliderTrackThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderTrackVariants;
+        default:
+            return sliderTrackVariants; // Default to Mona styles
+    }
+};
+const sliderSelectionThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderSelectionVariants;
+        default:
+            return sliderSelectionVariants; // Default to Mona styles
+    }
+};
+const sliderTickListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderTickListVariants;
+        default:
+            return sliderTickListVariants; // Default to Mona styles
+    }
+};
+const sliderTickThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderTickVariants;
+        default:
+            return sliderTickVariants; // Default to Mona styles
+    }
+};
+const sliderTickLabelListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderTickLabelListVariants;
+        default:
+            return sliderTickLabelListVariants; // Default to Mona styles
+    }
+};
+const sliderTickLabelThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderTickLabelVariants;
+        default:
+            return sliderTickLabelVariants; // Default to Mona styles
+    }
+};
+const sliderHandleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return sliderHandleVariants;
+        default:
+            return sliderHandleVariants; // Default to Mona styles
+    }
+};
+
+class SliderBaseComponent {
+    #themeService;
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.destroyRef = inject(DestroyRef);
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        this.hostElementRef = inject(ElementRef);
+        this.tickElements = viewChildren(SliderTickDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickElements" }] : /* istanbul ignore next */ []));
+        this.zone = inject(NgZone);
+        this.baseClasses = computed(() => sliderBaseThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.handleTemplate = contentChild(SliderHandleTemplateDirective, { ...(ngDevMode ? { debugName: "handleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.handleTemplateStyles = computed(() => {
+            const template = this.handleTemplate();
+            if (!template) {
+                return {};
+            }
+            return { background: "transparent", border: "none", boxShadow: "none" };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleTemplateStyles" }] : /* istanbul ignore next */ []));
+        this.labelStyleArgs = computed(() => {
+            const labelPosition = this.labelPosition();
+            const max = this.maxValue();
+            const min = this.minValue();
+            const orientation = this.orientation();
+            const tickCount = this.labelTicks().length;
+            return { labelPosition, max, min, orientation, tickCount };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelStyleArgs" }] : /* istanbul ignore next */ []));
+        this.labelTicks = computed(() => {
+            const allTicks = this.ticks();
+            if (allTicks.length === 0) {
+                return [];
+            }
+            const tickStep = this.labelStep();
+            const lastTick = allTicks[allTicks.length - 1];
+            const labels = allTicks.filter(t => t.index % tickStep === 0);
+            if (labels.length === 0 || labels[labels.length - 1].value !== lastTick.value) {
+                labels.push(lastTick);
+            }
+            if (labels.length >= 2) {
+                const penultimate = labels[labels.length - 2];
+                const last = labels[labels.length - 1];
+                const penultimatePos = valueToPosition(penultimate.value, this.minValue(), this.maxValue());
+                const lastPos = valueToPosition(last.value, this.minValue(), this.maxValue());
+                if (this.step() !== 1 && lastPos - penultimatePos < 4) {
+                    labels.splice(labels.length - 2, 1);
+                }
+            }
+            return labels;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelTicks" }] : /* istanbul ignore next */ []));
+        this.renderTicks = computed(() => {
+            const ticks = this.ticks();
+            if (this.orientation() === "vertical") {
+                return ticks.slice().reverse();
+            }
+            return ticks;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderTicks" }] : /* istanbul ignore next */ []));
+        this.selectionBackgroundStyle = computed(() => {
+            const bg = this.selectionBackground();
+            if (!bg) {
+                return {};
+            }
+            return typeof bg === "string" ? { background: bg } : bg;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionBackgroundStyle" }] : /* istanbul ignore next */ []));
+        this.selectionClasses = computed(() => sliderSelectionThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionClasses" }] : /* istanbul ignore next */ []));
+        this.sliderHandleClasses = computed(() => {
+            const rounded = this.rounded();
+            const handleClasses = this.handleClasses();
+            const variants = sliderHandleThemeVariants(this.#themeService.theme())({ rounded });
+            return twMerge(variants ?? "", Array.isArray(handleClasses) ? handleClasses.join(" ") : handleClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sliderHandleClasses" }] : /* istanbul ignore next */ []));
+        this.sliderTrackSize = computed(() => {
+            const trackSize = this.trackSize();
+            if (trackSize == null || trackSize === "") {
+                return null;
+            }
+            if (typeof trackSize === "number") {
+                return `${trackSize}px`;
+            }
+            const number = Number(trackSize);
+            if (isNaN(number)) {
+                return trackSize;
+            }
+            return `${number}px`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sliderTrackSize" }] : /* istanbul ignore next */ []));
+        this.tickClasses = computed(() => sliderTickThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickClasses" }] : /* istanbul ignore next */ []));
+        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickLabelClasses" }] : /* istanbul ignore next */ []));
+        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickLabelListClasses" }] : /* istanbul ignore next */ []));
+        this.tickListClasses = computed(() => sliderTickListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickListClasses" }] : /* istanbul ignore next */ []));
+        this.tickStyleArgs = computed(() => {
+            const largeTickStep = this.largeTickStep();
+            const max = this.maxValue();
+            const min = this.minValue();
+            const orientation = this.orientation();
+            const smallTickStep = this.smallTickStep();
+            return { largeTickStep, max, min, orientation, smallTickStep };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickStyleArgs" }] : /* istanbul ignore next */ []));
+        this.tickValueTemplate = contentChild(SliderTickValueTemplateDirective, { ...(ngDevMode ? { debugName: "tickValueTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.ticks = computed(() => {
+            const min = this.minValue();
+            const max = this.maxValue();
+            const step = this.step();
+            const ticks = [];
+            const count = Math.floor((max - min) / step);
+            for (let i = 0; i <= count; i++) {
+                const value = min + i * step;
+                ticks.push({ index: i, value });
+            }
+            if (ticks.length === 0 || ticks[ticks.length - 1].value < max) {
+                ticks.push({ index: ticks.length, value: max });
+            }
+            return ticks;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+        this.trackBackgroundStyle = computed(() => {
+            const bg = this.trackBackground();
+            if (!bg) {
+                return {};
+            }
+            return typeof bg === "string" ? { background: bg } : bg;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackBackgroundStyle" }] : /* istanbul ignore next */ []));
+        this.trackClasses = computed(() => sliderTrackThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Human-readable override for the `aria-valuenow` announcement. Pass a function that receives the current value and returns the string to announce.
+         * @default null
+         */
+        this.ariaValueText = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes to apply to the slider handle.
+         * @default []
+         */
+        this.handleClasses = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional inline styles to apply to the slider handle.
+         * @default {}
+         */
+        this.handleStyles = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleStyles" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the control as invalid for form validation purposes, reflecting `aria-invalid` on the handle element.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Position of the label relative to the component.
+         * @default "after"
+         */
+        this.labelPosition = input("after", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls which tick labels are shown — only every n<sup>th</sup> label is rendered.
+         * @default 1
+         */
+        this.labelStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls which ticks render at large size — only every n<sup>th</sup> tick is enlarged. Pass `null` to disable large ticks.
+         * @default null
+         */
+        this.largeTickStep = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "largeTickStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Upper bound of the value range. Must be greater than `minValue`.
+         * @default 10
+         */
+        this.maxValue = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Lower bound of the value range.
+         * @default 0
+         */
+        this.minValue = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Layout orientation of the component.
+         * @default "horizontal"
+         */
+        this.orientation = input("horizontal", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the slider handle.
+         * @default "full"
+         */
+        this.rounded = input("full", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Background color of the filled selection area between the minimum and the current value. Accepts a CSS color string or a `CSSStyleDeclaration` partial.
+         * @default null
+         */
+        this.selectionBackground = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionBackground" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Multiplier applied to the step when the user holds Shift while pressing an arrow key.
+         * @default 10
+         */
+        this.shiftMultiplier = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shiftMultiplier" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays value labels alongside tick marks. Only takes effect when `showTicks` is `true`.
+         * @default false
+         */
+        this.showLabels = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays tick marks at each step position along the track.
+         * @default false
+         */
+        this.showTicks = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls how many ticks are visible — only every n<sup>th</sup> tick is rendered.
+         * @default 1
+         */
+        this.smallTickStep = input(1, { ...(ngDevMode ? { debugName: "smallTickStep" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(value, 1) });
+        /**
+         * @description Increment applied when the value changes via keyboard navigation.
+         * @default 1
+         */
+        this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => (value <= 0 ? 1 : value) });
+        /**
+         * @description Emitted when the slider loses focus or its value changes via keyboard navigation.
+         */
+        this.touch = output();
+        /**
+         * @description Background color of the unfilled track portion. Accepts a CSS color string or a `CSSStyleDeclaration` partial.
+         * @default null
+         */
+        this.trackBackground = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackBackground" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width (vertical orientation) or height (horizontal orientation) of the track. Accepts a pixel number or any CSS length string.
+         * @default undefined
+         */
+        this.trackSize = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "trackSize" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.zone.runOutsideAngular(() => this.setSubscriptions())
+        });
+    }
+    calculateNewValue(currentValue, event) {
+        const min = this.minValue();
+        const max = this.maxValue();
+        const step = this.step();
+        let newValue = currentValue;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                newValue = currentValue - (event.shiftKey ? step * this.shiftMultiplier() : step);
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newValue = currentValue + (event.shiftKey ? step * this.shiftMultiplier() : step);
+                break;
+            case "Home":
+                newValue = min;
+                break;
+            case "End":
+                newValue = max;
+                break;
+            case "PageDown":
+                newValue = currentValue - (max - min) * 0.1;
+                break;
+            case "PageUp":
+                newValue = currentValue + (max - min) * 0.1;
+                break;
+        }
+        return this.snapValue(newValue);
+    }
+    clampValue(value) {
+        return Math.max(this.minValue(), Math.min(this.maxValue(), value));
+    }
+    findClosestTickElement(event) {
+        const elements = this.tickElements().map(tick => tick.host.nativeElement);
+        let maxDistance = Number.MAX_VALUE;
+        let index = 0;
+        for (const [ex, element] of elements.entries()) {
+            const rect = element.getBoundingClientRect();
+            const distance = Math.sqrt(Math.pow(rect.left - event.clientX, 2) + Math.pow(rect.top - event.clientY, 2));
+            if (distance < maxDistance) {
+                maxDistance = distance;
+                index = ex;
+            }
+        }
+        return elements[index];
+    }
+    getValueFromPointerEvent(event) {
+        if (this.showTicks()) {
+            const tick = this.findClosestTickElement(event);
+            const valueStr = tick.getAttribute("data-value");
+            return valueStr ? Number(valueStr) : this.minValue();
+        }
+        const containerRect = this.hostElementRef.nativeElement.getBoundingClientRect();
+        let normalizedHandlePos;
+        if (this.orientation() === "horizontal") {
+            const handlePos = event.clientX - containerRect.left;
+            normalizedHandlePos = (handlePos / containerRect.width) * 100;
+        }
+        else {
+            const handlePos = event.clientY - containerRect.top;
+            normalizedHandlePos = 100 - (handlePos / containerRect.height) * 100;
+        }
+        normalizedHandlePos = Math.max(0, Math.min(normalizedHandlePos, 100));
+        return this.getValueFromPosition(normalizedHandlePos);
+    }
+    getValueFromPosition(position) {
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (position >= 100) {
+            return max;
+        }
+        if (position <= 0) {
+            return min;
+        }
+        const range = max - min;
+        const rawValue = min + (position / 100) * range;
+        return this.snapValue(rawValue);
+    }
+    isNavigationKey(event) {
+        return ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(event.key);
+    }
+    positionFromValue(value) {
+        return valueToPosition(value, this.minValue(), this.maxValue());
+    }
+    snapValue(value) {
+        const min = this.minValue();
+        const step = this.step();
+        const clampedValue = this.clampValue(value);
+        const snappedValue = Math.round((clampedValue - min) / step) * step + min;
+        return this.clampValue(snappedValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", type: SliderBaseComponent, isStandalone: true, inputs: { ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, handleClasses: { classPropertyName: "handleClasses", publicName: "handleClasses", isSignal: true, isRequired: false, transformFunction: null }, handleStyles: { classPropertyName: "handleStyles", publicName: "handleStyles", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelStep: { classPropertyName: "labelStep", publicName: "labelStep", isSignal: true, isRequired: false, transformFunction: null }, largeTickStep: { classPropertyName: "largeTickStep", publicName: "largeTickStep", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectionBackground: { classPropertyName: "selectionBackground", publicName: "selectionBackground", isSignal: true, isRequired: false, transformFunction: null }, shiftMultiplier: { classPropertyName: "shiftMultiplier", publicName: "shiftMultiplier", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, smallTickStep: { classPropertyName: "smallTickStep", publicName: "smallTickStep", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, trackBackground: { classPropertyName: "trackBackground", publicName: "trackBackground", isSignal: true, isRequired: false, transformFunction: null }, trackSize: { classPropertyName: "trackSize", publicName: "trackSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch" }, queries: [{ propertyName: "handleTemplate", first: true, predicate: SliderHandleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tickValueTemplate", first: true, predicate: SliderTickValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "tickElements", predicate: SliderTickDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { tickElements: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SliderTickDirective), { isSignal: true }] }], handleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SliderHandleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tickValueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SliderTickValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], handleClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleClasses", required: false }] }], handleStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleStyles", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelStep", required: false }] }], largeTickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeTickStep", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selectionBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBackground", required: false }] }], shiftMultiplier: [{ type: i0.Input, args: [{ isSignal: true, alias: "shiftMultiplier", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], smallTickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "smallTickStep", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], trackBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBackground", required: false }] }], trackSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackSize", required: false }] }] } });
+
+class SliderComponent extends SliderBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.handleFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleFocused" }] : /* istanbul ignore next */ []));
+        this.handlePosition = computed(() => this.positionFromValue(this.normalizedValue()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handlePosition" }] : /* istanbul ignore next */ []));
+        this.handleStyle = computed(() => ({
+            ...this.handleTemplateStyles(),
+            ...this.handleStyles()
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleStyle" }] : /* istanbul ignore next */ []));
+        this.normalizedValue = computed(() => this.snapValue(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
+        this.selectionLeft = computed(() => 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionLeft" }] : /* istanbul ignore next */ []));
+        this.selectionRight = computed(() => this.handlePosition(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionRight" }] : /* istanbul ignore next */ []));
+        this.sliderHandle = viewChild.required("sliderHandle", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sliderHandle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the host element. Describe what the component represents.
+         * When empty, assistive technology announces the role without a label.
+         * @default "Slider value"
+         */
+        this.ariaLabel = input("Slider value", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the host element.
+         * @default null
+         */
+        this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Current value. Values outside `[minValue, maxValue]` are clamped before rendering.
+         * @default 0
+         */
+        this.value = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    focus(options) {
+        if (!this.effectiveDisabled()) {
+            this.sliderHandle().nativeElement.focus(options);
+        }
+    }
+    handleHandleMove(event) {
+        this.updateValue(this.getValueFromPointerEvent(event));
+    }
+    setSubscriptions() {
+        this.setClickSubscription();
+        this.setKeydownSubscription();
+        this.setPointerMoveSubscription();
+        this.setFocusSubscription();
+    }
+    setClickSubscription() {
+        fromEvent(this.hostElementRef.nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => this.dragging.set(false)), filter(() => !this.effectiveDisabled()))
+            .subscribe((event) => this.handleHandleMove(event));
+    }
+    setFocusSubscription() {
+        fromEvent(this.sliderHandle().nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.zone.run(() => this.handleFocused.set(true)));
+        fromEvent(this.sliderHandle().nativeElement, "blur")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.zone.run(() => {
+                this.handleFocused.set(false);
+                this.touch.emit();
+            });
+        });
+    }
+    setKeydownSubscription() {
+        fromEvent(this.sliderHandle().nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), filter(event => this.isNavigationKey(event)), tap(event => {
+            event.preventDefault();
+            event.stopPropagation();
+        }))
+            .subscribe(event => this.updateValue(this.calculateNewValue(this.normalizedValue(), event)));
+    }
+    setPointerMoveSubscription() {
+        const pointerMove$ = fromEvent(document, "pointermove");
+        const pointerUp$ = fromEvent(document, "pointerup");
+        fromEvent(this.sliderHandle().nativeElement, "pointerdown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), tap(() => this.dragging.set(true)), switchMap(() => pointerMove$.pipe(tap((event) => this.handleHandleMove(event)), takeUntil(pointerUp$.pipe(tap(() => this.zone.run(() => this.dragging.set(false))))))))
+            .subscribe();
+    }
+    updateValue(value) {
+        const nextValue = this.snapValue(value);
+        if (nextValue === this.normalizedValue()) {
+            return;
+        }
+        this.zone.run(() => {
+            this.value.set(nextValue);
+            this.touch.emit();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SliderComponent, isStandalone: true, selector: "mona-slider", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled() || null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\r\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\r\n    [style]=\"trackBackgroundStyle()\">\r\n    <div\r\n        [class]=\"selectionClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-dragging]=\"dragging()\"\r\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\r\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\r\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\r\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\r\n        [style]=\"selectionBackgroundStyle()\"></div>\r\n</div>\r\n@if (showTicks()) {\r\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\r\n        @for (tick of renderTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickClasses()\"\r\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [attr.data-value]=\"tick.value\"\r\n                monaSliderTick>\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n@if (showTicks() && showLabels()) {\r\n    <div\r\n        [class]=\"tickLabelListClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-label-position]=\"labelPosition()\">\r\n        @for (tick of labelTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickLabelClasses()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\r\n                @if (!tickValueTemplate()) {\r\n                    <span>{{ tick.value }}</span>\r\n                } @else {\r\n                    <span>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                tickValueTemplate() ?? null;\r\n                                context: { $implicit: tick.value }\r\n                            \"></ng-container>\r\n                    </span>\r\n                }\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"handleFocused()\"\r\n    [style]=\"handleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n    #sliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SliderTickDirective, selector: "span[monaSliderTick]" }, { kind: "pipe", type: LabelStylePipe, name: "labelStyle" }, { kind: "pipe", type: TickStylePipe, name: "tickStyle" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-slider", imports: [NgTemplateOutlet, SliderTickDirective, LabelStylePipe, TickStylePipe], host: {
+                        "[class]": "baseClasses()",
+                        "[class.mona-slider]": "true",
+                        "[attr.data-disabled]": "effectiveDisabled() || null",
+                        "[attr.data-orientation]": "orientation()",
+                        "(focus)": "focus()"
+                    }, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\r\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\r\n    [style]=\"trackBackgroundStyle()\">\r\n    <div\r\n        [class]=\"selectionClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-dragging]=\"dragging()\"\r\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\r\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\r\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\r\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\r\n        [style]=\"selectionBackgroundStyle()\"></div>\r\n</div>\r\n@if (showTicks()) {\r\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\r\n        @for (tick of renderTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickClasses()\"\r\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [attr.data-value]=\"tick.value\"\r\n                monaSliderTick>\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n@if (showTicks() && showLabels()) {\r\n    <div\r\n        [class]=\"tickLabelListClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-label-position]=\"labelPosition()\">\r\n        @for (tick of labelTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickLabelClasses()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\r\n                @if (!tickValueTemplate()) {\r\n                    <span>{{ tick.value }}</span>\r\n                } @else {\r\n                    <span>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                tickValueTemplate() ?? null;\r\n                                context: { $implicit: tick.value }\r\n                            \"></ng-container>\r\n                    </span>\r\n                }\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"handleFocused()\"\r\n    [style]=\"handleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n    #sliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\r\n    }\r\n</div>\r\n" }]
+        }], propDecorators: { sliderHandle: [{ type: i0.ViewChild, args: ["sliderHandle", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class RangeSliderComponent extends SliderBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.handlePositions = computed(() => [
+            this.positionFromValue(this.normalizedValue()[0]),
+            this.positionFromValue(this.normalizedValue()[1])
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handlePositions" }] : /* istanbul ignore next */ []));
+        this.handlesOverlap = computed(() => {
+            const values = this.normalizedValue();
+            return values[0] === values[1];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handlesOverlap" }] : /* istanbul ignore next */ []));
+        this.normalizedValue = computed(() => {
+            const value = this.value();
+            const minValue = this.snapValue(value[0]);
+            const maxValue = this.snapValue(value[1]);
+            return [Math.min(minValue, maxValue), Math.max(minValue, maxValue)];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
+        this.primaryHandleFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryHandleFocused" }] : /* istanbul ignore next */ []));
+        this.primaryHandlePosition = computed(() => this.handlePositions()[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryHandlePosition" }] : /* istanbul ignore next */ []));
+        this.primaryHandleStyle = computed(() => {
+            const style = { ...this.handleTemplateStyles(), ...this.handleStyles() };
+            if (this.handlesOverlap()) {
+                return { ...style, zIndex: this.secondaryHandleOnTop() ? "1" : "2" };
+            }
+            return style;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryHandleStyle" }] : /* istanbul ignore next */ []));
+        this.secondaryHandleFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondaryHandleFocused" }] : /* istanbul ignore next */ []));
+        this.secondaryHandleOnTop = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondaryHandleOnTop" }] : /* istanbul ignore next */ []));
+        this.secondaryHandlePosition = computed(() => this.handlePositions()[1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondaryHandlePosition" }] : /* istanbul ignore next */ []));
+        this.secondaryHandleStyle = computed(() => {
+            const style = { ...this.handleTemplateStyles(), ...this.handleStyles() };
+            if (this.handlesOverlap()) {
+                return { ...style, zIndex: this.secondaryHandleOnTop() ? "2" : "1" };
+            }
+            return style;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondaryHandleStyle" }] : /* istanbul ignore next */ []));
+        this.secondarySliderHandle = viewChild.required("secondarySliderHandle", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondarySliderHandle" }] : /* istanbul ignore next */ []));
+        this.selectionLeft = computed(() => this.handlePositions()[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionLeft" }] : /* istanbul ignore next */ []));
+        this.selectionRight = computed(() => this.handlePositions()[1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionRight" }] : /* istanbul ignore next */ []));
+        this.sliderHandle = viewChild.required("sliderHandle", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sliderHandle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the upper-value (secondary) handle.
+         * @default "Maximum value"
+         */
+        this.ariaLabelEnd = input("Maximum value", { ...(ngDevMode ? { debugName: "ariaLabelEnd" } : /* istanbul ignore next */ {}), alias: "aria-label-end" });
+        /**
+         * @description Accessible name for the lower-value (primary) handle.
+         * @default "Minimum value"
+         */
+        this.ariaLabelStart = input("Minimum value", { ...(ngDevMode ? { debugName: "ariaLabelStart" } : /* istanbul ignore next */ {}), alias: "aria-label-start" });
+        /**
+         * @description Selected range as `[minimum, maximum]`.
+         * Values outside `[minValue, maxValue]` are clamped; the tuple is always sorted, so index 0 ≤ index 1.
+         * @default [0, 10]
+         */
+        this.value = model([0, 10], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    focus(options) {
+        if (!this.effectiveDisabled()) {
+            this.sliderHandle().nativeElement.focus(options);
+        }
+    }
+    handleHandleMove(event, isSecondary = false) {
+        this.updateRangedValue(this.getValueFromPointerEvent(event), isSecondary, true);
+    }
+    setSubscriptions() {
+        this.setClickSubscription();
+        this.setKeydownSubscription();
+        this.setPointerMoveSubscription();
+        this.setFocusSubscription();
+    }
+    getClosestHandle(event) {
+        const currentValues = this.normalizedValue();
+        if (currentValues[0] === currentValues[1]) {
+            const containerRect = this.hostElementRef.nativeElement.getBoundingClientRect();
+            let normalizedClickPos;
+            if (this.orientation() === "horizontal") {
+                const clickPos = event.clientX - containerRect.left;
+                normalizedClickPos = (clickPos / containerRect.width) * 100;
+            }
+            else {
+                const clickPos = event.clientY - containerRect.top;
+                normalizedClickPos = 100 - (clickPos / containerRect.height) * 100;
+            }
+            const clickValue = this.getValueFromPosition(normalizedClickPos);
+            return clickValue > currentValues[0];
+        }
+        const primaryRect = this.sliderHandle().nativeElement.getBoundingClientRect();
+        const secondaryRect = this.secondarySliderHandle().nativeElement.getBoundingClientRect();
+        const primaryDistance = Math.sqrt(Math.pow(primaryRect.left + primaryRect.width / 2 - event.clientX, 2) +
+            Math.pow(primaryRect.top + primaryRect.height / 2 - event.clientY, 2));
+        const secondaryDistance = Math.sqrt(Math.pow(secondaryRect.left + secondaryRect.width / 2 - event.clientX, 2) +
+            Math.pow(secondaryRect.top + secondaryRect.height / 2 - event.clientY, 2));
+        return secondaryDistance < primaryDistance;
+    }
+    setClickSubscription() {
+        fromEvent(this.hostElementRef.nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => this.dragging.set(false)), filter(() => !this.effectiveDisabled()))
+            .subscribe((event) => {
+            const isSecondary = this.getClosestHandle(event);
+            this.handleHandleMove(event, isSecondary);
+        });
+    }
+    setFocusSubscription() {
+        fromEvent(this.sliderHandle().nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.zone.run(() => {
+                this.primaryHandleFocused.set(true);
+                this.secondaryHandleFocused.set(false);
+            });
+        });
+        fromEvent(this.sliderHandle().nativeElement, "blur")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.zone.run(() => {
+                this.primaryHandleFocused.set(false);
+                this.touch.emit();
+            });
+        });
+        fromEvent(this.secondarySliderHandle().nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.zone.run(() => {
+                this.secondaryHandleFocused.set(true);
+                this.primaryHandleFocused.set(false);
+            });
+        });
+        fromEvent(this.secondarySliderHandle().nativeElement, "blur")
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.zone.run(() => {
+                this.secondaryHandleFocused.set(false);
+                this.touch.emit();
+            });
+        });
+    }
+    setKeydownSubscription() {
+        fromEvent(this.sliderHandle().nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), filter(event => this.isNavigationKey(event)), tap(event => {
+            event.preventDefault();
+            event.stopPropagation();
+        }))
+            .subscribe(event => {
+            const newValue = this.calculateNewValue(this.normalizedValue()[0], event);
+            this.updateRangedValue(newValue, false, false);
+        });
+        fromEvent(this.secondarySliderHandle().nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), filter(event => this.isNavigationKey(event)), tap(event => {
+            event.preventDefault();
+            event.stopPropagation();
+        }))
+            .subscribe(event => {
+            const newValue = this.calculateNewValue(this.normalizedValue()[1], event);
+            this.updateRangedValue(newValue, true, false);
+        });
+    }
+    setPointerMoveSubscription() {
+        const pointerMove$ = fromEvent(document, "pointermove");
+        const pointerUp$ = fromEvent(document, "pointerup");
+        fromEvent(this.sliderHandle().nativeElement, "pointerdown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), tap(() => this.dragging.set(true)), switchMap(() => pointerMove$.pipe(tap((event) => this.handleHandleMove(event, false)), takeUntil(pointerUp$.pipe(tap(() => this.zone.run(() => this.dragging.set(false))))))))
+            .subscribe();
+        fromEvent(this.secondarySliderHandle().nativeElement, "pointerdown")
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => !this.effectiveDisabled()), tap(() => this.dragging.set(true)), switchMap(() => pointerMove$.pipe(tap((event) => this.handleHandleMove(event, true)), takeUntil(pointerUp$.pipe(tap(() => this.zone.run(() => this.dragging.set(false))))))))
+            .subscribe();
+    }
+    updateRangedValue(value, isSecondary, isDragging = false) {
+        const currentValues = this.normalizedValue();
+        const currentMinValue = currentValues[0];
+        const currentMaxValue = currentValues[1];
+        let newMinValue = currentMinValue;
+        let newMaxValue = currentMaxValue;
+        if (isSecondary) {
+            if (isDragging && value < currentMinValue) {
+                newMinValue = value;
+                newMaxValue = value;
+                this.secondaryHandleOnTop.set(true);
+            }
+            else {
+                newMaxValue = Math.max(value, currentMinValue);
+                if (newMaxValue === currentMinValue) {
+                    this.secondaryHandleOnTop.set(true);
+                }
+            }
+        }
+        else {
+            if (isDragging && value > currentMaxValue) {
+                newMinValue = value;
+                newMaxValue = value;
+                this.secondaryHandleOnTop.set(false);
+            }
+            else {
+                newMinValue = Math.min(value, currentMaxValue);
+                if (newMinValue === currentMaxValue) {
+                    this.secondaryHandleOnTop.set(false);
+                }
+            }
+        }
+        newMinValue = this.snapValue(newMinValue);
+        newMaxValue = this.snapValue(newMaxValue);
+        if (newMinValue === currentMinValue && newMaxValue === currentMaxValue) {
+            return;
+        }
+        this.zone.run(() => {
+            this.value.set([newMinValue, newMaxValue]);
+            this.touch.emit();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RangeSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RangeSliderComponent, isStandalone: true, selector: "mona-range-slider", inputs: { ariaLabelEnd: { classPropertyName: "ariaLabelEnd", publicName: "aria-label-end", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelStart: { classPropertyName: "ariaLabelStart", publicName: "aria-label-start", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "focus()" }, properties: { "class": "baseClasses()", "class.mona-slider": "true", "attr.data-disabled": "effectiveDisabled()", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "secondarySliderHandle", first: true, predicate: ["secondarySliderHandle"], descendants: true, isSignal: true }, { propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\r\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\r\n    [style]=\"trackBackgroundStyle()\">\r\n    <div\r\n        [class]=\"selectionClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-dragging]=\"dragging()\"\r\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\r\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\r\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\r\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\r\n        [style]=\"selectionBackgroundStyle()\"></div>\r\n</div>\r\n@if (showTicks()) {\r\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\r\n        @for (tick of renderTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickClasses()\"\r\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [attr.data-value]=\"tick.value\"\r\n                monaSliderTick>\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n@if (showTicks() && showLabels()) {\r\n    <div\r\n        [class]=\"tickLabelListClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-label-position]=\"labelPosition()\">\r\n        @for (tick of labelTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickLabelClasses()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\r\n                @if (!tickValueTemplate()) {\r\n                    <span>{{ tick.value }}</span>\r\n                } @else {\r\n                    <span>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                tickValueTemplate() ?? null;\r\n                                context: { $implicit: tick.value }\r\n                            \"></ng-container>\r\n                    </span>\r\n                }\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"primaryHandleFocused()\"\r\n    [style]=\"primaryHandleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()[0]\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabelStart()\"\r\n    #sliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\r\n    }\r\n</div>\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"secondaryHandleFocused()\"\r\n    [style]=\"secondaryHandleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()[1]\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabelEnd()\"\r\n    #secondarySliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SliderTickDirective, selector: "span[monaSliderTick]" }, { kind: "pipe", type: LabelStylePipe, name: "labelStyle" }, { kind: "pipe", type: TickStylePipe, name: "tickStyle" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-range-slider", imports: [NgTemplateOutlet, SliderTickDirective, LabelStylePipe, TickStylePipe], host: {
+                        "[class]": "baseClasses()",
+                        "[class.mona-slider]": "true",
+                        "[attr.data-disabled]": "effectiveDisabled()",
+                        "[attr.data-orientation]": "orientation()",
+                        "(focus)": "focus()"
+                    }, template: "<div\r\n    [class]=\"trackClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\r\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\r\n    [style]=\"trackBackgroundStyle()\">\r\n    <div\r\n        [class]=\"selectionClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-dragging]=\"dragging()\"\r\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\r\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\r\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\r\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\r\n        [style]=\"selectionBackgroundStyle()\"></div>\r\n</div>\r\n@if (showTicks()) {\r\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\r\n        @for (tick of renderTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickClasses()\"\r\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [attr.data-value]=\"tick.value\"\r\n                monaSliderTick>\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n@if (showTicks() && showLabels()) {\r\n    <div\r\n        [class]=\"tickLabelListClasses()\"\r\n        [attr.data-orientation]=\"orientation()\"\r\n        [attr.data-label-position]=\"labelPosition()\">\r\n        @for (tick of labelTicks(); track tick.index) {\r\n            <span\r\n                [class]=\"tickLabelClasses()\"\r\n                [attr.data-orientation]=\"orientation()\"\r\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\r\n                @if (!tickValueTemplate()) {\r\n                    <span>{{ tick.value }}</span>\r\n                } @else {\r\n                    <span>\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                                tickValueTemplate() ?? null;\r\n                                context: { $implicit: tick.value }\r\n                            \"></ng-container>\r\n                    </span>\r\n                }\r\n            </span>\r\n        }\r\n    </div>\r\n}\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"primaryHandleFocused()\"\r\n    [style]=\"primaryHandleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()[0]\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabelStart()\"\r\n    #sliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\r\n    }\r\n</div>\r\n<div\r\n    [class]=\"sliderHandleClasses()\"\r\n    [attr.data-orientation]=\"orientation()\"\r\n    [attr.data-dragging]=\"dragging()\"\r\n    [attr.data-focused]=\"secondaryHandleFocused()\"\r\n    [style]=\"secondaryHandleStyle()\"\r\n    [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\r\n    [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\r\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\r\n    [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuenow]=\"normalizedValue()[1]\"\r\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\r\n    [attr.aria-orientation]=\"orientation()\"\r\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\r\n    [attr.aria-invalid]=\"invalid() || null\"\r\n    [attr.data-invalid]=\"invalid() || null\"\r\n    [attr.aria-label]=\"ariaLabelEnd()\"\r\n    #secondarySliderHandle>\r\n    @if (handleTemplate()) {\r\n        <ng-container\r\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\r\n    }\r\n</div>\r\n" }]
+        }], propDecorators: { secondarySliderHandle: [{ type: i0.ViewChild, args: ["secondarySliderHandle", { isSignal: true }] }], sliderHandle: [{ type: i0.ViewChild, args: ["sliderHandle", { isSignal: true }] }], ariaLabelEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-end", required: false }] }], ariaLabelStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label-start", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/slider
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RangeSliderComponent, SliderComponent, SliderHandleTemplateDirective, SliderTickValueTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-slider.mjs.map