import * as i0 from '@angular/core';
import { inject, ElementRef, output, input, numberAttribute, signal, effect, forwardRef, Directive, ChangeDetectorRef, DestroyRef, PLATFORM_ID, booleanAttribute, contentChildren, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Directionality } from '@angular/cdk/bidi';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { merge, fromEvent, filter, tap, switchMap, takeUntil } from 'rxjs';

class SliderThumb {
    _elementRef = inject((ElementRef));
    _slider = inject(Slider);
    valueChange = output();
    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), transform: numberAttribute, alias: 'value' });
    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
    getId() {
        return 'base';
    }
    get value() {
        return this._value();
    }
    set value(v) {
        this._value.set(this._clampValue(v));
        this._updateHostValue();
        this._slider._onValueChange(this);
    }
    _clampValue(v) {
        const thumbs = this._slider._allThumbs();
        const min = this._slider.min();
        const max = this._slider.max();
        if (thumbs.length === 2) {
            const index = thumbs.indexOf(this);
            if (index === 0) {
                return Math.max(min, Math.min(v, thumbs[1].value));
            }
            else if (index === 1) {
                return Math.min(max, Math.max(v, thumbs[0].value));
            }
        }
        return Math.max(min, Math.min(max, v));
    }
    constructor() {
        effect(() => {
            const inputVal = this.valueInput();
            if (inputVal !== undefined && inputVal !== this.value && !this._isUserInteraction) {
                this.value = inputVal;
            }
        });
    }
    _onChangeFn = () => { };
    _onTouchedFn = () => { };
    ngOnInit() {
        if (this.valueInput() === undefined) {
            const initialValue = this._elementRef.nativeElement.getAttribute('value');
            if (initialValue !== null) {
                this.value = Number(initialValue);
            }
            else {
                this.value = this._slider.min();
            }
        }
        else {
            this._slider._onValueChange(this);
        }
    }
    get min() {
        return this._slider.min();
    }
    get max() {
        return this._slider.max();
    }
    get step() {
        return this._slider.step();
    }
    ngOnDestroy() { }
    _updateValueFromUser(value) {
        const clampedValue = this._clampValue(value);
        if (this._value() !== clampedValue) {
            this._isUserInteraction = true;
            this._value.set(clampedValue);
            this._updateHostValue();
            this._onChangeFn(clampedValue);
            this.valueChange.emit(clampedValue);
            this._slider._onValueChange(this);
            setTimeout(() => {
                this._isUserInteraction = false;
            });
        }
    }
    _onInput(event) {
        if (this._slider._allThumbs().length > 1 && this._slider._activeThumb() !== this) {
            return;
        }
        let value = event.target.valueAsNumber;
        const initialValue = value;
        this._updateValueFromUser(value);
        if (value !== initialValue) {
            this._updateHostValue();
        }
        this._slider._activeThumb.set(this);
    }
    _onChange(event) {
        this._onTouchedFn();
    }
    _onBlur() {
        this._onTouchedFn();
    }
    _onFocus() {
        this._slider._activeThumb.set(this);
    }
    focus() {
        this._elementRef.nativeElement.focus();
    }
    _isUserInteraction = false;
    writeValue(value) {
        this._isUserInteraction = true;
        this.value = value;
        setTimeout(() => {
            this._isUserInteraction = false;
        });
    }
    registerOnChange(fn) {
        this._onChangeFn = fn;
    }
    registerOnTouched(fn) {
        this._onTouchedFn = fn;
    }
    setDisabledState(isDisabled) {
        this._elementRef.nativeElement.disabled = isDisabled;
    }
    _updateHostValue() {
        this._elementRef.nativeElement.value = (this._value() ?? 0).toString();
    }
    get percentage() {
        const max = this._slider.max();
        const min = this._slider.min();
        if (max === min) {
            return 0;
        }
        const p = (this._value() - min) / (max - min);
        return Math.max(0, Math.min(1, p));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: SliderThumb, isStandalone: true, selector: "input[ngsSliderThumb]", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "type": "range" }, listeners: { "input": "_onInput($event)", "change": "_onChange($event)", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "class.ngs-slider-input-active": "_slider._activeThumb() === this", "attr.min": "min", "attr.max": "max", "attr.step": "step", "value": "value" }, classAttribute: "ngs-slider-input" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SliderThumb),
                multi: true,
            },
        ], exportAs: ["ngsSliderThumb"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderThumb, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[ngsSliderThumb]',
                    exportAs: 'ngsSliderThumb',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SliderThumb),
                            multi: true,
                        },
                    ],
                    host: {
                        'class': 'ngs-slider-input',
                        '[class.ngs-slider-input-active]': '_slider._activeThumb() === this',
                        'type': 'range',
                        '[attr.min]': 'min',
                        '[attr.max]': 'max',
                        '[attr.step]': 'step',
                        '[value]': 'value',
                        '(input)': '_onInput($event)',
                        '(change)': '_onChange($event)',
                        '(blur)': '_onBlur()',
                        '(focus)': '_onFocus()',
                    },
                }]
        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });

