@design-factory/angular 21.1.0 → 22.0.0-next.0

package/fesm2022/design-factory-angular-slider.mjs

@@ -0,0 +1,451 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, DestroyRef, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { AgnosWidgetDirective, callWidgetFactory, useDirectiveForHost, auBooleanAttribute, UseDirective, provideDfComponentConfig, injectDfComponentConfig } from '@design-factory/angular/internals';
+import { createSlider } from '@design-factory/core/components/slider';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+
+const DF_SLIDER_I18N_DEFAULTS = {
+    ariaLabel: () => $localize `:@@df.slider.value:Value`
+};
+/**
+ * Slider component for selecting a single value or a range of values.
+ *
+ * Supports one or more handles, ticks, value and min/max labels, RTL/flip directions and vertical orientation.
+ *
+ * @experimental 22.0.0
+ */
+class DfSlider extends AgnosWidgetDirective {
+    constructor() {
+        super(callWidgetFactory(createSlider, {
+            defaultConfig: {
+                ...DF_SLIDER_I18N_DEFAULTS
+            },
+            events: {
+                onValuesChange: (event) => {
+                    this.onChange(event);
+                    this.onTouched();
+                    this.valuesChange.emit(event);
+                }
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.containerDirective);
+            }
+        }));
+        /**
+         * Size of the slider.
+         *
+         * @defaultValue `'md'`
+         */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Minimum value that can be assigned to the slider.
+         *
+         * @defaultValue `0`
+         */
+        this.min = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum value that can be assigned to the slider.
+         *
+         * @defaultValue `100`
+         */
+        this.max = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        /**
+         * Unit value between slider steps.
+         *
+         * @defaultValue `1`
+         */
+        this.stepSize = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "stepSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Current slider values.
+         *
+         * @defaultValue `[0]`
+         */
+        this.values = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "values" }] : /* istanbul ignore next */ []));
+        /**
+         * If `true`, slider value cannot be changed but the slider is still focusable.
+         *
+         * @defaultValue `false`
+         */
+        this.readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, slider value cannot be changed and the slider cannot be focused.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the slider is vertically positioned; otherwise it is horizontal.
+         *
+         * @defaultValue `false`
+         */
+        this.vertical = input(undefined, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If set, overrides the auto-detected RTL direction.
+         * When not set, RTL is auto-detected from the element's computed CSS direction.
+         *
+         * @defaultValue `false`
+         */
+        this.rtl = input(undefined, { ...(ngDevMode ? { debugName: "rtl" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, visually flips the slider direction (both horizontal and vertical).
+         *
+         * @defaultValue `false`
+         */
+        this.flip = input(undefined, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the value labels are displayed on the slider.
+         *
+         * @defaultValue `true`
+         */
+        this.showValueLabels = input(undefined, { ...(ngDevMode ? { debugName: "showValueLabels" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the min and max labels are displayed on the slider.
+         *
+         * @defaultValue `true`
+         */
+        this.showMinMaxLabels = input(undefined, { ...(ngDevMode ? { debugName: "showMinMaxLabels" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the ticks are displayed on the slider.
+         *
+         * @defaultValue `false`
+         */
+        this.showTicks = input(undefined, { ...(ngDevMode ? { debugName: "showTicks" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * Unit value between the ticks.
+         * If set to `0`, the {@link stepSize} is used to space the ticks.
+         *
+         * @defaultValue `0`
+         */
+        this.tickInterval = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tickInterval" }] : /* istanbul ignore next */ []));
+        /**
+         * If `true`, the tick values are displayed on the slider.
+         *
+         * @defaultValue `true`
+         */
+        this.showTickValues = input(undefined, { ...(ngDevMode ? { debugName: "showTickValues" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * Minimum distance between two handle values.
+         * When set to `0`, no minimum distance constraint is applied.
+         *
+         * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+         * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+         *
+         * @defaultValue `0`
+         */
+        this.minRange = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minRange" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum distance between two handle values.
+         * When set to `0`, no maximum distance constraint is applied.
+         *
+         * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+         * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+         *
+         * @defaultValue `0`
+         */
+        this.maxRange = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxRange" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, if moving a handle would break the {@link minRange} or {@link maxRange} constraint,
+         * it will push or pull the neighboring handles to maintain the allowed range.
+         *
+         * @defaultValue `false`
+         */
+        this.pushRange = input(undefined, { ...(ngDevMode ? { debugName: "pushRange" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * Returns the value for the `aria-label` attribute of each slider handle.
+         *
+         * @param sortedIndex - index of the handle in the sorted list
+         *
+         * @defaultValue `() => 'Value'`
+         */
+        this.ariaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Returns the value for the `aria-labelledby` attribute of each slider handle.
+         *
+         * @param sortedIndex - index of the handle in the sorted list
+         *
+         * @defaultValue `() => ''`
+         */
+        this.ariaLabelledBy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+        /**
+         * Returns the value for the `aria-valuetext` attribute of each slider handle.
+         *
+         * @param value - current value of the handle
+         * @param sortedIndex - index of the handle in the sorted list
+         *
+         * @defaultValue `() => ''`
+         */
+        this.ariaValueText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when slider values are changed.
+         *
+         * Event payload equals the updated slider values.
+         */
+        this.valuesChange = output();
+        /**
+         * Control value accessor methods
+         */
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.updateTimeout));
+    }
+    /**
+     * Key handler that sets the refocus element only on the keystrokes that move
+     * the element up the DOM
+     * @param event object containing keystroke and the target element
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'Home':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'End':
+                clearTimeout(this.updateTimeout);
+                this.updateTimeout = setTimeout(() => {
+                    event.target?.focus();
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            this['_agnosWidget'].patch({
+                values: value
+            });
+        }
+        else {
+            this['_agnosWidget'].patch({
+                values: [value]
+            });
+        }
+    }
+    setDisabledState(isDisabled) {
+        this['_agnosWidget'].patch({
+            disabled: isDisabled
+        });
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSlider, isStandalone: true, selector: "df-slider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, showMinMaxLabels: { classPropertyName: "showMinMaxLabels", publicName: "showMinMaxLabels", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, tickInterval: { classPropertyName: "tickInterval", publicName: "tickInterval", isSignal: true, isRequired: false, transformFunction: null }, showTickValues: { classPropertyName: "showTickValues", publicName: "showTickValues", isSignal: true, isRequired: false, transformFunction: null }, minRange: { classPropertyName: "minRange", publicName: "minRange", isSignal: true, isRequired: false, transformFunction: null }, maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null }, pushRange: { classPropertyName: "pushRange", publicName: "pushRange", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, host: { listeners: { "blur": "handleBlur()" }, properties: { "class.df-slider-sm": "size() === \"sm\"", "class.df-slider-lg": "size() === \"lg\"" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DfSlider), multi: true }], usesInheritance: true, ngImport: i0, template: `
+    <div [dfUse]="directives.sliderDirective">
+      @for (option of state.progressDisplayOptions(); track option.id) {
+        <div [dfUse]="[directives.progressDisplayDirective, { option }]"></div>
+      }
+      <div [dfUse]="directives.clickableAreaDirective"></div>
+      @if (state.showMinMaxLabels()) {
+        <div [dfUse]="directives.minLabelDirective">
+          <ng-template [ngTemplateOutlet]="sliderLabel" [ngTemplateOutletContext]="{ $implicit: state.min() }" />
+        </div>
+        <div [dfUse]="directives.maxLabelDirective">
+          <ng-template [ngTemplateOutlet]="sliderLabel" [ngTemplateOutletContext]="{ $implicit: state.max() }" />
+        </div>
+      }
+      @if (state.showValueLabels() && state.combinedLabelDisplay()) {
+        <div [dfUse]="directives.combinedHandleLabelDisplayDirective">
+          @if (state.rtl()) {
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[1] }"
+            />
+            -
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[0] }"
+            />
+          } @else {
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[0] }"
+            />
+            -
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[1] }"
+            />
+          }
+        </div>
+      }
+      @for (tick of state.ticks(); track tick.position) {
+        @if (tick.displayLabel) {
+          <span [dfUse]="[directives.tickLabelDirective, { tick }]">
+            {{ tick.value }}
+          </span>
+        }
+        <span [dfUse]="[directives.tickDirective, { tick }]">
+          <svg xmlns="http://www.w3.org/2000/svg">
+            <circle
+              class="df-slider-tick-outer"
+              [class.df-slider-tick-disabled]="state.disabled()"
+              [class.df-slider-tick-selected]="tick.selected"
+            />
+            @if (tick.selected) {
+              <circle class="df-slider-tick-inner df-slider-tick-selected" />
+            }
+          </svg>
+        </span>
+      }
+      @for (item of state.sortedHandles(); track item.id; let i = $index) {
+        <span [dfUse]="[directives.handleDirective, { item }]" (keydown)="onKeyDown($event)" tabindex="0"></span>
+        @if (state.showValueLabels()) {
+          <div [dfUse]="[directives.handleLabelDisplayDirective, { index: i }]">
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.values()[i] }"
+            />
+          </div>
+        }
+      }
+    </div>
+
+    <ng-template #sliderLabel let-value> {{ value }}</ng-template>
+  `, isInline: true, styles: [":host{display:block}.df-slider{touch-action:none;height:100%;display:block}.df-slider.df-slider-horizontal{padding-inline:.625rem;padding-block:.75rem}.df-slider.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:2.1875rem}.df-slider.df-slider-vertical{padding-block:.625rem;padding-inline:.75rem calc(.5rem + 4ch)}.df-slider .df-slider-content{border-radius:.125rem;font-size:1rem;line-height:1.5}.df-slider .df-slider-content.df-slider-horizontal{height:.25rem}.df-slider .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .625rem)}.df-slider .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .5rem)}.df-slider .df-slider-content.df-slider-vertical{width:.25rem}.df-slider .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .625rem)}.df-slider .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .5rem)}.df-slider .df-slider-content .df-slider-handle{width:1.25rem;height:1.25rem}.df-slider .df-slider-content .df-slider-progress{border-radius:.125rem}.df-slider .df-slider-content .df-slider-label{margin-block-start:-2rem}.df-slider .df-slider-content .df-slider-label-vertical{margin-inline-start:1rem}.df-slider .df-slider-content .df-slider-tick{height:1rem;width:1rem}.df-slider .df-slider-content .df-slider-tick svg{width:1rem;height:1rem}.df-slider .df-slider-content .df-slider-tick-label{margin-block-start:-2rem}.df-slider .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:1rem}.df-slider.df-slider-sm.df-slider-horizontal{padding-inline:.5rem;padding-block:.6rem}.df-slider.df-slider-sm.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:1.9rem}.df-slider.df-slider-sm.df-slider-vertical{padding-block:.5rem;padding-inline:.6rem calc(.4rem + 4ch)}.df-slider.df-slider-sm .df-slider-content{border-radius:.1rem;font-size:.875rem;line-height:1.5}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal{height:.2rem}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .5rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .375rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical{width:.2rem}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .5rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .375rem)}.df-slider.df-slider-sm .df-slider-content .df-slider-handle{width:1rem;height:1rem}.df-slider.df-slider-sm .df-slider-content .df-slider-progress{border-radius:.1rem}.df-slider.df-slider-sm .df-slider-content .df-slider-label{margin-block-start:-1.7125rem}.df-slider.df-slider-sm .df-slider-content .df-slider-label-vertical{margin-inline-start:.85rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick{height:.75rem;width:.75rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick svg{width:.75rem;height:.75rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick-label{margin-block-start:-1.7125rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:.85rem}.df-slider.df-slider-lg.df-slider-horizontal{padding-inline:.75rem;padding-block:.890625rem}.df-slider.df-slider-lg.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:2.46875rem}.df-slider.df-slider-lg.df-slider-vertical{padding-block:.75rem;padding-inline:.890625rem calc(.59375rem + 4ch)}.df-slider.df-slider-lg .df-slider-content{border-radius:.15625rem;font-size:1.125rem;line-height:1.5}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal{height:.3125rem}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .75rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .625rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical{width:.3125rem}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .75rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .625rem)}.df-slider.df-slider-lg .df-slider-content .df-slider-handle{width:1.5rem;height:1.5rem}.df-slider.df-slider-lg .df-slider-content .df-slider-progress{border-radius:.15625rem}.df-slider.df-slider-lg .df-slider-content .df-slider-label{margin-block-start:-2.28125rem}.df-slider.df-slider-lg .df-slider-content .df-slider-label-vertical{margin-inline-start:1.15625rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick{height:1.25rem;width:1.25rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick svg{width:1.25rem;height:1.25rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick-label{margin-block-start:-2.28125rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:1.15625rem}.df-slider .df-slider-content{display:flex;position:relative;background-color:var(--df-color-disabled-main-foreground)}.df-slider .df-slider-content.df-slider-horizontal{width:100%}.df-slider .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal,.df-slider .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{transform:translate(-50%)}.df-slider .df-slider-content.df-slider-vertical{height:100%}.df-slider .df-slider-content.df-slider-vertical .df-slider-handle-vertical,.df-slider .df-slider-content.df-slider-vertical .df-slider-tick-vertical{transform:translateY(-50%)}.df-slider .df-slider-content .df-slider-handle{position:absolute;background-color:var(--df-color-primary-main-default-background);border:none;border-radius:50%;outline:none;padding:0;cursor:pointer}.df-slider .df-slider-content .df-slider-handle:not([disabled]):hover{background-color:var(--df-color-primary-main-hovered-background)}.df-slider .df-slider-content .df-slider-handle:not([disabled]):hover:focus-visible{box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-color-primary-main-hovered-border)}.df-slider .df-slider-content .df-slider-handle:focus-visible{box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-color-primary-main-default-border)}.df-slider .df-slider-content .df-slider-progress{position:absolute;background-color:var(--df-color-primary-main-default-background)}.df-slider .df-slider-content .df-slider-label{position:absolute;font-weight:var(--df-typo-weight-regular);text-wrap:nowrap}.df-slider .df-slider-content .df-slider-label.df-slider-label-min:not(.df-slider-rtl){left:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-min.df-slider-rtl{right:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-max:not(.df-slider-rtl){right:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-max.df-slider-rtl{left:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-now{font-weight:var(--df-typo-weight-medium);transform:translate(-50%)}.df-slider .df-slider-content .df-slider-label.df-slider-invisible{visibility:hidden}.df-slider .df-slider-content .df-slider-label-vertical{position:absolute;white-space:nowrap}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-min:not(.df-slider-rtl){top:calc(100% - .5rem);transform:translateY(-75%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-min.df-slider-rtl{top:.25rem;transform:translateY(-25%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-max:not(.df-slider-rtl){top:.25rem;transform:translateY(-25%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-max.df-slider-rtl{top:calc(100% - .5rem);transform:translateY(-75%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-now{transform:translateY(-50%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-invisible{visibility:hidden}.df-slider .df-slider-content .df-slider-tick{position:absolute;cursor:pointer}.df-slider .df-slider-content .df-slider-tick svg{display:block;fill:none}.df-slider .df-slider-content .df-slider-tick svg circle{cx:50%;cy:50%;fill:var(--df-color-neutral-alt-default-background)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-outer{r:45%;stroke:var(--df-color-neutral-main-default-border);stroke-width:1.5}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-outer.df-slider-tick-disabled{stroke:var(--df-color-disabled-main-border)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-outer{fill:var(--df-color-primary-main-default-border);stroke:none;r:50%}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-outer.df-slider-tick-disabled{fill:var(--df-color-disabled-main-border)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-inner{r:25%}.df-slider .df-slider-content .df-slider-tick-label{position:absolute;text-wrap:nowrap;transform:translate(-50%)}.df-slider .df-slider-content .df-slider-tick-label-vertical{position:absolute;transform:translateY(75%)}.df-slider .df-slider-content .df-slider-tick-label-now{font-weight:var(--df-typo-weight-medium)}.df-slider .df-slider-content .df-slider-clickable-area{height:1.5rem;width:100%;transform:translateY(-50%);cursor:pointer}.df-slider .df-slider-content .df-slider-clickable-area-vertical{width:1.5rem;height:100%;transform:translate(-50%);flex-shrink:0;cursor:pointer}.df-slider .df-slider-content .df-slider-clickable-area-with-ticks{cursor:default}.df-slider .df-slider-content.df-slider-disabled{cursor:not-allowed;background-color:var(--df-color-disabled-main-background)}.df-slider .df-slider-content.df-slider-disabled .df-slider-label,.df-slider .df-slider-content.df-slider-disabled .df-slider-label-vertical,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick-label,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick-label-vertical{color:var(--df-color-disabled-main-foreground)}.df-slider .df-slider-content.df-slider-disabled .df-slider-progress,.df-slider .df-slider-content.df-slider-disabled .df-slider-handle{background-color:var(--df-color-disabled-main-foreground);cursor:not-allowed}.df-slider .df-slider-content.df-slider-disabled .df-slider-clickable-area,.df-slider .df-slider-content.df-slider-disabled .df-slider-clickable-area-vertical,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-slider', encapsulation: ViewEncapsulation.None, imports: [UseDirective, NgTemplateOutlet], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DfSlider), multi: true }], host: {
+                        '[class.df-slider-sm]': 'size() === "sm"',
+                        '[class.df-slider-lg]': 'size() === "lg"',
+                        '(blur)': 'handleBlur()'
+                    }, template: `
+    <div [dfUse]="directives.sliderDirective">
+      @for (option of state.progressDisplayOptions(); track option.id) {
+        <div [dfUse]="[directives.progressDisplayDirective, { option }]"></div>
+      }
+      <div [dfUse]="directives.clickableAreaDirective"></div>
+      @if (state.showMinMaxLabels()) {
+        <div [dfUse]="directives.minLabelDirective">
+          <ng-template [ngTemplateOutlet]="sliderLabel" [ngTemplateOutletContext]="{ $implicit: state.min() }" />
+        </div>
+        <div [dfUse]="directives.maxLabelDirective">
+          <ng-template [ngTemplateOutlet]="sliderLabel" [ngTemplateOutletContext]="{ $implicit: state.max() }" />
+        </div>
+      }
+      @if (state.showValueLabels() && state.combinedLabelDisplay()) {
+        <div [dfUse]="directives.combinedHandleLabelDisplayDirective">
+          @if (state.rtl()) {
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[1] }"
+            />
+            -
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[0] }"
+            />
+          } @else {
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[0] }"
+            />
+            -
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.sortedValues()[1] }"
+            />
+          }
+        </div>
+      }
+      @for (tick of state.ticks(); track tick.position) {
+        @if (tick.displayLabel) {
+          <span [dfUse]="[directives.tickLabelDirective, { tick }]">
+            {{ tick.value }}
+          </span>
+        }
+        <span [dfUse]="[directives.tickDirective, { tick }]">
+          <svg xmlns="http://www.w3.org/2000/svg">
+            <circle
+              class="df-slider-tick-outer"
+              [class.df-slider-tick-disabled]="state.disabled()"
+              [class.df-slider-tick-selected]="tick.selected"
+            />
+            @if (tick.selected) {
+              <circle class="df-slider-tick-inner df-slider-tick-selected" />
+            }
+          </svg>
+        </span>
+      }
+      @for (item of state.sortedHandles(); track item.id; let i = $index) {
+        <span [dfUse]="[directives.handleDirective, { item }]" (keydown)="onKeyDown($event)" tabindex="0"></span>
+        @if (state.showValueLabels()) {
+          <div [dfUse]="[directives.handleLabelDisplayDirective, { index: i }]">
+            <ng-template
+              [ngTemplateOutlet]="sliderLabel"
+              [ngTemplateOutletContext]="{ $implicit: state.values()[i] }"
+            />
+          </div>
+        }
+      }
+    </div>
+
+    <ng-template #sliderLabel let-value> {{ value }}</ng-template>
+  `, styles: [":host{display:block}.df-slider{touch-action:none;height:100%;display:block}.df-slider.df-slider-horizontal{padding-inline:.625rem;padding-block:.75rem}.df-slider.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:2.1875rem}.df-slider.df-slider-vertical{padding-block:.625rem;padding-inline:.75rem calc(.5rem + 4ch)}.df-slider .df-slider-content{border-radius:.125rem;font-size:1rem;line-height:1.5}.df-slider .df-slider-content.df-slider-horizontal{height:.25rem}.df-slider .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .625rem)}.df-slider .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .5rem)}.df-slider .df-slider-content.df-slider-vertical{width:.25rem}.df-slider .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .625rem)}.df-slider .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .5rem)}.df-slider .df-slider-content .df-slider-handle{width:1.25rem;height:1.25rem}.df-slider .df-slider-content .df-slider-progress{border-radius:.125rem}.df-slider .df-slider-content .df-slider-label{margin-block-start:-2rem}.df-slider .df-slider-content .df-slider-label-vertical{margin-inline-start:1rem}.df-slider .df-slider-content .df-slider-tick{height:1rem;width:1rem}.df-slider .df-slider-content .df-slider-tick svg{width:1rem;height:1rem}.df-slider .df-slider-content .df-slider-tick-label{margin-block-start:-2rem}.df-slider .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:1rem}.df-slider.df-slider-sm.df-slider-horizontal{padding-inline:.5rem;padding-block:.6rem}.df-slider.df-slider-sm.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:1.9rem}.df-slider.df-slider-sm.df-slider-vertical{padding-block:.5rem;padding-inline:.6rem calc(.4rem + 4ch)}.df-slider.df-slider-sm .df-slider-content{border-radius:.1rem;font-size:.875rem;line-height:1.5}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal{height:.2rem}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .5rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .375rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical{width:.2rem}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .5rem)}.df-slider.df-slider-sm .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .375rem)}.df-slider.df-slider-sm .df-slider-content .df-slider-handle{width:1rem;height:1rem}.df-slider.df-slider-sm .df-slider-content .df-slider-progress{border-radius:.1rem}.df-slider.df-slider-sm .df-slider-content .df-slider-label{margin-block-start:-1.7125rem}.df-slider.df-slider-sm .df-slider-content .df-slider-label-vertical{margin-inline-start:.85rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick{height:.75rem;width:.75rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick svg{width:.75rem;height:.75rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick-label{margin-block-start:-1.7125rem}.df-slider.df-slider-sm .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:.85rem}.df-slider.df-slider-lg.df-slider-horizontal{padding-inline:.75rem;padding-block:.890625rem}.df-slider.df-slider-lg.df-slider-horizontal:has(.df-slider-with-labels){padding-block-start:2.46875rem}.df-slider.df-slider-lg.df-slider-vertical{padding-block:.75rem;padding-inline:.890625rem calc(.59375rem + 4ch)}.df-slider.df-slider-lg .df-slider-content{border-radius:.15625rem;font-size:1.125rem;line-height:1.5}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal{height:.3125rem}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal{top:calc(50% - .75rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{top:calc(50% - .625rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical{width:.3125rem}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical .df-slider-handle-vertical{left:calc(50% - .75rem)}.df-slider.df-slider-lg .df-slider-content.df-slider-vertical .df-slider-tick-vertical{left:calc(50% - .625rem)}.df-slider.df-slider-lg .df-slider-content .df-slider-handle{width:1.5rem;height:1.5rem}.df-slider.df-slider-lg .df-slider-content .df-slider-progress{border-radius:.15625rem}.df-slider.df-slider-lg .df-slider-content .df-slider-label{margin-block-start:-2.28125rem}.df-slider.df-slider-lg .df-slider-content .df-slider-label-vertical{margin-inline-start:1.15625rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick{height:1.25rem;width:1.25rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick svg{width:1.25rem;height:1.25rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick-label{margin-block-start:-2.28125rem}.df-slider.df-slider-lg .df-slider-content .df-slider-tick-label-vertical{margin-inline-start:1.15625rem}.df-slider .df-slider-content{display:flex;position:relative;background-color:var(--df-color-disabled-main-foreground)}.df-slider .df-slider-content.df-slider-horizontal{width:100%}.df-slider .df-slider-content.df-slider-horizontal .df-slider-handle-horizontal,.df-slider .df-slider-content.df-slider-horizontal .df-slider-tick-horizontal{transform:translate(-50%)}.df-slider .df-slider-content.df-slider-vertical{height:100%}.df-slider .df-slider-content.df-slider-vertical .df-slider-handle-vertical,.df-slider .df-slider-content.df-slider-vertical .df-slider-tick-vertical{transform:translateY(-50%)}.df-slider .df-slider-content .df-slider-handle{position:absolute;background-color:var(--df-color-primary-main-default-background);border:none;border-radius:50%;outline:none;padding:0;cursor:pointer}.df-slider .df-slider-content .df-slider-handle:not([disabled]):hover{background-color:var(--df-color-primary-main-hovered-background)}.df-slider .df-slider-content .df-slider-handle:not([disabled]):hover:focus-visible{box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-color-primary-main-hovered-border)}.df-slider .df-slider-content .df-slider-handle:focus-visible{box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-color-primary-main-default-border)}.df-slider .df-slider-content .df-slider-progress{position:absolute;background-color:var(--df-color-primary-main-default-background)}.df-slider .df-slider-content .df-slider-label{position:absolute;font-weight:var(--df-typo-weight-regular);text-wrap:nowrap}.df-slider .df-slider-content .df-slider-label.df-slider-label-min:not(.df-slider-rtl){left:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-min.df-slider-rtl{right:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-max:not(.df-slider-rtl){right:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-max.df-slider-rtl{left:0}.df-slider .df-slider-content .df-slider-label.df-slider-label-now{font-weight:var(--df-typo-weight-medium);transform:translate(-50%)}.df-slider .df-slider-content .df-slider-label.df-slider-invisible{visibility:hidden}.df-slider .df-slider-content .df-slider-label-vertical{position:absolute;white-space:nowrap}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-min:not(.df-slider-rtl){top:calc(100% - .5rem);transform:translateY(-75%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-min.df-slider-rtl{top:.25rem;transform:translateY(-25%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-max:not(.df-slider-rtl){top:.25rem;transform:translateY(-25%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-max.df-slider-rtl{top:calc(100% - .5rem);transform:translateY(-75%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-label-vertical-now{transform:translateY(-50%)}.df-slider .df-slider-content .df-slider-label-vertical.df-slider-invisible{visibility:hidden}.df-slider .df-slider-content .df-slider-tick{position:absolute;cursor:pointer}.df-slider .df-slider-content .df-slider-tick svg{display:block;fill:none}.df-slider .df-slider-content .df-slider-tick svg circle{cx:50%;cy:50%;fill:var(--df-color-neutral-alt-default-background)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-outer{r:45%;stroke:var(--df-color-neutral-main-default-border);stroke-width:1.5}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-outer.df-slider-tick-disabled{stroke:var(--df-color-disabled-main-border)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-outer{fill:var(--df-color-primary-main-default-border);stroke:none;r:50%}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-outer.df-slider-tick-disabled{fill:var(--df-color-disabled-main-border)}.df-slider .df-slider-content .df-slider-tick svg circle.df-slider-tick-selected.df-slider-tick-inner{r:25%}.df-slider .df-slider-content .df-slider-tick-label{position:absolute;text-wrap:nowrap;transform:translate(-50%)}.df-slider .df-slider-content .df-slider-tick-label-vertical{position:absolute;transform:translateY(75%)}.df-slider .df-slider-content .df-slider-tick-label-now{font-weight:var(--df-typo-weight-medium)}.df-slider .df-slider-content .df-slider-clickable-area{height:1.5rem;width:100%;transform:translateY(-50%);cursor:pointer}.df-slider .df-slider-content .df-slider-clickable-area-vertical{width:1.5rem;height:100%;transform:translate(-50%);flex-shrink:0;cursor:pointer}.df-slider .df-slider-content .df-slider-clickable-area-with-ticks{cursor:default}.df-slider .df-slider-content.df-slider-disabled{cursor:not-allowed;background-color:var(--df-color-disabled-main-background)}.df-slider .df-slider-content.df-slider-disabled .df-slider-label,.df-slider .df-slider-content.df-slider-disabled .df-slider-label-vertical,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick-label,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick-label-vertical{color:var(--df-color-disabled-main-foreground)}.df-slider .df-slider-content.df-slider-disabled .df-slider-progress,.df-slider .df-slider-content.df-slider-disabled .df-slider-handle{background-color:var(--df-color-disabled-main-foreground);cursor:not-allowed}.df-slider .df-slider-content.df-slider-disabled .df-slider-clickable-area,.df-slider .df-slider-content.df-slider-disabled .df-slider-clickable-area-vertical,.df-slider .df-slider-content.df-slider-disabled .df-slider-tick{cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], stepSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSize", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], tickInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickInterval", required: false }] }], showTickValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTickValues", required: false }] }], minRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRange", required: false }] }], maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], pushRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushRange", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
+
+/**
+ * Slider config key in the global DF component config.
+ */
+const SLIDER_CONFIG_KEY = 'slider';
+/**
+ * Provides the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig({ ariaLabel: () => 'Custom label' })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ *
+ * @since 22.0.0
+ */
+const provideDfSliderConfig = provideDfComponentConfig(SLIDER_CONFIG_KEY);
+/**
+ * Injects the configuration for the slider component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfSliderConfig()]
+ * })
+ * export class MySliderComponent {
+ *   readonly sliderConfig = injectDfSliderConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the slider configuration.
+ *
+ * @since 22.0.0
+ */
+const injectDfSliderConfig = injectDfComponentConfig(SLIDER_CONFIG_KEY);
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfSlider, SLIDER_CONFIG_KEY, injectDfSliderConfig, provideDfSliderConfig };
+//# sourceMappingURL=design-factory-angular-slider.mjs.map

package/fesm2022/design-factory-angular-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-slider.mjs","sources":["../../slider/slider.ts","../../slider/slider.config.ts","../../slider/design-factory-angular-slider.ts"],"sourcesContent":["import { Component, DestroyRef, forwardRef, inject, input, output, ViewEncapsulation } from '@angular/core';\nimport {\n  AgnosWidgetDirective,\n  UseDirective,\n  useDirectiveForHost,\n  callWidgetFactory,\n  auBooleanAttribute\n} from '@design-factory/angular/internals';\nimport { SliderWidget, createSlider } from '@design-factory/core/components/slider';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Available slider sizes.\n *\n * @experimental 22.0.0\n */\nexport type DfSliderSize = 'sm' | 'md' | 'lg';\n\nconst DF_SLIDER_I18N_DEFAULTS = {\n  ariaLabel: () => $localize`:@@df.slider.value:Value`\n};\n\n/**\n * Slider component for selecting a single value or a range of values.\n *\n * Supports one or more handles, ticks, value and min/max labels, RTL/flip directions and vertical orientation.\n *\n * @experimental 22.0.0\n */\n@Component({\n  selector: 'df-slider',\n  encapsulation: ViewEncapsulation.None,\n  imports: [UseDirective, NgTemplateOutlet],\n  styles: \"@use '@design-factory/components-styles/slider';\",\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DfSlider), multi: true }],\n  host: {\n    '[class.df-slider-sm]': 'size() === \"sm\"',\n    '[class.df-slider-lg]': 'size() === \"lg\"',\n    '(blur)': 'handleBlur()'\n  },\n  template: `\n    <div [dfUse]=\"directives.sliderDirective\">\n      @for (option of state.progressDisplayOptions(); track option.id) {\n        <div [dfUse]=\"[directives.progressDisplayDirective, { option }]\"></div>\n      }\n      <div [dfUse]=\"directives.clickableAreaDirective\"></div>\n      @if (state.showMinMaxLabels()) {\n        <div [dfUse]=\"directives.minLabelDirective\">\n          <ng-template [ngTemplateOutlet]=\"sliderLabel\" [ngTemplateOutletContext]=\"{ $implicit: state.min() }\" />\n        </div>\n        <div [dfUse]=\"directives.maxLabelDirective\">\n          <ng-template [ngTemplateOutlet]=\"sliderLabel\" [ngTemplateOutletContext]=\"{ $implicit: state.max() }\" />\n        </div>\n      }\n      @if (state.showValueLabels() && state.combinedLabelDisplay()) {\n        <div [dfUse]=\"directives.combinedHandleLabelDisplayDirective\">\n          @if (state.rtl()) {\n            <ng-template\n              [ngTemplateOutlet]=\"sliderLabel\"\n              [ngTemplateOutletContext]=\"{ $implicit: state.sortedValues()[1] }\"\n            />\n            -\n            <ng-template\n              [ngTemplateOutlet]=\"sliderLabel\"\n              [ngTemplateOutletContext]=\"{ $implicit: state.sortedValues()[0] }\"\n            />\n          } @else {\n            <ng-template\n              [ngTemplateOutlet]=\"sliderLabel\"\n              [ngTemplateOutletContext]=\"{ $implicit: state.sortedValues()[0] }\"\n            />\n            -\n            <ng-template\n              [ngTemplateOutlet]=\"sliderLabel\"\n              [ngTemplateOutletContext]=\"{ $implicit: state.sortedValues()[1] }\"\n            />\n          }\n        </div>\n      }\n      @for (tick of state.ticks(); track tick.position) {\n        @if (tick.displayLabel) {\n          <span [dfUse]=\"[directives.tickLabelDirective, { tick }]\">\n            {{ tick.value }}\n          </span>\n        }\n        <span [dfUse]=\"[directives.tickDirective, { tick }]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\">\n            <circle\n              class=\"df-slider-tick-outer\"\n              [class.df-slider-tick-disabled]=\"state.disabled()\"\n              [class.df-slider-tick-selected]=\"tick.selected\"\n            />\n            @if (tick.selected) {\n              <circle class=\"df-slider-tick-inner df-slider-tick-selected\" />\n            }\n          </svg>\n        </span>\n      }\n      @for (item of state.sortedHandles(); track item.id; let i = $index) {\n        <span [dfUse]=\"[directives.handleDirective, { item }]\" (keydown)=\"onKeyDown($event)\" tabindex=\"0\"></span>\n        @if (state.showValueLabels()) {\n          <div [dfUse]=\"[directives.handleLabelDisplayDirective, { index: i }]\">\n            <ng-template\n              [ngTemplateOutlet]=\"sliderLabel\"\n              [ngTemplateOutletContext]=\"{ $implicit: state.values()[i] }\"\n            />\n          </div>\n        }\n      }\n    </div>\n\n    <ng-template #sliderLabel let-value> {{ value }}</ng-template>\n  `\n})\nexport class DfSlider extends AgnosWidgetDirective<SliderWidget> implements ControlValueAccessor {\n  private updateTimeout?: ReturnType<typeof setTimeout>;\n\n  /**\n   * Size of the slider.\n   *\n   * @defaultValue `'md'`\n   */\n  readonly size = input<DfSliderSize>('md');\n\n  /**\n   * Minimum value that can be assigned to the slider.\n   *\n   * @defaultValue `0`\n   */\n  readonly min = input<number>();\n\n  /**\n   * Maximum value that can be assigned to the slider.\n   *\n   * @defaultValue `100`\n   */\n  readonly max = input<number>();\n\n  /**\n   * Unit value between slider steps.\n   *\n   * @defaultValue `1`\n   */\n  readonly stepSize = input<number>();\n\n  /**\n   * Current slider values.\n   *\n   * @defaultValue `[0]`\n   */\n  readonly values = input<number[]>();\n\n  /**\n   * If `true`, slider value cannot be changed but the slider is still focusable.\n   *\n   * @defaultValue `false`\n   */\n  readonly readonly = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, slider value cannot be changed and the slider cannot be focused.\n   *\n   * @defaultValue `false`\n   */\n  readonly disabled = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, the slider is vertically positioned; otherwise it is horizontal.\n   *\n   * @defaultValue `false`\n   */\n  readonly vertical = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If set, overrides the auto-detected RTL direction.\n   * When not set, RTL is auto-detected from the element's computed CSS direction.\n   *\n   * @defaultValue `false`\n   */\n  readonly rtl = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, visually flips the slider direction (both horizontal and vertical).\n   *\n   * @defaultValue `false`\n   */\n  readonly flip = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, the value labels are displayed on the slider.\n   *\n   * @defaultValue `true`\n   */\n  readonly showValueLabels = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, the min and max labels are displayed on the slider.\n   *\n   * @defaultValue `true`\n   */\n  readonly showMinMaxLabels = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * If `true`, the ticks are displayed on the slider.\n   *\n   * @defaultValue `false`\n   */\n  readonly showTicks = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * Unit value between the ticks.\n   * If set to `0`, the {@link stepSize} is used to space the ticks.\n   *\n   * @defaultValue `0`\n   */\n  readonly tickInterval = input<number>();\n\n  /**\n   * If `true`, the tick values are displayed on the slider.\n   *\n   * @defaultValue `true`\n   */\n  readonly showTickValues = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * Minimum distance between two handle values.\n   * When set to `0`, no minimum distance constraint is applied.\n   *\n   * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),\n   * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.\n   *\n   * @defaultValue `0`\n   */\n  readonly minRange = input<number>();\n\n  /**\n   * Maximum distance between two handle values.\n   * When set to `0`, no maximum distance constraint is applied.\n   *\n   * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),\n   * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.\n   *\n   * @defaultValue `0`\n   */\n  readonly maxRange = input<number>();\n\n  /**\n   * When `true`, if moving a handle would break the {@link minRange} or {@link maxRange} constraint,\n   * it will push or pull the neighboring handles to maintain the allowed range.\n   *\n   * @defaultValue `false`\n   */\n  readonly pushRange = input(undefined, { transform: auBooleanAttribute });\n\n  /**\n   * Returns the value for the `aria-label` attribute of each slider handle.\n   *\n   * @param sortedIndex - index of the handle in the sorted list\n   *\n   * @defaultValue `() => 'Value'`\n   */\n  readonly ariaLabel = input<(sortedIndex: number) => string>();\n\n  /**\n   * Returns the value for the `aria-labelledby` attribute of each slider handle.\n   *\n   * @param sortedIndex - index of the handle in the sorted list\n   *\n   * @defaultValue `() => ''`\n   */\n  readonly ariaLabelledBy = input<(sortedIndex: number) => string>();\n\n  /**\n   * Returns the value for the `aria-valuetext` attribute of each slider handle.\n   *\n   * @param value - current value of the handle\n   * @param sortedIndex - index of the handle in the sorted list\n   *\n   * @defaultValue `() => ''`\n   */\n  readonly ariaValueText = input<(value: number, sortedIndex: number) => string>();\n\n  /**\n   * Emitted when slider values are changed.\n   *\n   * Event payload equals the updated slider values.\n   */\n  readonly valuesChange = output<number[]>();\n\n  constructor() {\n    super(\n      callWidgetFactory(createSlider, {\n        defaultConfig: {\n          ...DF_SLIDER_I18N_DEFAULTS\n        },\n        events: {\n          onValuesChange: (event) => {\n            this.onChange(event);\n            this.onTouched();\n            this.valuesChange.emit(event);\n          }\n        },\n        afterInit: (widget) => {\n          useDirectiveForHost(widget.directives.containerDirective);\n        }\n      })\n    );\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.updateTimeout));\n  }\n\n  /**\n   * Key handler that sets the refocus element only on the keystrokes that move\n   * the element up the DOM\n   * @param event object containing keystroke and the target element\n   */\n  onKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowLeft':\n      case 'Home':\n      case 'ArrowUp':\n      case 'ArrowRight':\n      case 'End':\n        clearTimeout(this.updateTimeout);\n        this.updateTimeout = setTimeout(() => {\n          (event.target as HTMLElement)?.focus();\n        });\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Control value accessor methods\n   */\n  onChange = (_: any) => {};\n\n  onTouched = () => {};\n\n  registerOnChange(fn: (value: any) => any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => any): void {\n    this.onTouched = fn;\n  }\n\n  writeValue(value: any): void {\n    if (Array.isArray(value)) {\n      this['_agnosWidget'].patch({\n        values: value\n      });\n    } else {\n      this['_agnosWidget'].patch({\n        values: [value]\n      });\n    }\n  }\n\n  setDisabledState(isDisabled: boolean) {\n    this['_agnosWidget'].patch({\n      disabled: isDisabled\n    });\n  }\n\n  handleBlur() {\n    this.onTouched();\n  }\n}\n","import type { SliderProps } from '@design-factory/core/components/slider';\nimport { injectDfComponentConfig, provideDfComponentConfig } from '@design-factory/angular/internals';\n\n/**\n * Configuration options supported by `provideDfSliderConfig`.\n *\n * These defaults apply to every `DfSlider` instance within the providing injector, unless explicitly overridden on\n * the component itself.\n */\nexport type DfSliderConfig = Pick<SliderProps, 'ariaLabel' | 'ariaValueText'>;\n\n/**\n * Slider config key in the global DF component config.\n */\nexport const SLIDER_CONFIG_KEY = 'slider' as const;\n\n/**\n * Provides the configuration for the slider component.\n *\n * @example\n * ```ts\n * @Component({\n *   providers: [provideDfSliderConfig({ ariaLabel: () => 'Custom label' })]\n * })\n * export class MyHomeComponent {}\n * ```\n *\n * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.\n *\n * @since 22.0.0\n */\nexport const provideDfSliderConfig = provideDfComponentConfig<DfSliderConfig>(SLIDER_CONFIG_KEY);\n\n/**\n * Injects the configuration for the slider component.\n *\n * @example\n * ```ts\n * @Component({\n *   providers: [provideDfSliderConfig()]\n * })\n * export class MySliderComponent {\n *   readonly sliderConfig = injectDfSliderConfig();\n * }\n * ```\n *\n * @returns A writable signal containing the slider configuration.\n *\n * @since 22.0.0\n */\nexport const injectDfSliderConfig = injectDfComponentConfig<DfSliderConfig>(SLIDER_CONFIG_KEY);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}