@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,9 +1,10 @@
 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 { inject, ElementRef, Directive, Pipe, computed, DestroyRef, signal, contentChild, TemplateRef, viewChildren, NgZone, 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 { twMerge } from 'tailwind-merge';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
@@ -39,14 +40,28 @@ class LabelStylePipe {
         const styles = {};
         const { labelPosition, min, max, orientation } = args;
         const valuePosition = valueToPosition(tick.value, min, max);
+        const isRtl = args.direction === "rtl";
         if (orientation === "horizontal") {
-            styles.left = `${valuePosition}%`;
+            if (isRtl) {
+                styles.right = `${valuePosition}%`;
+                styles.transform = "translateX(50%)";
+            }
+            else {
+                styles.left = `${valuePosition}%`;
+                styles.transform = "translateX(-50%)";
+            }
             styles[labelPosition === "before" ? "bottom" : "top"] = "100%";
-            styles.transform = "translateX(-50%)";
         }
         else {
             styles.bottom = `${valuePosition}%`;
-            styles[labelPosition === "before" ? "right" : "left"] = "100%";
+            const side = isRtl
+                ? labelPosition === "before"
+                    ? "left"
+                    : "right"
+                : labelPosition === "before"
+                    ? "right"
+                    : "left";
+            styles[side] = "100%";
             styles.transform = "translateY(50%)";
         }
         return styles;
@@ -68,11 +83,12 @@ class TickStylePipe {
         const height = this.getHeight(tick, smallTickStep, largeTickStep, orientation);
         const width = this.getWidth(tick, smallTickStep, largeTickStep, orientation);
         if (orientation === "horizontal") {
+            const isRtl = args.direction === "rtl";
             return {
                 position: "absolute",
-                left: `${position}%`,
+                ...(isRtl ? { right: `${position}%` } : { left: `${position}%` }),
                 top: "50%",
-                transform: "translateX(-50%) translateY(-50%) translateZ(0)",
+                transform: `${isRtl ? "translateX(50%)" : "translateX(-50%)"} translateY(-50%) translateZ(0)`,
                 width: "1px",
                 height: `${height}px`,
                 backfaceVisibility: "hidden",
@@ -128,6 +144,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const SLIDER_DEFAULT_MESSAGES = {
+    maximumValue: "Maximum value",
+    minimumValue: "Minimum value",
+    sliderValue: "Slider value"
+};
+
 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 }); }
@@ -194,13 +216,11 @@ const sliderSelectionThemeVariants = cva(`
         border-none
         transition duration-(--mona-motion-fast) ease-out
 
-        data-[orientation="horizontal"]:top-0
-        data-[orientation="horizontal"]:bottom-0
+        data-[orientation="horizontal"]:inset-y-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"]:inset-x-0
         data-[orientation="vertical"]:transition-[top,bottom]
         data-[orientation="vertical"]:data-[dragging="true"]:transition-none
     `);
@@ -241,8 +261,8 @@ const sliderHandleThemeVariants = cva(`
         outline-none
         transition duration-(--mona-motion-fast) ease-out
 
-        data-[orientation="horizontal"]:translate-x-[-50%]
-        data-[orientation="horizontal"]:transition-[left]
+        data-[orientation="horizontal"]:translate-x-[-50%] rtl:data-[orientation="horizontal"]:translate-x-[50%]
+        data-[orientation="horizontal"]:transition-[left,right]
         data-[orientation="horizontal"]:data-[dragging="true"]:transition-none
 
         data-[orientation="vertical"]:translate-y-[50%]
@@ -271,15 +291,11 @@ const sliderHandleThemeVariants = cva(`
 
 class SliderBaseComponent {
     constructor() {
+        this.baseClasses = computed(() => sliderBaseThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         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(), /* @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 });
@@ -291,13 +307,19 @@ class SliderBaseComponent {
             return { background: "transparent", border: "none", boxShadow: "none" };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleTemplateStyles" }] : /* istanbul ignore next */ []));
+        this.direction = injectComponentDirection();
+        this.hostElementRef = inject(ElementRef);
+        this.i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.labelStyleArgs = computed(() => {
+            const direction = this.direction();
             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 };
+            return { direction, labelPosition, max, min, orientation, tickCount };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelStyleArgs" }] : /* istanbul ignore next */ []));
         this.labelTicks = computed(() => {
@@ -339,6 +361,20 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionBackgroundStyle" }] : /* istanbul ignore next */ []));
+        this.horizontalSelectionLeft = computed(() => {
+            if (this.orientation() !== "horizontal") {
+                return undefined;
+            }
+            return this.isRtl() ? 100 - this.selectionRight() : this.selectionLeft();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalSelectionLeft" }] : /* istanbul ignore next */ []));
+        this.horizontalSelectionRight = computed(() => {
+            if (this.orientation() !== "horizontal") {
+                return undefined;
+            }
+            return this.isRtl() ? this.selectionLeft() : 100 - this.selectionRight();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalSelectionRight" }] : /* istanbul ignore next */ []));
         this.selectionClasses = computed(() => sliderSelectionThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionClasses" }] : /* istanbul ignore next */ []));
         this.sliderHandleClasses = computed(() => {
@@ -365,6 +401,8 @@ class SliderBaseComponent {
         ...(ngDevMode ? [{ debugName: "sliderTrackSize" }] : /* istanbul ignore next */ []));
         this.tickClasses = computed(() => sliderTickThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickClasses" }] : /* istanbul ignore next */ []));
+        this.tickElements = viewChildren(SliderTickDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tickElements" }] : /* istanbul ignore next */ []));
         this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelClasses" }] : /* istanbul ignore next */ []));
         this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(), /* @ts-ignore */
@@ -372,12 +410,13 @@ class SliderBaseComponent {
         this.tickListClasses = computed(() => sliderTickListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickListClasses" }] : /* istanbul ignore next */ []));
         this.tickStyleArgs = computed(() => {
+            const direction = this.direction();
             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 };
+            return { direction, 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 });
@@ -410,6 +449,7 @@ class SliderBaseComponent {
             return sliderTrackThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+        this.zone = inject(NgZone);
         /**
          * @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
@@ -540,13 +580,16 @@ class SliderBaseComponent {
         const min = this.minValue();
         const max = this.maxValue();
         const step = this.step();
+        const isRtl = this.isRtl();
+        const decreaseKey = isRtl ? "ArrowRight" : "ArrowLeft";
+        const increaseKey = isRtl ? "ArrowLeft" : "ArrowRight";
         let newValue = currentValue;
         switch (event.key) {
-            case "ArrowLeft":
+            case decreaseKey:
             case "ArrowDown":
                 newValue = currentValue - (event.shiftKey ? step * this.shiftMultiplier() : step);
                 break;
-            case "ArrowRight":
+            case increaseKey:
             case "ArrowUp":
                 newValue = currentValue + (event.shiftKey ? step * this.shiftMultiplier() : step);
                 break;
@@ -591,7 +634,9 @@ class SliderBaseComponent {
         const containerRect = this.hostElementRef.nativeElement.getBoundingClientRect();
         let normalizedHandlePos;
         if (this.orientation() === "horizontal") {
-            const handlePos = event.clientX - containerRect.left;
+            const handlePos = this.isRtl()
+                ? containerRect.right - event.clientX
+                : event.clientX - containerRect.left;
             normalizedHandlePos = (handlePos / containerRect.width) * 100;
         }
         else {
@@ -632,11 +677,13 @@ class SliderBaseComponent {
 }
 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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { handleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SliderHandleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tickElements: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SliderTickDirective), { 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.computedAriaLabel = computed(() => this.ariaLabel() ?? this.messages().sliderValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
         this.handleFocused = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleFocused" }] : /* istanbul ignore next */ []));
         this.handlePosition = computed(() => this.positionFromValue(this.normalizedValue()), /* @ts-ignore */
@@ -646,6 +693,7 @@ class SliderComponent extends SliderBaseComponent {
             ...this.handleStyles()
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handleStyle" }] : /* istanbul ignore next */ []));
+        this.messages = this.i18n.componentMessages("slider", SLIDER_DEFAULT_MESSAGES);
         this.normalizedValue = computed(() => this.snapValue(this.value()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
         this.selectionLeft = computed(() => 0, /* @ts-ignore */
@@ -657,9 +705,9 @@ class SliderComponent extends SliderBaseComponent {
         /**
          * @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"
+         * @default null
          */
-        this.ariaLabel = input("Slider value", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        this.ariaLabel = input(null, { ...(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
@@ -730,7 +778,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\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" }] }); }
+    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.%]=\"horizontalSelectionLeft()\"\n        [style.right.%]=\"horizontalSelectionRight()\"\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' && !isRtl() ? handlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabel()\"\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,
@@ -740,12 +788,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-disabled]": "effectiveDisabled() || null",
                         "[attr.data-orientation]": "orientation()",
                         "(focus)": "focus()"
-                    }, 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" }]
+                    }, 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.%]=\"horizontalSelectionLeft()\"\n        [style.right.%]=\"horizontalSelectionRight()\"\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' && !isRtl() ? handlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabel()\"\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 {
     constructor() {
         super(...arguments);
+        this.computedAriaLabelEnd = computed(() => this.ariaLabelEnd() ?? this.messages().maximumValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabelEnd" }] : /* istanbul ignore next */ []));
+        this.computedAriaLabelStart = computed(() => this.ariaLabelStart() ?? this.messages().minimumValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAriaLabelStart" }] : /* istanbul ignore next */ []));
         this.handlePositions = computed(() => [
             this.positionFromValue(this.normalizedValue()[0]),
             this.positionFromValue(this.normalizedValue()[1])
@@ -756,6 +808,7 @@ class RangeSliderComponent extends SliderBaseComponent {
             return values[0] === values[1];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handlesOverlap" }] : /* istanbul ignore next */ []));
+        this.messages = this.i18n.componentMessages("slider", SLIDER_DEFAULT_MESSAGES);
         this.normalizedValue = computed(() => {
             const value = this.value();
             const minValue = this.snapValue(value[0]);
@@ -799,14 +852,14 @@ class RangeSliderComponent extends SliderBaseComponent {
         ...(ngDevMode ? [{ debugName: "sliderHandle" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible name for the upper-value (secondary) handle.
-         * @default "Maximum value"
+         * @default null
          */
-        this.ariaLabelEnd = input("Maximum value", { ...(ngDevMode ? { debugName: "ariaLabelEnd" } : /* istanbul ignore next */ {}), alias: "aria-label-end" });
+        this.ariaLabelEnd = input(null, { ...(ngDevMode ? { debugName: "ariaLabelEnd" } : /* istanbul ignore next */ {}), alias: "aria-label-end" });
         /**
          * @description Accessible name for the lower-value (primary) handle.
-         * @default "Minimum value"
+         * @default null
          */
-        this.ariaLabelStart = input("Minimum value", { ...(ngDevMode ? { debugName: "ariaLabelStart" } : /* istanbul ignore next */ {}), alias: "aria-label-start" });
+        this.ariaLabelStart = input(null, { ...(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.
@@ -835,7 +888,9 @@ class RangeSliderComponent extends SliderBaseComponent {
             const containerRect = this.hostElementRef.nativeElement.getBoundingClientRect();
             let normalizedClickPos;
             if (this.orientation() === "horizontal") {
-                const clickPos = event.clientX - containerRect.left;
+                const clickPos = this.isRtl()
+                    ? containerRect.right - event.clientX
+                    : event.clientX - containerRect.left;
                 normalizedClickPos = (clickPos / containerRect.width) * 100;
             }
             else {
@@ -968,7 +1023,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\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" }] }); }
+    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.%]=\"horizontalSelectionLeft()\"\n        [style.right.%]=\"horizontalSelectionRight()\"\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' && !isRtl() ? primaryHandlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabelStart()\"\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' && !isRtl() ? secondaryHandlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabelEnd()\"\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,
@@ -978,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-disabled]": "effectiveDisabled()",
                         "[attr.data-orientation]": "orientation()",
                         "(focus)": "focus()"
-                    }, 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" }]
+                    }, 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.%]=\"horizontalSelectionLeft()\"\n        [style.right.%]=\"horizontalSelectionRight()\"\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' && !isRtl() ? primaryHandlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabelStart()\"\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' && !isRtl() ? secondaryHandlePosition() : undefined\"\n    [style.right.%]=\"orientation() === 'horizontal' && isRtl() ? 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]=\"computedAriaLabelEnd()\"\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"] }] } });
 
 /*
@@ -989,5 +1044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RangeSliderComponent, SliderComponent, SliderHandleTemplateDirective, SliderTickValueTemplateDirective };
+export { RangeSliderComponent, SLIDER_DEFAULT_MESSAGES, SliderComponent, SliderHandleTemplateDirective, SliderTickValueTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-slider.mjs.map