class Slider {
    elementRef = inject(ElementRef);
    _cdr = inject(ChangeDetectorRef);
    _dir = inject(Directionality, { optional: true });
    _destroyRef = inject(DestroyRef);
    _document = inject(DOCUMENT);
    _platformId = inject(PLATFORM_ID);
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    discrete = input(false, { ...(ngDevMode ? { debugName: "discrete" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    showTickMarks = input(false, { ...(ngDevMode ? { debugName: "showTickMarks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    displayWith = input((value) => `${value}`, ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
    _allThumbs = contentChildren(SliderThumb, { ...(ngDevMode ? { debugName: "_allThumbs" } : /* istanbul ignore next */ {}), descendants: true });
    _trackLeft = computed(() => {
        const thumbs = this._allThumbs();
        if (thumbs.length === 2) {
            const p1 = thumbs[0].percentage || 0;
            const p2 = thumbs[1].percentage || 0;
            return Math.min(p1, p2) * 100;
        }
        return 0;
    }, ...(ngDevMode ? [{ debugName: "_trackLeft" }] : /* istanbul ignore next */ []));
    _trackRight = computed(() => {
        const thumbs = this._allThumbs();
        if (thumbs.length === 2) {
            const p1 = thumbs[0].percentage || 0;
            const p2 = thumbs[1].percentage || 0;
            return (1 - Math.max(p1, p2)) * 100;
        }
        const thumb = thumbs[0];
        return (1 - (thumb?.percentage || 0)) * 100;
    }, ...(ngDevMode ? [{ debugName: "_trackRight" }] : /* istanbul ignore next */ []));
    _activeThumb = signal(null, ...(ngDevMode ? [{ debugName: "_activeThumb" }] : /* istanbul ignore next */ []));
    _isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
    _tickMarks = computed(() => {
        if (!this.showTickMarks() || this.step() <= 0) {
            return [];
        }
        const count = Math.floor((this.max() - this.min()) / this.step()) + 1;
        return Array(count).fill(1); // 1 = inactive by default
    }, ...(ngDevMode ? [{ debugName: "_tickMarks" }] : /* istanbul ignore next */ []));
    _isRtl = false;
    constructor() {
        if (this._dir) {
            this._dir.change.pipe(takeUntilDestroyed()).subscribe(() => {
                this._isRtl = this._dir.value === 'rtl';
                this._cdr.markForCheck();
            });
            this._isRtl = this._dir.value === 'rtl';
        }
        effect(() => {
            this._allThumbs();
            this._cdr.markForCheck();
        });
        this._initializeEvents();
    }
    _initializeEvents() {
        if (!isPlatformBrowser(this._platformId)) {
            return;
        }
        const sliderElement = this.elementRef.nativeElement;
        const pointerDown$ = merge(fromEvent(sliderElement, 'mousedown'), fromEvent(sliderElement, 'touchstart', { passive: false })).pipe(filter((event) => {
            if (this.disabled())
                return false;
            return !(event instanceof MouseEvent && event.button !== 0);
        }));
        const pointerMove$ = merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'touchmove', { passive: false }));
        const pointerUp$ = merge(fromEvent(this._document, 'mouseup'), fromEvent(this._document, 'touchend', { passive: false }), fromEvent(this._document, 'touchcancel', { passive: false }));
        pointerDown$
            .pipe(filter(() => !this.disabled()), tap((event) => {
            if (event instanceof TouchEvent) {
                event.preventDefault();
            }
            this._isDragging.set(true);
            this._onPointerDown(event);
            this._cdr.markForCheck();
        }), switchMap(() => pointerMove$.pipe(tap((event) => {
            if (event instanceof TouchEvent) {
                event.preventDefault();
            }
        }), takeUntil(pointerUp$.pipe(tap(() => {
            this._isDragging.set(false);
            this._cdr.markForCheck();
        }))))), takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => {
            this._onPointerMove(event);
        });
        merge(fromEvent(sliderElement, 'mousemove'), fromEvent(sliderElement, 'touchmove', { passive: false }))
            .pipe(filter(() => !this.disabled() && !this._isDragging()), takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => {
            this._onPointerMove(event);
        });
    }
    _onValueChange(thumb) {
        this._cdr.markForCheck();
    }
    _findClosestThumb(percentage) {
        const thumbs = this._allThumbs();
        if (thumbs.length === 0) {
            return null;
        }
        let closestThumb = thumbs[0];
        let minDistance = Math.abs(thumbs[0].percentage - percentage);
        for (let i = 1; i < thumbs.length; i++) {
            const distance = Math.abs(thumbs[i].percentage - percentage);
            if (distance < minDistance) {
                minDistance = distance;
                closestThumb = thumbs[i];
            }
            else if (distance === minDistance) {
                // If distances are equal (e.g., thumbs are at the same point)
                if (percentage > thumbs[i].percentage) {
                    // If click is to the right of the overlap point, select the "right" thumb
                    // (in the array thumbs[1] is usually the end thumb)
                    closestThumb = thumbs[i];
                }
                else if (percentage < thumbs[i].percentage) {
                    // If click is to the left
                    closestThumb = thumbs[i - 1];
                }
                else {
                    // If click is exactly at the overlap point
                    // give priority to the already active one
                    if (thumbs[i] === this._activeThumb()) {
                        closestThumb = thumbs[i];
                    }
                }
            }
        }
        return closestThumb;
    }
    _onPointerDown(event) {
        if (this.disabled()) {
            return;
        }
        const percentage = this._calculatePercentage(event);
        const closestThumb = this._findClosestThumb(percentage);
        if (closestThumb) {
            this._activeThumb.set(closestThumb);
            const value = this._calculateValueFromPercentage(percentage);
            closestThumb._updateValueFromUser(value);
            closestThumb.focus();
            this._cdr.markForCheck();
        }
    }
    _onPointerMove(event) {
        if (this.disabled()) {
            return;
        }
        const percentage = this._calculatePercentage(event);
        const isDragging = this._isDragging();
        const activeThumb = this._activeThumb();
        if (isDragging && activeThumb) {
            const value = this._calculateValueFromPercentage(percentage);
            activeThumb._updateValueFromUser(value);
            this._cdr.markForCheck();
        }
        else if (!isDragging) {
            const closestThumb = this._findClosestThumb(percentage);
            if (closestThumb && activeThumb !== closestThumb) {
                this._activeThumb.set(closestThumb);
                this._cdr.markForCheck();
            }
        }
    }
    _calculatePercentage(event) {
        const sliderElement = this.elementRef.nativeElement;
        const wrapper = sliderElement.querySelector('.ngs-slider-wrapper');
        const rect = (wrapper || sliderElement).getBoundingClientRect();
        const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
        let position = (clientX - rect.left) / rect.width;
        position = Math.max(0, Math.min(1, position));
        return this._isRtl ? 1 - position : position;
    }
    _calculateValueFromPercentage(percentage) {
        const min = this.min();
        const max = this.max();
        const step = this.step();
        const rawValue = min + percentage * (max - min);
        let value = rawValue;
        if (step > 0) {
            value = Math.round(rawValue / step) * step;
        }
        return Math.max(min, Math.min(max, value));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Slider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Slider, isStandalone: true, selector: "ngs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, discrete: { classPropertyName: "discrete", publicName: "discrete", isSignal: true, isRequired: false, transformFunction: null }, showTickMarks: { classPropertyName: "showTickMarks", publicName: "showTickMarks", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-slider-disabled": "disabled()", "class.ngs-slider-discrete": "discrete()", "class.ngs-slider-show-tick-marks": "showTickMarks()" }, classAttribute: "ngs-slider" }, queries: [{ propertyName: "_allThumbs", predicate: SliderThumb, descendants: true, isSignal: true }], exportAs: ["ngsSlider"], ngImport: i0, template: "<div class=\"ngs-slider-wrapper\">\n  <div class=\"ngs-slider-track\">\n    <div class=\"ngs-slider-track-background\"></div>\n    <div class=\"ngs-slider-track-active\"\n         [style.left.%]=\"(_trackLeft() / 100) * 100\"\n         [style.right.%]=\"(_trackRight() / 100) * 100\"></div>\n    @if (showTickMarks()) {\n      <div class=\"ngs-slider-tick-marks\">\n        @for (tick of _tickMarks(); track $index) {\n          <div class=\"ngs-slider-tick-mark\" [class.ngs-slider-tick-mark-active]=\"tick === 0\"></div>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-content />\n\n  <div class=\"ngs-slider-visual-thumbs\">\n    @for (thumb of _allThumbs(); track thumb) {\n      <div class=\"ngs-slider-visual-thumb\"\n           [style.left.%]=\"thumb.percentage * 100\"\n           [class.ngs-slider-visual-thumb-active]=\"thumb === _activeThumb()\">\n        <div class=\"ngs-slider-thumb-knob\"></div>\n        @if (discrete()) {\n          <div class=\"ngs-slider-value-indicator-container\">\n            <div class=\"ngs-slider-value-indicator\">\n              <span class=\"ngs-slider-value-indicator-text\">{{ displayWith()(thumb.value) }}</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngs-slider-track-height: 4px;--ngs-slider-track-active-height: 6px;--ngs-slider-track-color: var(--ngs-color-surface-container-high);--ngs-slider-track-active-color: var(--ngs-color-primary);--ngs-slider-thumb-size: 20px;--ngs-slider-thumb-color: var(--ngs-color-primary);--ngs-slider-thumb-ripple-color: var(--ngs-color-primary-100);--ngs-slider-tick-mark-color: var(--ngs-color-on-surface-variant);--ngs-slider-tick-mark-active-color: var(--ngs-color-on-primary);--ngs-slider-value-indicator-color: var(--ngs-color-on-surface);--ngs-slider-value-indicator-text-color: var(--ngs-color-surface);display:block;position:relative;box-sizing:border-box;padding:8px 0;width:100%;height:48px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}@supports (color: color-mix(in lab,red,red)){:host{--ngs-slider-tick-mark-active-color: color-mix(in srgb, var(--ngs-color-on-primary), transparent 40%)}}:host.ngs-slider-disabled{opacity:.38;pointer-events:none}:host .ngs-slider-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}:host .ngs-slider-track{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:var(--ngs-slider-track-height);background:var(--ngs-slider-track-color);border-radius:calc(var(--ngs-slider-track-height) / 2)}:host .ngs-slider-track-active{position:absolute;height:var(--ngs-slider-track-active-height);background:var(--ngs-slider-track-active-color);border-radius:calc(var(--ngs-slider-track-active-height) / 2);top:50%;transform:translateY(-50%)}:host .ngs-slider-tick-marks{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:100%;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}:host .ngs-slider-tick-mark{width:2px;height:2px;background:var(--ngs-slider-tick-mark-color);border-radius:50%}:host .ngs-slider-tick-mark.ngs-slider-tick-mark-active{background:var(--ngs-slider-tick-mark-active-color)}:host ::ng-deep .ngs-slider-input{position:absolute;top:50%;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:var(--ngs-slider-thumb-size);transform:translateY(-50%);opacity:0;cursor:pointer;z-index:2;margin:0;padding:0;pointer-events:auto;width:calc(100% - var(--ngs-slider-thumb-size));appearance:none;background:transparent;border:none}:host ::ng-deep .ngs-slider-input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input::-moz-range-track{width:100%;height:100%;background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input::-webkit-slider-thumb{appearance:none;width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;margin-top:0;box-shadow:none}:host ::ng-deep .ngs-slider-input::-moz-range-thumb{width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;box-shadow:none;border-radius:0}:host ::ng-deep .ngs-slider-input::-ms-track{width:100%;height:100%;background:transparent;border-color:transparent;color:transparent}:host ::ng-deep .ngs-slider-input::-ms-thumb{width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input.ngs-slider-input-active{z-index:4;pointer-events:auto}:host ::ng-deep .ngs-slider-input:not(.ngs-slider-input-active){z-index:2}:host ::ng-deep .ngs-slider-input:focus+.ngs-slider-visual-thumbs .ngs-slider-thumb-knob{box-shadow:0 0 0 10px var(--ngs-slider-thumb-ripple-color)}:host .ngs-slider-visual-thumbs{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:100%;top:0;pointer-events:none}:host .ngs-slider-visual-thumb{position:absolute;top:50%;width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);transform:translate(-50%,-50%);z-index:1}:host .ngs-slider-visual-thumb.ngs-slider-visual-thumb-active{z-index:2}:host .ngs-slider-thumb-knob{width:100%;height:100%;background:var(--ngs-slider-thumb-color);border-radius:50%;transition:transform .1s ease-in-out,box-shadow .1s ease-in-out}:host .ngs-slider-value-indicator-container{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:4px 8px;background:var(--ngs-slider-value-indicator-color);color:var(--ngs-slider-value-indicator-text-color);border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .1s ease-in-out}:host .ngs-slider-value-indicator-container:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--ngs-slider-value-indicator-color) transparent transparent transparent}:host:active .ngs-slider-value-indicator-container,:host .ngs-slider-input:focus~.ngs-slider-visual-thumbs .ngs-slider-value-indicator-container{opacity:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Slider, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-slider', exportAs: 'ngsSlider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-slider',
                        '[class.ngs-slider-disabled]': 'disabled()',
                        '[class.ngs-slider-discrete]': 'discrete()',
                        '[class.ngs-slider-show-tick-marks]': 'showTickMarks()',
                    }, template: "<div class=\"ngs-slider-wrapper\">\n  <div class=\"ngs-slider-track\">\n    <div class=\"ngs-slider-track-background\"></div>\n    <div class=\"ngs-slider-track-active\"\n         [style.left.%]=\"(_trackLeft() / 100) * 100\"\n         [style.right.%]=\"(_trackRight() / 100) * 100\"></div>\n    @if (showTickMarks()) {\n      <div class=\"ngs-slider-tick-marks\">\n        @for (tick of _tickMarks(); track $index) {\n          <div class=\"ngs-slider-tick-mark\" [class.ngs-slider-tick-mark-active]=\"tick === 0\"></div>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-content />\n\n  <div class=\"ngs-slider-visual-thumbs\">\n    @for (thumb of _allThumbs(); track thumb) {\n      <div class=\"ngs-slider-visual-thumb\"\n           [style.left.%]=\"thumb.percentage * 100\"\n           [class.ngs-slider-visual-thumb-active]=\"thumb === _activeThumb()\">\n        <div class=\"ngs-slider-thumb-knob\"></div>\n        @if (discrete()) {\n          <div class=\"ngs-slider-value-indicator-container\">\n            <div class=\"ngs-slider-value-indicator\">\n              <span class=\"ngs-slider-value-indicator-text\">{{ displayWith()(thumb.value) }}</span>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngs-slider-track-height: 4px;--ngs-slider-track-active-height: 6px;--ngs-slider-track-color: var(--ngs-color-surface-container-high);--ngs-slider-track-active-color: var(--ngs-color-primary);--ngs-slider-thumb-size: 20px;--ngs-slider-thumb-color: var(--ngs-color-primary);--ngs-slider-thumb-ripple-color: var(--ngs-color-primary-100);--ngs-slider-tick-mark-color: var(--ngs-color-on-surface-variant);--ngs-slider-tick-mark-active-color: var(--ngs-color-on-primary);--ngs-slider-value-indicator-color: var(--ngs-color-on-surface);--ngs-slider-value-indicator-text-color: var(--ngs-color-surface);display:block;position:relative;box-sizing:border-box;padding:8px 0;width:100%;height:48px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}@supports (color: color-mix(in lab,red,red)){:host{--ngs-slider-tick-mark-active-color: color-mix(in srgb, var(--ngs-color-on-primary), transparent 40%)}}:host.ngs-slider-disabled{opacity:.38;pointer-events:none}:host .ngs-slider-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}:host .ngs-slider-track{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:var(--ngs-slider-track-height);background:var(--ngs-slider-track-color);border-radius:calc(var(--ngs-slider-track-height) / 2)}:host .ngs-slider-track-active{position:absolute;height:var(--ngs-slider-track-active-height);background:var(--ngs-slider-track-active-color);border-radius:calc(var(--ngs-slider-track-active-height) / 2);top:50%;transform:translateY(-50%)}:host .ngs-slider-tick-marks{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:100%;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}:host .ngs-slider-tick-mark{width:2px;height:2px;background:var(--ngs-slider-tick-mark-color);border-radius:50%}:host .ngs-slider-tick-mark.ngs-slider-tick-mark-active{background:var(--ngs-slider-tick-mark-active-color)}:host ::ng-deep .ngs-slider-input{position:absolute;top:50%;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:var(--ngs-slider-thumb-size);transform:translateY(-50%);opacity:0;cursor:pointer;z-index:2;margin:0;padding:0;pointer-events:auto;width:calc(100% - var(--ngs-slider-thumb-size));appearance:none;background:transparent;border:none}:host ::ng-deep .ngs-slider-input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input::-moz-range-track{width:100%;height:100%;background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input::-webkit-slider-thumb{appearance:none;width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;margin-top:0;box-shadow:none}:host ::ng-deep .ngs-slider-input::-moz-range-thumb{width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;box-shadow:none;border-radius:0}:host ::ng-deep .ngs-slider-input::-ms-track{width:100%;height:100%;background:transparent;border-color:transparent;color:transparent}:host ::ng-deep .ngs-slider-input::-ms-thumb{width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);background:transparent;border:none;box-shadow:none}:host ::ng-deep .ngs-slider-input.ngs-slider-input-active{z-index:4;pointer-events:auto}:host ::ng-deep .ngs-slider-input:not(.ngs-slider-input-active){z-index:2}:host ::ng-deep .ngs-slider-input:focus+.ngs-slider-visual-thumbs .ngs-slider-thumb-knob{box-shadow:0 0 0 10px var(--ngs-slider-thumb-ripple-color)}:host .ngs-slider-visual-thumbs{position:absolute;left:calc(var(--ngs-slider-thumb-size) / 2);right:calc(var(--ngs-slider-thumb-size) / 2);height:100%;top:0;pointer-events:none}:host .ngs-slider-visual-thumb{position:absolute;top:50%;width:var(--ngs-slider-thumb-size);height:var(--ngs-slider-thumb-size);transform:translate(-50%,-50%);z-index:1}:host .ngs-slider-visual-thumb.ngs-slider-visual-thumb-active{z-index:2}:host .ngs-slider-thumb-knob{width:100%;height:100%;background:var(--ngs-slider-thumb-color);border-radius:50%;transition:transform .1s ease-in-out,box-shadow .1s ease-in-out}:host .ngs-slider-value-indicator-container{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:4px 8px;background:var(--ngs-slider-value-indicator-color);color:var(--ngs-slider-value-indicator-text-color);border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .1s ease-in-out}:host .ngs-slider-value-indicator-container:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--ngs-slider-value-indicator-color) transparent transparent transparent}:host:active .ngs-slider-value-indicator-container,:host .ngs-slider-input:focus~.ngs-slider-visual-thumbs .ngs-slider-value-indicator-container{opacity:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], discrete: [{ type: i0.Input, args: [{ isSignal: true, alias: "discrete", required: false }] }], showTickMarks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTickMarks", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], _allThumbs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SliderThumb), { ...{ descendants: true }, isSignal: true }] }] } });

