ngx-kit 1.0.0

package/fesm2022/ngx-input-shared.mjs

@@ -0,0 +1,915 @@
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, PLATFORM_ID, Inject, Injectable, inject } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
+
+function getOffsetPosition(evt, parent) {
+    let position = {
+        x: 0,
+        y: 0,
+    };
+    if (evt instanceof MouseEvent) {
+        position.x = evt.pageX;
+        position.y = evt.pageY;
+    }
+    else if (evt.touches && evt.touches.length > 0) {
+        position.x = evt.touches[0].pageX;
+        position.y = evt.touches[0].pageY;
+    }
+    // Adjust for the parent's offset
+    let parentRect = parent.getBoundingClientRect();
+    position.x -= parentRect.left + window.scrollX;
+    position.y -= parentRect.top + window.scrollY;
+    return position;
+}
+
+class ValueModel {
+    id;
+    value;
+    x;
+    thumb;
+    color;
+}
+class RangeSliderComponent {
+    changeDetectorRef;
+    /**
+     * The step value for the slider
+     */
+    step = 1;
+    /**
+     * The minimum value for the slider
+     */
+    min = 0;
+    /**
+     * The maximum value for the slider
+     */
+    max = 100;
+    /**
+     * The background color of the slider
+     * - can use css like `background: linear-gradient(to right, red, blue);`
+     * - or a solid color like `background: red;`
+     */
+    background;
+    /**
+     * If true, the background will be transparent
+     */
+    isBgTransparent = false;
+    /**
+     * If true, clicking on the slider will add a new range at that position
+     */
+    addNewRangeOnClick = false;
+    /**
+     * The current value of the slider
+     */
+    change = new EventEmitter();
+    selectedIndex;
+    selectedIndexChange = new EventEmitter();
+    isDragging = false;
+    slider;
+    thumb;
+    values = [];
+    isDisabled = false;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    sliderRect;
+    thumbRect;
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    ngOnInit() { }
+    generateId() {
+        let id = 'ngx-thumb-' + Math.random().toString(36).substring(2, 9);
+        if (this.values.findIndex((x) => x.id == id) >= 0) {
+            return this.generateId();
+        }
+        return id;
+    }
+    writeValue(items) {
+        this.values = [];
+        if (!items || !Array.isArray(items)) {
+            items = [];
+        }
+        if (items.length === 0) {
+            items.push({ id: this.generateId(), value: this.min });
+        }
+        for (let val of items) {
+            if (typeof val.value !== 'number' || isNaN(val.value)) {
+                throw new Error('RangeSliderComponent: value must be an array of numbers');
+            }
+            let newVal = +val.value;
+            if (newVal < +this.min)
+                newVal = +this.min;
+            else if (newVal > +this.max)
+                newVal = +this.max;
+            this.values.push({
+                ...val,
+                id: val.id ?? this.generateId(),
+                value: newVal,
+            });
+        }
+        this.updateAllThumbPositions();
+    }
+    validate(control) {
+        return null; // TODO: return errors if any;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    updateRects() {
+        this.sliderRect = this.slider.nativeElement.getBoundingClientRect();
+        if (this.thumb) {
+            this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
+        }
+    }
+    onDrag(ev) {
+        if (!this.isDragging)
+            return;
+        this.updateThumbPosition(ev);
+    }
+    onResize() {
+        this.writeValue(this.values);
+    }
+    dragStart(ev, index) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.isDragging = true;
+        this.selectedIndex = index;
+        this.updateRects();
+        this.updateThumbPosition(ev);
+        this.selectedIndexChange.emit(this.selectedIndex);
+    }
+    addnewRangeOnSliderClick(event) {
+        if (!this.addNewRangeOnClick)
+            return;
+        const position = getOffsetPosition(event, this.slider.nativeElement);
+        const newValue = this.min + (position.x / this.sliderRect.width) * (this.max - this.min);
+        // must be add with order by position
+        const indexByOrderValue = this.values.findIndex((item) => item.value > newValue);
+        const insertIndex = indexByOrderValue >= 0 ? indexByOrderValue : this.values.length;
+        this.values.splice(insertIndex, 0, {
+            id: this.generateId(),
+            value: newValue,
+        });
+        this.dragStart(event, insertIndex);
+        // this.updateAllThumbPositions();
+        // this.valueChanged();
+    }
+    updateThumbPosition(ev) {
+        if (!this.isDragging || this.selectedIndex == undefined)
+            return;
+        if (!this.sliderRect || !this.thumbRect)
+            this.updateRects();
+        let position = getOffsetPosition(ev, this.slider.nativeElement);
+        let thumbRec = this.thumbRect;
+        position.x -= thumbRec.width / 2;
+        let sliderRec = this.sliderRect;
+        const thumb = this.values[this.selectedIndex];
+        if (position.x < 0) {
+            thumb.x = 0;
+        }
+        else if (position.x > sliderRec.width - thumbRec.width) {
+            thumb.x = sliderRec.width - thumbRec.width;
+        }
+        else {
+            thumb.x = position.x;
+        }
+        this.setValueByPosition(thumb, thumbRec, sliderRec);
+    }
+    updateAllThumbPositions() {
+        // wait to add thumbs
+        setTimeout(() => {
+            this.updateRects();
+            const sliderRec = this.sliderRect;
+            const thumbRec = this.thumbRect;
+            for (let item of this.values) {
+                item.x = ((item.value - this.min) * (sliderRec.width - thumbRec.width)) / (this.max - this.min);
+            }
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    setValueByPosition(thumb, thumbRec, sliderRec) {
+        const percentage = (thumb.x ?? 0) / (sliderRec.width - thumbRec.width);
+        let newValue = this.min + percentage * (this.max - this.min);
+        const stepDecimalPlaces = (this.step.toString().split('.')[1] || '').length;
+        newValue = parseFloat((Math.round(newValue / this.step) * this.step).toFixed(stepDecimalPlaces));
+        let value = Math.min(Math.max(newValue, this.min), this.max);
+        if (thumb.value !== value) {
+            thumb.value = value;
+            this.valueChanged();
+        }
+    }
+    onDragEnd(ev) {
+        this.isDragging = false;
+        // this.selectedIndex = undefined;
+    }
+    valueChanged() {
+        const v = this.values; // this.values.map(({ x, thumb, ...rest }) => ({ ...rest }));
+        this._onChange(v);
+        this.change.emit(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RangeSliderComponent, isStandalone: true, selector: "range-slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent", addNewRangeOnClick: "addNewRangeOnClick", selectedIndex: "selectedIndex" }, outputs: { change: "change", selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "window:resize": "onResize()", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeSliderComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => RangeSliderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\"\r\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\r\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\r\n    @for (item of values; track $index; let i = $index) {\r\n      <div\r\n        class=\"thumb\"\r\n        [class.is-active]=\"selectedIndex == i\"\r\n        #thumb\r\n        [style.left.px]=\"item.x\"\r\n        [style.background]=\"item.color\"\r\n        [title]=\"item.value\"\r\n        (mousedown)=\"dragStart($event, i)\"\r\n      (touchstart)=\"dragStart($event, i)\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- {{ selectedIndex }}\r\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\r\n\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeSliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => RangeSliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\"\r\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\r\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\r\n    @for (item of values; track $index; let i = $index) {\r\n      <div\r\n        class=\"thumb\"\r\n        [class.is-active]=\"selectedIndex == i\"\r\n        #thumb\r\n        [style.left.px]=\"item.x\"\r\n        [style.background]=\"item.color\"\r\n        [title]=\"item.value\"\r\n        (mousedown)=\"dragStart($event, i)\"\r\n      (touchstart)=\"dragStart($event, i)\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- {{ selectedIndex }}\r\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\r\n\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], isBgTransparent: [{
+                type: Input
+            }], addNewRangeOnClick: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], selectedIndex: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], slider: [{
+                type: ViewChild,
+                args: ['slider', { static: true }]
+            }], thumb: [{
+                type: ViewChild,
+                args: ['thumb', { static: false }]
+            }], onDrag: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }] } });
+
+class SaturationComponent {
+    width;
+    height;
+    color = 'red';
+    step = 1;
+    min = { x: 0, y: 0 };
+    max = { x: 100, y: 100 };
+    change = new EventEmitter();
+    isDragging = false;
+    saturation;
+    thumb;
+    x = 0;
+    y = 0;
+    myControl = new FormControl(null);
+    isDisabled = false;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    saturationRect;
+    thumbRect;
+    constructor() { }
+    updateRects() {
+        this.saturationRect = this.saturation.nativeElement.getBoundingClientRect();
+        this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
+    }
+    writeValue(val) {
+        if (!val)
+            val = { x: 0, y: 0 };
+        let value = val;
+        this.myControl.setValue(value, { emitEvent: false });
+        this.updateRects();
+        const saturationRec = this.saturationRect;
+        const thumbRec = this.thumbRect;
+        this.x = ((value.x - this.min.x) * (saturationRec.width - thumbRec.width / 2)) / (this.max.x - this.min.x);
+        this.y = ((value.y - this.min.y) * (saturationRec.height - thumbRec.height / 2)) / (this.max.y - this.min.y);
+        if (val !== value) {
+            this.valueChanged(value);
+        }
+    }
+    validate(control) {
+        return this.myControl.errors;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+        if (disabled)
+            this.myControl.disable();
+        else
+            this.myControl.enable();
+    }
+    dragStart(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.isDragging = true;
+        this.updateRects();
+        this.updatePosition(ev);
+    }
+    onResize() {
+        this.writeValue(this.myControl.value);
+    }
+    onDrag(ev) {
+        if (!this.isDragging)
+            return;
+        this.updatePosition(ev);
+    }
+    updatePosition(ev) {
+        if (!this.isDragging)
+            return;
+        if (!this.saturationRect || !this.thumbRect)
+            this.updateRects();
+        let position = getOffsetPosition(ev, this.saturation.nativeElement);
+        let thumbRec = this.thumbRect;
+        let saturationRec = this.saturationRect;
+        if (position.x < 0) {
+            this.x = 0;
+        }
+        else if (position.x > saturationRec.width - (thumbRec.width / 2 - 3)) {
+            this.x = saturationRec.width - (thumbRec.width / 2 - 3);
+        }
+        else {
+            this.x = position.x;
+        }
+        // this.x = this.x - thumbRec.width / 2;
+        if (position.y < 0) {
+            this.y = 0;
+        }
+        else if (position.y > saturationRec.height - (thumbRec.height / 2 - 3)) {
+            this.y = saturationRec.height - (thumbRec.height / 2 - 3);
+        }
+        else {
+            this.y = position.y;
+        }
+        //  this.y = this.y - thumbRec.height / 2;
+        this.setValueByPosition(thumbRec, saturationRec);
+    }
+    onDragEnd(ev) {
+        this.isDragging = false;
+    }
+    setValueByPosition(thumbRec, saturationRec) {
+        const percentageX = this.x / (saturationRec.width - thumbRec.width);
+        let newValueX = this.min.x + percentageX * (this.max.x - this.min.x);
+        newValueX = Math.round(newValueX / this.step) * this.step;
+        let valueX = Math.min(Math.max(newValueX, this.min.x), this.max.x);
+        //-----------------------------
+        const percentageY = this.y / (saturationRec.height - thumbRec.height);
+        let newValueY = this.min.y + percentageY * (this.max.y - this.min.y);
+        newValueY = Math.round(newValueY / this.step) * this.step;
+        let valueY = Math.min(Math.max(newValueY, this.min.y), this.max.y);
+        const newValue = { x: valueX, y: valueY };
+        if (!this.myControl.value || this.myControl.value.x !== valueX || this.myControl.value.y !== valueY) {
+            this.valueChanged(newValue);
+        }
+    }
+    valueChanged(value) {
+        this.myControl.setValue(value, { emitEvent: false });
+        this._onChange(value);
+        this.change.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SaturationComponent, isStandalone: true, selector: "saturation", inputs: { width: "width", height: "height", color: "color", step: "step", min: "min", max: "max" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SaturationComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "saturation", first: true, predicate: ["saturation"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"saturation-container\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n  (mousedown)=\"dragStart($event)\"\r\n  (touchstart)=\"dragStart($event)\">\r\n  <div class=\"saturation\" #saturation>\r\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\r\n    <div class=\"s-white\"></div>\r\n    <div class=\"s-black\"></div>\r\n  </div>\r\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\r\n</div>\r\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SaturationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'saturation', standalone: true, imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SaturationComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\r\n  class=\"saturation-container\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n  (mousedown)=\"dragStart($event)\"\r\n  (touchstart)=\"dragStart($event)\">\r\n  <div class=\"saturation\" #saturation>\r\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\r\n    <div class=\"s-white\"></div>\r\n    <div class=\"s-black\"></div>\r\n  </div>\r\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\r\n</div>\r\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], saturation: [{
+                type: ViewChild,
+                args: ['saturation', { static: true }]
+            }], thumb: [{
+                type: ViewChild,
+                args: ['thumb', { static: true }]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDrag: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }] } });
+
+class SliderComponent {
+    step = 1;
+    min = 0;
+    max = 100;
+    background;
+    isBgTransparent = false;
+    change = new EventEmitter();
+    isDragging = false;
+    slider;
+    thumb;
+    x = 0;
+    myControl = new FormControl(null);
+    isDisabled = false;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _validatorOnChange = () => { };
+    sliderRect;
+    thumbRect;
+    constructor() { }
+    ngOnInit() {
+        this.myControl.setValidators([Validators.min(this.min), Validators.max(this.max)]);
+    }
+    updateRects() {
+        this.sliderRect = this.slider.nativeElement.getBoundingClientRect();
+        this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
+    }
+    writeValue(val) {
+        let value = 0;
+        if (!val)
+            value = 0;
+        else if (+val < +this.min)
+            value = +this.min;
+        else if (+val > +this.max)
+            value = +this.max;
+        else
+            value = +val;
+        this.myControl.setValue(value, { emitEvent: false });
+        this.updateRects();
+        const sliderRec = this.sliderRect;
+        const thumbRec = this.thumbRect;
+        this.x = ((value - this.min) * (sliderRec.width - thumbRec.width)) / (this.max - this.min);
+        if (val !== value) {
+            this.valueChanged(value);
+        }
+    }
+    validate(control) {
+        return this.myControl.errors;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+        if (disabled)
+            this.myControl.disable();
+        else
+            this.myControl.enable();
+    }
+    dragStart(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.isDragging = true;
+        this.updateRects();
+        this.updatePosition(ev);
+    }
+    onDrag(ev) {
+        if (!this.isDragging)
+            return;
+        this.updatePosition(ev);
+    }
+    onResize() {
+        this.writeValue(this.myControl.value);
+    }
+    updatePosition(ev) {
+        if (!this.isDragging)
+            return;
+        if (!this.sliderRect || !this.thumbRect)
+            this.updateRects();
+        let position = getOffsetPosition(ev, this.slider.nativeElement);
+        let thumbRec = this.thumbRect;
+        position.x -= thumbRec.width / 2;
+        let sliderRec = this.sliderRect;
+        if (position.x < 0) {
+            this.x = 0;
+        }
+        else if (position.x > sliderRec.width - thumbRec.width) {
+            this.x = sliderRec.width - thumbRec.width;
+        }
+        else {
+            this.x = position.x;
+        }
+        this.setValueByPosition(thumbRec, sliderRec);
+    }
+    setValueByPosition(thumbRec, sliderRec) {
+        const percentage = this.x / (sliderRec.width - thumbRec.width);
+        let newValue = this.min + percentage * (this.max - this.min);
+        const stepDecimalPlaces = (this.step.toString().split('.')[1] || '').length;
+        newValue = parseFloat((Math.round(newValue / this.step) * this.step).toFixed(stepDecimalPlaces));
+        let value = Math.min(Math.max(newValue, this.min), this.max);
+        if (this.myControl.value !== value) {
+            this.valueChanged(value);
+        }
+    }
+    onDragEnd(ev) {
+        this.isDragging = false;
+    }
+    valueChanged(value) {
+        this.myControl.setValue(value, { emitEvent: false });
+        this._onChange(value);
+        this.change.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SliderComponent, isStandalone: true, selector: "slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent" }, outputs: { change: "change" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "window:resize": "onResize()", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    (mousedown)=\"dragStart($event)\"\r\n    (touchstart)=\"dragStart($event)\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\">\r\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'slider', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    (mousedown)=\"dragStart($event)\"\r\n    (touchstart)=\"dragStart($event)\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\">\r\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { step: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], isBgTransparent: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], slider: [{
+                type: ViewChild,
+                args: ['slider', { static: true }]
+            }], thumb: [{
+                type: ViewChild,
+                args: ['thumb', { static: true }]
+            }], onDrag: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }] } });
+
+class BrowserService {
+    platformId;
+    constructor(platformId) {
+        this.platformId = platformId;
+    }
+    get isBrowser() {
+        return isPlatformBrowser(this.platformId);
+    }
+    get prefersDarkMode() {
+        if (!this.isBrowser)
+            return false;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BrowserService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BrowserService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BrowserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class DialogOverlayRef {
+    componentRef;
+    dialogEl;
+    teardownFn;
+    constructor(componentRef, dialogEl, teardownFn) {
+        this.componentRef = componentRef;
+        this.dialogEl = dialogEl;
+        this.teardownFn = teardownFn;
+    }
+    close() {
+        this.teardownFn();
+    }
+    get nativeElement() {
+        return this.dialogEl;
+    }
+}
+
+class DialogService {
+    openDialogs = new Map();
+    idCounter = 0;
+    globalKeyDownAdded = false;
+    globalResizeAdded = false;
+    globalClickAdded = false;
+    globalKeyDownListener;
+    globalResizeListener;
+    globalClickListener;
+    doc = inject(DOCUMENT);
+    constructor() {
+        this.globalKeyDownListener = (e) => {
+            if (e.key === 'Escape') {
+                const lastDialog = this.getLastDialog();
+                if (lastDialog) {
+                    lastDialog.cleanup();
+                }
+            }
+        };
+        this.globalResizeListener = () => {
+            this.repositionAll();
+        };
+        this.globalClickListener = (e) => {
+            this.handleClickOnBackdrop(e);
+        };
+    }
+    ngOnDestroy() {
+        this.closeAll();
+    }
+    handleGlobalListeners() {
+        // مطمئن شویم لیسنرها فقط یک بار اضافه شده‌اند
+        if (!this.globalKeyDownAdded) {
+            this.doc.addEventListener('keydown', this.globalKeyDownListener);
+            this.globalKeyDownAdded = true;
+        }
+        if (!this.globalResizeAdded) {
+            window.addEventListener('resize', this.globalResizeListener);
+            this.globalResizeAdded = true;
+        }
+        if (!this.globalClickAdded) {
+            this.doc.addEventListener('click', this.globalClickListener);
+            this.globalClickAdded = true;
+        }
+    }
+    open(options) {
+        const { anchor, component, viewContainerRef, configure, onClosed } = options;
+        if (!viewContainerRef) {
+            throw new Error('ViewContainerRef is required to render dialog content.');
+        }
+        this.handleGlobalListeners();
+        const id = ++this.idCounter;
+        const dialogElement = this.doc.createElement('dialog');
+        dialogElement.style.position = 'absolute';
+        dialogElement.style.outline = 'none';
+        dialogElement.style.padding = '0';
+        dialogElement.style.margin = '0';
+        dialogElement.style.border = 'none';
+        dialogElement.style.background = 'transparent';
+        dialogElement.style.maxWidth = '100vw';
+        dialogElement.style.maxHeight = '100vh';
+        dialogElement.style.overflow = 'visible';
+        dialogElement.style.zIndex = `${1000 + this.openDialogs.size}`;
+        this.doc.body.appendChild(dialogElement);
+        const componentRef = viewContainerRef.createComponent(component);
+        if (componentRef.location.nativeElement) {
+            dialogElement.appendChild(componentRef.location.nativeElement);
+        }
+        // تابع پاک‌سازی اختصاصی برای این دیالوگ
+        const cleanup = () => {
+            if (!this.openDialogs.has(id))
+                return; // جلوگیری از پاک‌سازی مجدد
+            this.openDialogs.delete(id);
+            if (componentRef.location.nativeElement?.parentNode) {
+                componentRef.location.nativeElement.remove();
+            }
+            componentRef.destroy();
+            dialogElement.remove();
+            onClosed?.();
+        };
+        const instance = {
+            id,
+            anchor,
+            element: dialogElement,
+            componentRef: componentRef,
+            options: options,
+            cleanup,
+        };
+        this.openDialogs.set(id, instance);
+        dialogElement.showModal();
+        if (configure) {
+            const ref = new DialogOverlayRef(componentRef, dialogElement, cleanup);
+            configure(componentRef.instance, ref);
+        }
+        requestAnimationFrame(() => {
+            this.positionDialog(instance);
+        });
+        setTimeout(() => {
+            const focusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (focusable) {
+                focusable.focus();
+            }
+        }, 0);
+        const ref = new DialogOverlayRef(componentRef, dialogElement, cleanup);
+        return ref;
+    }
+    repositionAll() {
+        Array.from(this.openDialogs.values()).forEach((instance) => {
+            if (instance.anchor && instance.element.isConnected) {
+                this.positionDialog(instance);
+            }
+        });
+    }
+    positionDialog(dialogInstance) {
+        const anchor = dialogInstance.anchor;
+        const dialog = dialogInstance.element;
+        const { placement, alignment, margin = 8 } = dialogInstance.options;
+        if (!anchor || !dialog)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const dialogRect = dialog.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const isRTL = getComputedStyle(this.doc.documentElement).direction === 'rtl';
+        let top = 0;
+        let left = 'auto';
+        let right = 'auto';
+        const spaceBelow = vh - anchorRect.bottom;
+        const spaceAbove = anchorRect.top;
+        let verticalPos = 'above';
+        //  vertical position
+        if (placement === 'bottom' || (placement === 'auto' && spaceBelow >= dialogRect.height + margin)) {
+            top = anchorRect.bottom + margin;
+            verticalPos = 'above';
+            if (top + dialogRect.height > vh - margin) {
+                top = vh - dialogRect.height - margin;
+                verticalPos = 'bottom';
+            }
+        }
+        else {
+            top = anchorRect.top - dialogRect.height - margin;
+            verticalPos = 'bottom';
+            if (top > spaceAbove) {
+                top = anchorRect.top + anchorRect.height + margin;
+                verticalPos = 'above';
+            }
+        }
+        //  horizontal position
+        if (alignment === 'center') {
+            left = anchorRect.left + anchorRect.width / 2 - dialogRect.width / 2;
+        }
+        else if (alignment === 'start') {
+            if (isRTL) {
+                left = 'auto';
+                right = vw - anchorRect.right;
+            }
+            else {
+                left = anchorRect.left;
+            }
+        }
+        else {
+            // end
+            left = isRTL ? anchorRect.left : anchorRect.right - dialogRect.width;
+        }
+        if (left != 'auto' && left < margin) {
+            left = margin;
+        }
+        if (left != 'auto' && left + dialogRect.width > vw - margin) {
+            left = vw - dialogRect.width - margin;
+        }
+        dialog.className = `tips-${verticalPos}`;
+        dialog.style.top = `${top}px`;
+        dialog.style.left = left != 'auto' ? `${left}px` : left;
+        dialog.style.right = right != 'auto' ? `${right}px` : right;
+        dialog.style.transform = 'none';
+    }
+    getLastDialog() {
+        if (this.openDialogs.size === 0)
+            return undefined;
+        const lastKey = Array.from(this.openDialogs.keys()).pop();
+        return lastKey ? this.openDialogs.get(lastKey) : undefined;
+    }
+    closeAll() {
+        const ids = Array.from(this.openDialogs.keys());
+        ids.forEach((id) => {
+            const instance = this.openDialogs.get(id);
+            instance?.cleanup();
+        });
+    }
+    handleClickOnBackdrop(event) {
+        const target = event.target;
+        const lastDialog = this.getLastDialog();
+        if (!lastDialog)
+            return;
+        // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+        if (target !== lastDialog.element || !lastDialog.element?.open)
+            return;
+        // If the dialog contains a form, do not close the dialog when clicking outside of the dialog
+        if (lastDialog.element.querySelector('form'))
+            return;
+        const rect = lastDialog.element.getBoundingClientRect();
+        const clickWasInsideDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
+        if (!clickWasInsideDialog) {
+            lastDialog.cleanup();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrowserService, DialogOverlayRef, DialogService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, getOffsetPosition };
+//# sourceMappingURL=ngx-input-shared.mjs.map