@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-slide-toggle.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, numberAttribute, output, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class SlideToggleChange {
+    source;
+    checked;
+    constructor(source, checked) {
+        this.source = source;
+        this.checked = checked;
+    }
+}
+let nextId = 0;
+class SlideToggle {
+    _uniqueId = `ngs-slide-toggle-${nextId++}`;
+    id = input(this._uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    labelPosition = input('after', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    hideIcon = input(false, { ...(ngDevMode ? { debugName: "hideIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    change = output();
+    toggleChange = output();
+    _onChange = (_) => { };
+    _onTouched = () => { };
+    constructor() { }
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    toggle() {
+        this.checked.update(checked => !checked);
+        this._onChange(this.checked());
+        this._emitChangeEvent();
+    }
+    _onInputClick(event) {
+        event.stopPropagation();
+        this.toggle();
+        this.toggleChange.emit();
+    }
+    _emitChangeEvent() {
+        this.change.emit(new SlideToggleChange(this, this.checked()));
+    }
+    _onInputBlur() {
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SlideToggle, isStandalone: true, selector: "ngs-slide-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change", toggleChange: "toggleChange" }, host: { properties: { "class.ngs-slide-toggle-checked": "checked()", "class.ngs-slide-toggle-disabled": "disabled()", "class.ngs-slide-toggle-label-before": "labelPosition() === \"before\"", "attr.id": "id()" }, classAttribute: "ngs-slide-toggle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SlideToggle),
+                multi: true
+            }
+        ], exportAs: ["ngsSlideToggle"], ngImport: i0, template: "<label class=\"ngs-slide-toggle-label\" [attr.for]=\"id() + '-input'\">\n  <div class=\"ngs-slide-toggle-bar\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"ngs-slide-toggle-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name()\"\n      [tabIndex]=\"tabIndex()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby()\"\n      [attr.aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"_onInputClick($event)\"\n      (blur)=\"_onInputBlur()\">\n    <div class=\"ngs-slide-toggle-thumb-container\">\n      <div class=\"ngs-slide-toggle-thumb\"></div>\n    </div>\n  </div>\n  <span class=\"ngs-slide-toggle-content\" [id]=\"id() + '-content'\">\n    <ng-content/>\n  </span>\n</label>\n", styles: [":host{--ngs-slide-toggle-width: 44px;--ngs-slide-toggle-height: 24px;--ngs-slide-toggle-thumb-size: 20px;--ngs-slide-toggle-bar-color: var(--color-surface-container-highest);--ngs-slide-toggle-bar-checked-color: var(--color-primary);--ngs-slide-toggle-thumb-color: var(--color-surface);--ngs-slide-toggle-thumb-checked-color: var(--color-on-primary);--ngs-slide-toggle-transition-duration: .2s;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host.ngs-slide-toggle-disabled{cursor:default;opacity:.5;pointer-events:none}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-label{flex-direction:row-reverse}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-content{margin-left:0;margin-right:8px}:host .ngs-slide-toggle-label{display:flex;align-items:center;cursor:inherit}:host .ngs-slide-toggle-bar{position:relative;width:var(--ngs-slide-toggle-width);height:var(--ngs-slide-toggle-height);background:var(--ngs-slide-toggle-bar-color);border-radius:calc(var(--ngs-slide-toggle-height) / 2);transition:background-color var(--ngs-slide-toggle-transition-duration) ease;flex-shrink:0}:host.ngs-slide-toggle-checked .ngs-slide-toggle-bar{background:var(--ngs-slide-toggle-bar-checked-color)}:host .ngs-slide-toggle-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-slide-toggle-thumb-container{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--ngs-slide-toggle-thumb-size);height:var(--ngs-slide-toggle-thumb-size);transition:left var(--ngs-slide-toggle-transition-duration) ease}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb-container{left:calc(100% - var(--ngs-slide-toggle-thumb-size) - 2px)}:host .ngs-slide-toggle-thumb{width:100%;height:100%;background:var(--ngs-slide-toggle-thumb-color);border-radius:50%;box-shadow:0 2px 4px #0003}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb{background:var(--ngs-slide-toggle-thumb-checked-color)}:host .ngs-slide-toggle-content{margin-left:8px;display:inline-block}:host .ngs-slide-toggle-content:empty{display:none}\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: SlideToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-slide-toggle', exportAs: 'ngsSlideToggle', standalone: true, imports: [], host: {
+                        'class': 'ngs-slide-toggle',
+                        '[class.ngs-slide-toggle-checked]': 'checked()',
+                        '[class.ngs-slide-toggle-disabled]': 'disabled()',
+                        '[class.ngs-slide-toggle-label-before]': 'labelPosition() === "before"',
+                        '[attr.id]': 'id()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SlideToggle),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ngs-slide-toggle-label\" [attr.for]=\"id() + '-input'\">\n  <div class=\"ngs-slide-toggle-bar\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"ngs-slide-toggle-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name()\"\n      [tabIndex]=\"tabIndex()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby()\"\n      [attr.aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"_onInputClick($event)\"\n      (blur)=\"_onInputBlur()\">\n    <div class=\"ngs-slide-toggle-thumb-container\">\n      <div class=\"ngs-slide-toggle-thumb\"></div>\n    </div>\n  </div>\n  <span class=\"ngs-slide-toggle-content\" [id]=\"id() + '-content'\">\n    <ng-content/>\n  </span>\n</label>\n", styles: [":host{--ngs-slide-toggle-width: 44px;--ngs-slide-toggle-height: 24px;--ngs-slide-toggle-thumb-size: 20px;--ngs-slide-toggle-bar-color: var(--color-surface-container-highest);--ngs-slide-toggle-bar-checked-color: var(--color-primary);--ngs-slide-toggle-thumb-color: var(--color-surface);--ngs-slide-toggle-thumb-checked-color: var(--color-on-primary);--ngs-slide-toggle-transition-duration: .2s;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host.ngs-slide-toggle-disabled{cursor:default;opacity:.5;pointer-events:none}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-label{flex-direction:row-reverse}:host.ngs-slide-toggle-label-before .ngs-slide-toggle-content{margin-left:0;margin-right:8px}:host .ngs-slide-toggle-label{display:flex;align-items:center;cursor:inherit}:host .ngs-slide-toggle-bar{position:relative;width:var(--ngs-slide-toggle-width);height:var(--ngs-slide-toggle-height);background:var(--ngs-slide-toggle-bar-color);border-radius:calc(var(--ngs-slide-toggle-height) / 2);transition:background-color var(--ngs-slide-toggle-transition-duration) ease;flex-shrink:0}:host.ngs-slide-toggle-checked .ngs-slide-toggle-bar{background:var(--ngs-slide-toggle-bar-checked-color)}:host .ngs-slide-toggle-input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-slide-toggle-thumb-container{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--ngs-slide-toggle-thumb-size);height:var(--ngs-slide-toggle-thumb-size);transition:left var(--ngs-slide-toggle-transition-duration) ease}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb-container{left:calc(100% - var(--ngs-slide-toggle-thumb-size) - 2px)}:host .ngs-slide-toggle-thumb{width:100%;height:100%;background:var(--ngs-slide-toggle-thumb-color);border-radius:50%;box-shadow:0 2px 4px #0003}:host.ngs-slide-toggle-checked .ngs-slide-toggle-thumb{background:var(--ngs-slide-toggle-thumb-checked-color)}:host .ngs-slide-toggle-content{margin-left:8px;display:inline-block}:host .ngs-slide-toggle-content:empty{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], change: [{ type: i0.Output, args: ["change"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlideToggle, SlideToggleChange };
+//# sourceMappingURL=ngstarter-ui-components-slide-toggle.mjs.map

package/fesm2022/ngstarter-ui-components-slide-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-slide-toggle.mjs","sources":["../../../projects/components/slide-toggle/src/slide-toggle/slide-toggle.ts","../../../projects/components/slide-toggle/src/slide-toggle/slide-toggle.html","../../../projects/components/slide-toggle/ngstarter-ui-components-slide-toggle.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  output\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport class SlideToggleChange {\n  constructor(\n    public source: SlideToggle,\n    public checked: boolean\n  ) {\n  }\n}\n\nlet nextId = 0;\n\n@Component({\n  selector: 'ngs-slide-toggle',\n  exportAs: 'ngsSlideToggle',\n  standalone: true,\n  imports: [],\n  templateUrl: './slide-toggle.html',\n  styleUrl: './slide-toggle.scss',\n  host: {\n    'class': 'ngs-slide-toggle',\n    '[class.ngs-slide-toggle-checked]': 'checked()',\n    '[class.ngs-slide-toggle-disabled]': 'disabled()',\n    '[class.ngs-slide-toggle-label-before]': 'labelPosition() === \"before\"',\n    '[attr.id]': 'id()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SlideToggle),\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SlideToggle implements ControlValueAccessor {\n  private _uniqueId = `ngs-slide-toggle-${nextId++}`;\n\n  id = input<string>(this._uniqueId);\n  name = input<string | null>(null);\n  labelPosition = input<'before' | 'after'>('after');\n  ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n  ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\n  required = input(false, { transform: booleanAttribute });\n  disabled = model(false);\n  disableRipple = input(false, { transform: booleanAttribute });\n  tabIndex = input(0, { transform: numberAttribute });\n  hideIcon = input(false, { transform: booleanAttribute });\n  color = input<string | undefined>();\n\n  checked = model(false);\n\n  change = output<SlideToggleChange>();\n  toggleChange = output<void>();\n\n  private _onChange = (_: any) => {};\n  private _onTouched = () => {};\n\n  constructor() {}\n\n  writeValue(value: any): void {\n    this.checked.set(!!value);\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n\n  toggle(): void {\n    this.checked.update(checked => !checked);\n    this._onChange(this.checked());\n    this._emitChangeEvent();\n  }\n\n  _onInputClick(event: Event): void {\n    event.stopPropagation();\n    this.toggle();\n    this.toggleChange.emit();\n  }\n\n  private _emitChangeEvent(): void {\n    this.change.emit(new SlideToggleChange(this, this.checked()));\n  }\n\n  _onInputBlur(): void {\n    this._onTouched();\n  }\n}\n","<label class=\"ngs-slide-toggle-label\" [attr.for]=\"id() + '-input'\">\n  <div class=\"ngs-slide-toggle-bar\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"ngs-slide-toggle-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name()\"\n      [tabIndex]=\"tabIndex()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby()\"\n      [attr.aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"_onInputClick($event)\"\n      (blur)=\"_onInputBlur()\">\n    <div class=\"ngs-slide-toggle-thumb-container\">\n      <div class=\"ngs-slide-toggle-thumb\"></div>\n    </div>\n  </div>\n  <span class=\"ngs-slide-toggle-content\" [id]=\"id() + '-content'\">\n    <ng-content/>\n  </span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-slider.mjs

@@ -0,0 +1,481 @@
+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(--color-surface-container-high);--ngs-slider-track-active-color: var(--color-primary);--ngs-slider-thumb-size: 20px;--ngs-slider-thumb-color: var(--color-primary);--ngs-slider-thumb-ripple-color: var(--color-primary-100);--ngs-slider-tick-mark-color: var(--color-on-surface-variant);--ngs-slider-tick-mark-active-color: var(--color-on-primary);--ngs-slider-value-indicator-color: var(--color-on-surface);--ngs-slider-value-indicator-text-color: var(--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(--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(--color-surface-container-high);--ngs-slider-track-active-color: var(--color-primary);--ngs-slider-thumb-size: 20px;--ngs-slider-thumb-color: var(--color-primary);--ngs-slider-thumb-ripple-color: var(--color-primary-100);--ngs-slider-tick-mark-color: var(--color-on-surface-variant);--ngs-slider-tick-mark-active-color: var(--color-on-primary);--ngs-slider-value-indicator-color: var(--color-on-surface);--ngs-slider-value-indicator-text-color: var(--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(--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