class SliderStartThumb extends SliderThumb {
    getId() {
        return 'start';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderStartThumb, deps: null, target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SliderStartThumb, isStandalone: true, selector: "input[ngsSliderStartThumb]", host: { attributes: { "type": "range" }, listeners: { "input": "_onInput($event)", "change": "_onChange($event)", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "class.ngs-slider-input-active": "_slider._activeThumb() === this", "attr.min": "min", "attr.max": "max", "attr.step": "step", "value": "value" }, classAttribute: "ngs-slider-input" }, providers: [
            {
                provide: SliderThumb,
                useExisting: forwardRef(() => SliderStartThumb),
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SliderStartThumb),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderStartThumb, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[ngsSliderStartThumb]',
                    standalone: true,
                    host: {
                        'class': 'ngs-slider-input',
                        '[class.ngs-slider-input-active]': '_slider._activeThumb() === this',
                        'type': 'range',
                        '[attr.min]': 'min',
                        '[attr.max]': 'max',
                        '[attr.step]': 'step',
                        '[value]': 'value',
                        '(input)': '_onInput($event)',
                        '(change)': '_onChange($event)',
                        '(blur)': '_onBlur()',
                        '(focus)': '_onFocus()',
                    },
                    providers: [
                        {
                            provide: SliderThumb,
                            useExisting: forwardRef(() => SliderStartThumb),
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SliderStartThumb),
                            multi: true,
                        },
                    ],
                }]
        }] });

