@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -3,9 +3,9 @@ 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';
+import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class SliderTickDirective {
     constructor() {
@@ -150,105 +150,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-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 sliderBaseThemeVariants = cva(`
+        relative flex select-none
+
+        data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-6
+        data-[orientation="horizontal"]:min-w-[200px]
+        data-[orientation="horizontal"]:items-center
+
+        data-[orientation="vertical"]:h-[200px]
+        data-[orientation="vertical"]:w-6
+        data-[orientation="vertical"]:justify-center
+
+        data-[disabled="true"]:pointer-events-none
+        data-[disabled="true"]:cursor-not-allowed
+        data-[disabled="true"]:opacity-50
     `);
-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 sliderTrackThemeVariants = cva(`
+        relative z-2 cursor-pointer
+        overflow-hidden
+        bg-surface-muted text-foreground
+
+        data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-1.5
+
+        data-[orientation="vertical"]:h-full
+        data-[orientation="vertical"]:w-1.5
+
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const sliderSelectionThemeVariants = cva(`
+        absolute
+        bg-primary
+        border-none
+        transition duration-(--mona-motion-fast) ease-out
+
+        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 sliderTickListThemeVariants = 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 sliderTickThemeVariants = cva(`
+        cursor-pointer
+        bg-border-control-hover
     `);
-const sliderTickLabelListVariants = cva(`
-        absolute
-        w-full h-full
-        select-none
+const sliderTickLabelListThemeVariants = cva(`
+        absolute h-full w-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 sliderTickLabelThemeVariants = cva(`
+        absolute flex items-center justify-center
+        text-xs/[1.667] text-foreground
+
+        data-[orientation="vertical"]:h-auto
+        data-[orientation="vertical"]:w-4.25
     `);
-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
+const sliderHandleThemeVariants = cva(`
+        absolute z-2 flex items-center justify-center
+        h-4.25 w-4.25
+        cursor-pointer
+        ${themeRaisedSurfaceClasses}
+        border border-(--mona-slider-handle-border-color) shadow-(--shadow-control)
+        outline-none
+        transition duration-(--mona-motion-fast) ease-out
+
+        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"]:border-focus-indicator
+        data-[focused="true"]:ring-2
+        data-[focused="true"]:ring-focus-indicator/35
+
+        data-[invalid="true"]:border-error
+        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/35
+        data-[invalid="true"]:data-[focused="true"]:border-error
+        data-[invalid="true"]:data-[focused="true"]:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -261,75 +269,8 @@ const sliderHandleVariants = cva(`
     }
 });
 
-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 */ []));
@@ -337,7 +278,7 @@ class SliderBaseComponent {
         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 */
+        this.baseClasses = computed(() => sliderBaseThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
@@ -398,12 +339,12 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.selectionClasses = computed(() => sliderSelectionThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.selectionClasses = computed(() => sliderSelectionThemeVariants(), /* @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 });
+            const variants = sliderHandleThemeVariants({ rounded });
             return twMerge(variants ?? "", Array.isArray(handleClasses) ? handleClasses.join(" ") : handleClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderHandleClasses" }] : /* istanbul ignore next */ []));
@@ -422,13 +363,13 @@ class SliderBaseComponent {
             return `${number}px`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderTrackSize" }] : /* istanbul ignore next */ []));
-        this.tickClasses = computed(() => sliderTickThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickClasses = computed(() => sliderTickThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelListClasses" }] : /* istanbul ignore next */ []));
-        this.tickListClasses = computed(() => sliderTickListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickListClasses = computed(() => sliderTickListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickListClasses" }] : /* istanbul ignore next */ []));
         this.tickStyleArgs = computed(() => {
             const largeTickStep = this.largeTickStep();
@@ -464,7 +405,10 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.trackClasses = computed(() => sliderTrackThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.trackClasses = computed(() => {
+            const rounded = this.rounded();
+            return sliderTrackThemeVariants({ rounded });
+        }, /* @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.
@@ -786,7 +730,7 @@ class SliderComponent extends SliderBaseComponent {
         });
     }
     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" }] }); }
+    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\n    [class]=\"trackClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n    [style]=\"trackBackgroundStyle()\">\n    <div\n        [class]=\"selectionClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-dragging]=\"dragging()\"\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n        [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n        @for (tick of renderTicks(); track tick.index) {\n            <span\n                [class]=\"tickClasses()\"\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\n                [attr.data-orientation]=\"orientation()\"\n                [attr.data-value]=\"tick.value\"\n                monaSliderTick>\n            </span>\n        }\n    </div>\n}\n@if (showTicks() && showLabels()) {\n    <div\n        [class]=\"tickLabelListClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-label-position]=\"labelPosition()\">\n        @for (tick of labelTicks(); track tick.index) {\n            <span\n                [class]=\"tickLabelClasses()\"\n                [attr.data-orientation]=\"orientation()\"\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\n                @if (!tickValueTemplate()) {\n                    <span>{{ tick.value }}</span>\n                } @else {\n                    <span>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                tickValueTemplate() ?? null;\n                                context: { $implicit: tick.value }\n                            \"></ng-container>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n}\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"handleFocused()\"\n    [style]=\"handleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    #sliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\n    }\n</div>\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,
@@ -796,7 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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" }]
+                    }, template: "<div\n    [class]=\"trackClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n    [style]=\"trackBackgroundStyle()\">\n    <div\n        [class]=\"selectionClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-dragging]=\"dragging()\"\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n        [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n        @for (tick of renderTicks(); track tick.index) {\n            <span\n                [class]=\"tickClasses()\"\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\n                [attr.data-orientation]=\"orientation()\"\n                [attr.data-value]=\"tick.value\"\n                monaSliderTick>\n            </span>\n        }\n    </div>\n}\n@if (showTicks() && showLabels()) {\n    <div\n        [class]=\"tickLabelListClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-label-position]=\"labelPosition()\">\n        @for (tick of labelTicks(); track tick.index) {\n            <span\n                [class]=\"tickLabelClasses()\"\n                [attr.data-orientation]=\"orientation()\"\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\n                @if (!tickValueTemplate()) {\n                    <span>{{ tick.value }}</span>\n                } @else {\n                    <span>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                tickValueTemplate() ?? null;\n                                context: { $implicit: tick.value }\n                            \"></ng-container>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n}\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"handleFocused()\"\n    [style]=\"handleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? handlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? handlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    #sliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue() }\"></ng-container>\n    }\n</div>\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 {
@@ -1024,7 +968,7 @@ class RangeSliderComponent extends SliderBaseComponent {
         });
     }
     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" }] }); }
+    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\n    [class]=\"trackClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n    [style]=\"trackBackgroundStyle()\">\n    <div\n        [class]=\"selectionClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-dragging]=\"dragging()\"\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n        [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n        @for (tick of renderTicks(); track tick.index) {\n            <span\n                [class]=\"tickClasses()\"\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\n                [attr.data-orientation]=\"orientation()\"\n                [attr.data-value]=\"tick.value\"\n                monaSliderTick>\n            </span>\n        }\n    </div>\n}\n@if (showTicks() && showLabels()) {\n    <div\n        [class]=\"tickLabelListClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-label-position]=\"labelPosition()\">\n        @for (tick of labelTicks(); track tick.index) {\n            <span\n                [class]=\"tickLabelClasses()\"\n                [attr.data-orientation]=\"orientation()\"\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\n                @if (!tickValueTemplate()) {\n                    <span>{{ tick.value }}</span>\n                } @else {\n                    <span>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                tickValueTemplate() ?? null;\n                                context: { $implicit: tick.value }\n                            \"></ng-container>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n}\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"primaryHandleFocused()\"\n    [style]=\"primaryHandleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()[0]\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabelStart()\"\n    #sliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\n    }\n</div>\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"secondaryHandleFocused()\"\n    [style]=\"secondaryHandleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()[1]\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabelEnd()\"\n    #secondarySliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\n    }\n</div>\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,
@@ -1034,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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" }]
+                    }, template: "<div\n    [class]=\"trackClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [style.height]=\"orientation() === 'horizontal' ? sliderTrackSize() : undefined\"\n    [style.width]=\"orientation() === 'vertical' ? sliderTrackSize() : undefined\"\n    [style]=\"trackBackgroundStyle()\">\n    <div\n        [class]=\"selectionClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-dragging]=\"dragging()\"\n        [style.left.%]=\"orientation() === 'horizontal' ? selectionLeft() : undefined\"\n        [style.right.%]=\"orientation() === 'horizontal' ? 100 - selectionRight() : undefined\"\n        [style.bottom.%]=\"orientation() === 'vertical' ? selectionLeft() : undefined\"\n        [style.top.%]=\"orientation() === 'vertical' ? 100 - selectionRight() : undefined\"\n        [style]=\"selectionBackgroundStyle()\"></div>\n</div>\n@if (showTicks()) {\n    <div [class]=\"tickListClasses()\" [attr.data-orientation]=\"orientation()\">\n        @for (tick of renderTicks(); track tick.index) {\n            <span\n                [class]=\"tickClasses()\"\n                [style]=\"tick | tickStyle: tickStyleArgs()\"\n                [attr.data-orientation]=\"orientation()\"\n                [attr.data-value]=\"tick.value\"\n                monaSliderTick>\n            </span>\n        }\n    </div>\n}\n@if (showTicks() && showLabels()) {\n    <div\n        [class]=\"tickLabelListClasses()\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-label-position]=\"labelPosition()\">\n        @for (tick of labelTicks(); track tick.index) {\n            <span\n                [class]=\"tickLabelClasses()\"\n                [attr.data-orientation]=\"orientation()\"\n                [style]=\"tick | labelStyle: labelStyleArgs()\">\n                @if (!tickValueTemplate()) {\n                    <span>{{ tick.value }}</span>\n                } @else {\n                    <span>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                tickValueTemplate() ?? null;\n                                context: { $implicit: tick.value }\n                            \"></ng-container>\n                    </span>\n                }\n            </span>\n        }\n    </div>\n}\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"primaryHandleFocused()\"\n    [style]=\"primaryHandleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? primaryHandlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? primaryHandlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()[0]\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[0]) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabelStart()\"\n    #sliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[0] }\"></ng-container>\n    }\n</div>\n<div\n    [class]=\"sliderHandleClasses()\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.data-dragging]=\"dragging()\"\n    [attr.data-focused]=\"secondaryHandleFocused()\"\n    [style]=\"secondaryHandleStyle()\"\n    [style.left.%]=\"orientation() === 'horizontal' ? secondaryHandlePosition() : undefined\"\n    [style.bottom.%]=\"orientation() === 'vertical' ? secondaryHandlePosition() : undefined\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\"\n    [attr.role]=\"'slider'\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuenow]=\"normalizedValue()[1]\"\n    [attr.aria-valuetext]=\"ariaValueText() ? ariaValueText()!(normalizedValue()[1]) : null\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.aria-disabled]=\"effectiveDisabled() || null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.data-invalid]=\"invalid() || null\"\n    [attr.aria-label]=\"ariaLabelEnd()\"\n    #secondarySliderHandle>\n    @if (handleTemplate()) {\n        <ng-container\n            *ngTemplateOutlet=\"handleTemplate() ?? null; context: { $implicit: normalizedValue()[1] }\"></ng-container>\n    }\n</div>\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"] }] } });
 
 /*