class SliderEndThumb extends SliderThumb {
    getId() {
        return 'end';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderEndThumb, deps: null, target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SliderEndThumb, isStandalone: true, selector: "input[ngsSliderEndThumb]", host: { attributes: { "type": "range" }, listeners: { "input": "_onInput($event)", "change": "_onChange($event)", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "class.ngs-slider-input-active": "_slider._activeThumb() === this", "attr.min": "min", "attr.max": "max", "attr.step": "step", "value": "value" }, classAttribute: "ngs-slider-input" }, providers: [
            {
                provide: SliderThumb,
                useExisting: forwardRef(() => SliderEndThumb),
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SliderEndThumb),
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SliderEndThumb, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[ngsSliderEndThumb]',
                    host: {
                        'class': 'ngs-slider-input',
                        '[class.ngs-slider-input-active]': '_slider._activeThumb() === this',
                        'type': 'range',
                        '[attr.min]': 'min',
                        '[attr.max]': 'max',
                        '[attr.step]': 'step',
                        '[value]': 'value',
                        '(input)': '_onInput($event)',
                        '(change)': '_onChange($event)',
                        '(blur)': '_onBlur()',
                        '(focus)': '_onFocus()',
                    },
                    providers: [
                        {
                            provide: SliderThumb,
                            useExisting: forwardRef(() => SliderEndThumb),
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SliderEndThumb),
                            multi: true,
                        },
                    ],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { Slider, SliderEndThumb, SliderStartThumb, SliderThumb };
//# sourceMappingURL=ngstarter-ui-components-slider.mjs.map
