ngx-kit 1.0.0

package/fesm2022/ngx-input-gradient-picker.mjs

@@ -0,0 +1,607 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, forwardRef, ViewChild, Output, Input, ChangeDetectionStrategy, Component, ElementRef, HostListener, Directive } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1$1 from 'ngx-input/shared';
+import { BrowserService, RangeSliderComponent } from 'ngx-input/shared';
+import { NgxInputColor } from 'ngx-input/color-picker';
+import { NgxInputAngle } from 'ngx-input/angle-selector';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+function buildGradientFromStops(stops, type = 'linear', rotation = 0) {
+    if (!stops || stops.length === 0)
+        return '';
+    // sort by numeric value
+    const sorted = [...stops].sort((a, b) => a.value - b.value);
+    // clamp 0..100 and format stops
+    const parts = sorted.map((s) => {
+        const v = Math.max(0, Math.min(Number(s.value) || 0, 100));
+        return `${s.color.trim()} ${v}%`;
+    });
+    let prefix = '';
+    if (type === 'linear') {
+        // rotation can be number (deg) or string like 'to right' or '45deg'
+        if (typeof rotation === 'number')
+            prefix = `${rotation}deg, `;
+        else if (typeof rotation === 'string' && rotation.trim().length)
+            prefix = `${rotation.trim()}, `;
+    }
+    else if (type === 'radial') {
+        // keep simple "circle" default: caller may put 'circle' in rotation (or pass separate option if needed)
+        prefix = typeof rotation === 'string' && rotation.trim() ? `${rotation.trim()}, ` : 'circle, ';
+    }
+    else if (type === 'conic') {
+        // conic-gradient accepts angle like 'from 45deg at 50% 50%'
+        if (typeof rotation === 'number')
+            prefix = `from ${rotation}deg, `;
+        else if (typeof rotation === 'string' && rotation.trim())
+            prefix = `${rotation.trim()}, `;
+    }
+    return `${type}-gradient(${prefix}${parts.join(', ')})`;
+}
+function generateRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+function isValidGradient(value) {
+    if (!value || typeof value !== 'string')
+        return false;
+    return /^\s*(conic|linear|radial)-gradient\s*\(/i.test(value.trim());
+}
+/**
+ * parseGradient
+ * - returns: { type, rotation (number|string), stops, valid }
+ * - stops: array of { id, color, value } where value is 0..100 (percent)
+ * - rotation: number (deg) for linear if parsed as angle, or string (e.g. 'to right' or '45deg')
+ */
+function parseGradient(value) {
+    let type = 'linear';
+    let rotation = 180;
+    let shape;
+    let stops = [];
+    let valid = false;
+    if (!value)
+        return { type, rotation, shape, stops, valid };
+    const match = value.trim().match(/^(\s*)(conic|linear|radial)-gradient\s*\((.*)\)$/i);
+    if (!match)
+        return { type, rotation, shape, stops, valid };
+    type = match[2].toLowerCase();
+    let content = match[3].trim();
+    // --- Split arguments by commas, respecting parentheses (for rgba, hsl, etc.)
+    const parts = [];
+    let buf = '';
+    let depth = 0;
+    for (const c of content) {
+        if (c === '(')
+            depth++;
+        if (c === ')')
+            depth--;
+        if (c === ',' && depth === 0) {
+            parts.push(buf.trim());
+            buf = '';
+        }
+        else {
+            buf += c;
+        }
+    }
+    if (buf.trim())
+        parts.push(buf.trim());
+    // --- Determine starting index for color stops
+    let colorStopStart = 0;
+    const first = parts[0];
+    if (type === 'linear') {
+        // e.g., "90deg" or "to right"
+        const angleMatch = first.match(/^(\d+)(deg)?$/i);
+        if (angleMatch) {
+            rotation = parseFloat(angleMatch[1]);
+            colorStopStart = 1;
+        }
+        else if (/^to /i.test(first)) {
+            // optional direction mapping
+            colorStopStart = 1;
+        }
+    }
+    else if (type === 'radial') {
+        // e.g., "circle", "circle at center", "ellipse at top left"
+        if (!/^#|rgb|hsl|[a-z]+\(/i.test(first)) {
+            shape = first;
+            colorStopStart = 1;
+        }
+    }
+    else if (type === 'conic') {
+        // e.g., "from 0deg at center"
+        if (!/^#|rgb|hsl|[a-z]+\(/i.test(first))
+            colorStopStart = 1;
+    }
+    // --- Regex for color stops
+    const colorStopRegex = /((#([0-9a-fA-F]{3,8}))|(rgba?\([^\)]+\))|(hsla?\([^\)]+\))|([a-zA-Z]+))(\s+([\d.]+%?))?/;
+    for (let i = colorStopStart; i < parts.length; i++) {
+        const stopPart = parts[i].trim();
+        const m = stopPart.match(colorStopRegex);
+        if (m) {
+            const color = m[1];
+            const posStr = m[9];
+            let value = 0;
+            if (posStr && posStr.endsWith('%'))
+                value = parseFloat(posStr);
+            else if (posStr)
+                value = parseFloat(posStr);
+            else {
+                // اگر درصدی وجود نداشت، با توجه به ایندکس مقدار دهی کن
+                if (stops.length === 0)
+                    value = 0;
+                else if (i === parts.length - 1)
+                    value = 100;
+                else
+                    value = (100 / (parts.length - colorStopStart - 1)) * stops.length;
+            }
+            stops.push({ color, value, id: generateId(stops) });
+        }
+    }
+    valid = stops.length >= 2;
+    return { type, rotation, shape, stops, valid };
+}
+function generateId(rangeValues) {
+    const id = 'ngx-stop-' + Math.random().toString(36).substring(2, 9);
+    return rangeValues.find((x) => x.id === id) ? generateId(rangeValues) : id;
+}
+
+const DefaultGradients = [
+    // Sunset
+    [
+        { id: '1', value: 0, color: '#ff7e5f' },
+        { id: '2', value: 100, color: '#feb47b' },
+    ],
+    // Ocean Blue
+    [
+        { id: '1', value: 0, color: '#00c6ff' },
+        { id: '2', value: 100, color: '#0072ff' },
+    ],
+    // Purple Dream
+    [
+        { id: '1', value: 0, color: '#a18cd1' },
+        { id: '2', value: 100, color: '#fbc2eb' },
+    ],
+    // Cool Sky
+    [
+        { id: '1', value: 0, color: '#2193b0' },
+        { id: '2', value: 100, color: '#6dd5ed' },
+    ],
+    // Peach
+    [
+        { id: '1', value: 0, color: '#ed4264' },
+        { id: '2', value: 100, color: '#ffedbc' },
+    ],
+    // Night Fade
+    [
+        { id: '1', value: 0, color: '#a18cd1' },
+        { id: '2', value: 100, color: '#fbc2eb' },
+    ],
+    // Aqua Marine
+    [
+        { id: '1', value: 0, color: '#1a2980' },
+        { id: '2', value: 100, color: '#26d0ce' },
+    ],
+    // Forest
+    [
+        { id: '1', value: 0, color: '#5a3f37' },
+        { id: '2', value: 100, color: '#2c7744' },
+    ],
+    // Flame
+    [
+        { id: '1', value: 0, color: '#ff4e50' },
+        { id: '2', value: 100, color: '#f9d423' },
+    ],
+    // Blue Lagoon
+    [
+        { id: '1', value: 0, color: '#43cea2' },
+        { id: '2', value: 100, color: '#185a9d' },
+    ],
+    // Retro
+    [
+        { id: '1', value: 0, color: '#3fada8' },
+        { id: '2', value: 100, color: '#808080' },
+    ],
+    // Sunrise
+    [
+        { id: '1', value: 0, color: '#ff512f' },
+        { id: '2', value: 100, color: '#dd2476' },
+    ],
+    // Rainbow
+    [
+        { id: '1', value: 0, color: '#ff0000' },
+        { id: '2', value: 20, color: '#ff9900' },
+        { id: '3', value: 40, color: '#ffff00' },
+        { id: '4', value: 60, color: '#00ff00' },
+        { id: '5', value: 80, color: '#0000ff' },
+        { id: '6', value: 100, color: '#8b00ff' },
+    ],
+    // Candy
+    [
+        { id: '1', value: 0, color: '#f953c6' },
+        { id: '2', value: 100, color: '#b91d73' },
+    ],
+    // Citrus
+    [
+        { id: '1', value: 0, color: '#fdc830' },
+        { id: '2', value: 100, color: '#f37335' },
+    ],
+    // Lava
+    [
+        { id: '1', value: 0, color: '#e52d27' },
+        { id: '2', value: 100, color: '#b31217' },
+    ],
+    // Winter
+    [
+        { id: '1', value: 0, color: '#e6dada' },
+        { id: '2', value: 100, color: '#274046' },
+    ],
+    // Purple Love
+    [
+        { id: '1', value: 0, color: '#cc2b5e' },
+        { id: '2', value: 100, color: '#753a88' },
+    ],
+    // Mint
+    [
+        { id: '1', value: 0, color: '#76b852' },
+        { id: '2', value: 100, color: '#8dc26f' },
+    ],
+    // Cloud
+    [
+        { id: '1', value: 0, color: '#bdc3c7' },
+        { id: '2', value: 100, color: '#2c3e50' },
+    ],
+];
+
+class NgxInputGradientComponent {
+    cd;
+    browserService = inject(BrowserService);
+    theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
+    set setTheme(val) {
+        if (!val || val == 'auto') {
+            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
+        }
+        else {
+            this.theme = val;
+        }
+    }
+    change = new EventEmitter();
+    defaultGradients = [];
+    resultGradient = '';
+    baseBg = '';
+    rangeValues = [];
+    type = 'linear';
+    rotation = 90;
+    selectedIndex = 0;
+    isDisabled = false;
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _onValidateChange = () => { };
+    rangeSlider;
+    constructor(cd) {
+        this.cd = cd;
+    }
+    ngOnInit() {
+        this.setDefaultGradients();
+    }
+    ngOnDestroy() { }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidateChange = fn;
+    }
+    validate(control) {
+        if (!this.resultGradient)
+            return { required: true };
+        const parsed = parseGradient(this.resultGradient);
+        if (!parsed.valid)
+            return { invalid: true };
+        if (parsed.stops.length < 2)
+            return { stops: 'at least 2 color stops required' };
+        return null;
+    }
+    writeValue(value) {
+        if (value && isValidGradient(value)) {
+            const parsed = parseGradient(value);
+            if (parsed.valid) {
+                this.resultGradient = value;
+                this.type = parsed.type;
+                this.rotation = +parsed.rotation;
+                this.rangeValues = parsed.stops;
+            }
+            else {
+                this.resultGradient = '';
+                this.rangeValues = [
+                    { color: generateRandomColor(), value: 0, id: this.generateId() },
+                    { color: generateRandomColor(), value: 100, id: this.generateId() },
+                ];
+                this.type = 'linear';
+                this.rotation = 90;
+            }
+        }
+        else {
+            this.resultGradient = '';
+            this.rangeValues = [
+                { color: generateRandomColor(), value: 0, id: this.generateId() },
+                { color: generateRandomColor(), value: 100, id: this.generateId() },
+            ];
+            this.type = 'linear';
+            this.rotation = 90;
+        }
+        this.generateGradient();
+    }
+    generateId() {
+        let id = 'ngx-thumb-' + Math.random().toString(36).substring(2, 9);
+        if (this.rangeValues.findIndex((x) => x.id == id) >= 0) {
+            return this.generateId();
+        }
+        return id;
+    }
+    stopPropagation(ev) {
+        ev.stopPropagation();
+    }
+    remove() {
+        if (this.rangeValues.length > 2) {
+            this.rangeValues.splice(this.selectedIndex, 1);
+            this.selectedIndex = 0;
+            this.generateGradient();
+        }
+    }
+    generateGradient(ev) {
+        if (ev && this.rangeValues[this.selectedIndex]) {
+            this.rangeValues[this.selectedIndex].color = ev;
+        }
+        for (let item of this.rangeValues) {
+            item.color ??= generateRandomColor();
+        }
+        this.baseBg = buildGradientFromStops(this.rangeValues, 'linear', 90);
+        this.resultGradient = buildGradientFromStops(this.rangeValues, this.type, +this.rotation);
+        this.emitChange();
+    }
+    updateRangeSlider() {
+        if (this.rangeSlider) {
+            this.rangeSlider.writeValue(this.rangeValues);
+        }
+    }
+    emitChange() {
+        this._onChange(this.resultGradient);
+        this.change.emit(this.resultGradient);
+    }
+    setDefaultGradients() {
+        this.defaultGradients = [];
+        for (let item of DefaultGradients) {
+            this.defaultGradients.push(buildGradientFromStops(item, 'linear', 90));
+        }
+    }
+    onSelectDefault(item, i) {
+        // console.log('onSelectDefault', item, i);
+        this.writeValue(item);
+        this.emitChange();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputGradientComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputGradientComponent, isStandalone: true, selector: "ngx-input-gradient", inputs: { setTheme: ["theme", "setTheme"] }, outputs: { change: "change" }, host: { properties: { "class.dark": "theme==\"dark\"" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputGradientComponent), multi: true },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: NgxInputGradientComponent,
+            },
+        ], viewQueries: [{ propertyName: "rangeSlider", first: true, predicate: ["rangeSlider"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ngx-input-gradient-picker\" (click)=\"stopPropagation($event)\">\r\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\r\n  <div class=\"ngx-c-inner\">\r\n    <range-slider\r\n      [(ngModel)]=\"rangeValues\"\r\n      name=\"rangeCalues\"\r\n      [min]=\"0\"\r\n      [max]=\"100\"\r\n      [step]=\"1\"\r\n      [addNewRangeOnClick]=\"true\"\r\n      [background]=\"baseBg\"\r\n      [(selectedIndex)]=\"selectedIndex\"\r\n      (change)=\"generateGradient()\"\r\n      #rangeSlider></range-slider>\r\n\r\n    <div class=\"text-end\">\r\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\r\n    </div>\r\n    @if (rangeValues[selectedIndex]) {\r\n      <div class=\"ngx-row\">\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Color</div>\r\n          <div class=\"input-color\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\r\n              name=\"color\"\r\n              #inputColor\r\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\r\n            <span\r\n              #ngxGradColor\r\n              class=\"color\"\r\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\r\n              [ngxInputColor]=\"inputColor\"\r\n              [theme]=\"theme\"\r\n              [ngModel]=\"rangeValues[selectedIndex].color\"\r\n              [simpleMode]=\"true\"\r\n              (change)=\"generateGradient($event)\"></span>\r\n          </div>\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Position</div>\r\n          <input\r\n            type=\"number\"\r\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\r\n            min=\"0\"\r\n            max=\"100\"\r\n            name=\"posiition\"\r\n            (change)=\"generateGradient(); updateRangeSlider()\" />\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Rotation</div>\r\n          <div class=\"ngx-input-group\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"rotation\"\r\n              ngxInputAngle\r\n              [theme]=\"theme\"\r\n              (change)=\"generateGradient()\"\r\n              name=\"rotation\"\r\n              [disabled]=\"type == 'radial'\" />\r\n            <span class=\"ngx-input-prefix\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\r\n                <path\r\n                  d=\"M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z\" />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Type</div>\r\n          <div class=\"ngx-input-group\">\r\n            <select [(ngModel)]=\"type\" (change)=\"generateGradient()\" name=\"type\">\r\n              <option value=\"linear\">linear</option>\r\n              <option value=\"radial\">radial</option>\r\n            </select>\r\n            <span class=\"ngx-input-prefix\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\r\n                <path\r\n                  d=\"M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z\" />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"default-list\">\r\n      @for (item of defaultGradients; track $index; let i = $index) {\r\n        <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-gradient-picker{width:270px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;font-family:arial,tahoma}.ngx-input-gradient-picker .ngx-c-inner{padding:0 12px 12px}.ngx-input-gradient-picker *{box-sizing:border-box}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{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}.ngx-color-preview:after{background:var(--ngx-selected-gradient)}.ngx-row{display:flex;flex-wrap:wrap;gap:12px}.ngx-row .ngx-col-6{width:47%}.ngx-row .ngx-input-group{display:flex}.ngx-row .ngx-input-group .ngx-input-prefix{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg{max-width:100%;max-height:100%;fill:var(--ngx-color-text)}.ngx-row .input-color{position:relative}.ngx-row .input-color input{padding-right:26px}.ngx-row .input-color .color{position:absolute;top:4px;right:5px;cursor:pointer;display:inline-block;width:24px;height:24px;border-radius:4px;border:1px solid #ccc;transition:all .3s}.ngx-row .input-color .color:hover{border-color:#8db6e4}.ngx-row select,.ngx-row input{outline:none;border:1px solid #ececec;border-radius:4px;padding:8px 10px;background:none;width:100%;color:var(--ngx-color-text);appearance:none}.ngx-row select option,.ngx-row input option{padding:10px 20px;background-color:#fff;transition:all .3s;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.ngx-row select option:hover,.ngx-row input option:hover{background:#f0f0f0}.text-end{text-align:end}.remove-btn{background:none;border:none;outline:none;color:#07f;transition:color .3s}.remove-btn:hover{color:#0462cc}.default-list{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.default-list span{width:36px;height:26px;border-radius:4px;cursor:pointer;transition:transform .3s}.default-list span:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeSliderComponent, selector: "range-slider", inputs: ["step", "min", "max", "background", "isBgTransparent", "addNewRangeOnClick", "selectedIndex"], outputs: ["change", "selectedIndexChange"] }, { kind: "directive", type: NgxInputColor, selector: "[ngxInputColor]", inputs: ["setInputBackgroundColor", "defaultInspector", "simpleMode", "outputType", "theme", "useAlphaChannel", "ngxInputColor"], outputs: ["change"] }, { kind: "directive", type: NgxInputAngle, selector: "[ngxInputAngle]", inputs: ["theme", "size", "openOnCLick"], outputs: ["change"], exportAs: ["ngxInputAngle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputGradientComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-input-gradient', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputGradientComponent), multi: true },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: NgxInputGradientComponent,
+                        },
+                    ], host: {
+                        '[class.dark]': 'theme=="dark"',
+                    }, imports: [CommonModule, FormsModule, RangeSliderComponent, NgxInputColor, NgxInputAngle], template: "<div class=\"ngx-input-gradient-picker\" (click)=\"stopPropagation($event)\">\r\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\r\n  <div class=\"ngx-c-inner\">\r\n    <range-slider\r\n      [(ngModel)]=\"rangeValues\"\r\n      name=\"rangeCalues\"\r\n      [min]=\"0\"\r\n      [max]=\"100\"\r\n      [step]=\"1\"\r\n      [addNewRangeOnClick]=\"true\"\r\n      [background]=\"baseBg\"\r\n      [(selectedIndex)]=\"selectedIndex\"\r\n      (change)=\"generateGradient()\"\r\n      #rangeSlider></range-slider>\r\n\r\n    <div class=\"text-end\">\r\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\r\n    </div>\r\n    @if (rangeValues[selectedIndex]) {\r\n      <div class=\"ngx-row\">\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Color</div>\r\n          <div class=\"input-color\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\r\n              name=\"color\"\r\n              #inputColor\r\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\r\n            <span\r\n              #ngxGradColor\r\n              class=\"color\"\r\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\r\n              [ngxInputColor]=\"inputColor\"\r\n              [theme]=\"theme\"\r\n              [ngModel]=\"rangeValues[selectedIndex].color\"\r\n              [simpleMode]=\"true\"\r\n              (change)=\"generateGradient($event)\"></span>\r\n          </div>\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Position</div>\r\n          <input\r\n            type=\"number\"\r\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\r\n            min=\"0\"\r\n            max=\"100\"\r\n            name=\"posiition\"\r\n            (change)=\"generateGradient(); updateRangeSlider()\" />\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Rotation</div>\r\n          <div class=\"ngx-input-group\">\r\n            <input\r\n              type=\"text\"\r\n              [(ngModel)]=\"rotation\"\r\n              ngxInputAngle\r\n              [theme]=\"theme\"\r\n              (change)=\"generateGradient()\"\r\n              name=\"rotation\"\r\n              [disabled]=\"type == 'radial'\" />\r\n            <span class=\"ngx-input-prefix\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\r\n                <path\r\n                  d=\"M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z\" />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <div class=\"ngx-col-6\">\r\n          <div class=\"label\">Type</div>\r\n          <div class=\"ngx-input-group\">\r\n            <select [(ngModel)]=\"type\" (change)=\"generateGradient()\" name=\"type\">\r\n              <option value=\"linear\">linear</option>\r\n              <option value=\"radial\">radial</option>\r\n            </select>\r\n            <span class=\"ngx-input-prefix\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\r\n                <path\r\n                  d=\"M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z\" />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"default-list\">\r\n      @for (item of defaultGradients; track $index; let i = $index) {\r\n        <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-gradient-picker{width:270px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;font-family:arial,tahoma}.ngx-input-gradient-picker .ngx-c-inner{padding:0 12px 12px}.ngx-input-gradient-picker *{box-sizing:border-box}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{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}.ngx-color-preview:after{background:var(--ngx-selected-gradient)}.ngx-row{display:flex;flex-wrap:wrap;gap:12px}.ngx-row .ngx-col-6{width:47%}.ngx-row .ngx-input-group{display:flex}.ngx-row .ngx-input-group .ngx-input-prefix{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg{max-width:100%;max-height:100%;fill:var(--ngx-color-text)}.ngx-row .input-color{position:relative}.ngx-row .input-color input{padding-right:26px}.ngx-row .input-color .color{position:absolute;top:4px;right:5px;cursor:pointer;display:inline-block;width:24px;height:24px;border-radius:4px;border:1px solid #ccc;transition:all .3s}.ngx-row .input-color .color:hover{border-color:#8db6e4}.ngx-row select,.ngx-row input{outline:none;border:1px solid #ececec;border-radius:4px;padding:8px 10px;background:none;width:100%;color:var(--ngx-color-text);appearance:none}.ngx-row select option,.ngx-row input option{padding:10px 20px;background-color:#fff;transition:all .3s;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.ngx-row select option:hover,.ngx-row input option:hover{background:#f0f0f0}.text-end{text-align:end}.remove-btn{background:none;border:none;outline:none;color:#07f;transition:color .3s}.remove-btn:hover{color:#0462cc}.default-list{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.default-list span{width:36px;height:26px;border-radius:4px;cursor:pointer;transition:transform .3s}.default-list span:hover{transform:scale(1.2)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
+                type: Input,
+                args: ['theme']
+            }], change: [{
+                type: Output
+            }], rangeSlider: [{
+                type: ViewChild,
+                args: ['rangeSlider', { static: true }]
+            }] } });
+
+class NgxInputGradient {
+    el;
+    renderer;
+    viewContainerRef;
+    dialogService;
+    setInputBackground = true;
+    theme = 'auto';
+    _targetInput;
+    set ngxInputColor(el) {
+        this.isHostInput = false;
+        if (el instanceof ElementRef) {
+            this._targetInput = el.nativeElement;
+        }
+        else if (el instanceof HTMLInputElement) {
+            this.isHostInput = true;
+            this._targetInput = el;
+        }
+        else {
+            this._targetInput = undefined;
+        }
+        if (this._targetInput) {
+            this._targetInput.removeEventListener('input', this.boundInputHandler);
+            this._targetInput.addEventListener('input', this.boundInputHandler);
+        }
+    }
+    change = new EventEmitter();
+    boundInputHandler = (e) => {
+        this.writeValue(e.target.value);
+    };
+    isHostInput = false;
+    pickerRef;
+    value = '';
+    _onChange = (value) => { };
+    _onTouched = () => { };
+    _onValidateChange = () => { };
+    constructor(el, renderer, viewContainerRef, dialogService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.viewContainerRef = viewContainerRef;
+        this.dialogService = dialogService;
+    }
+    onClick(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.toggleColorPicker();
+    }
+    ngAfterViewInit() {
+        if (this._targetInput && this._targetInput.tagName.toLowerCase() === 'input') {
+            this.writeValue(this._targetInput.value);
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        if (disabled) {
+            this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);
+        }
+        else {
+            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+        }
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidateChange = fn;
+    }
+    validate(control) {
+        return null;
+    }
+    ngOnDestroy() {
+        this.destroyPicker();
+    }
+    writeValue(val) {
+        this.value = val;
+        if (val && isValidGradient(val)) {
+            // const parsed = parseGradient(val);
+            if (this.setInputBackground) {
+                this.renderer.setStyle(this.el.nativeElement, 'background', val);
+            }
+            if (this.isHostInput) {
+                this.el.nativeElement.value = this.value;
+            }
+            this._onValidateChange();
+        }
+        else {
+            this.renderer.setStyle(this.el.nativeElement, 'background', '');
+        }
+    }
+    toggleColorPicker() {
+        if (this.pickerRef) {
+            this.destroyPicker();
+            return;
+        }
+        this.pickerRef = this.dialogService.open({
+            anchor: this.el.nativeElement,
+            component: NgxInputGradientComponent,
+            viewContainerRef: this.viewContainerRef,
+            alignment: 'start',
+            placement: 'auto',
+            configure: (instance, ref) => {
+                instance.setTheme = this.theme;
+                instance.writeValue(this.value);
+                instance.change.subscribe((c) => {
+                    this.value = c;
+                    this.emitChange(c);
+                });
+                // instance.closed.subscribe(() => ref.close());
+            },
+            onClosed: () => {
+                this.pickerRef = undefined;
+            },
+        });
+    }
+    destroyPicker() {
+        if (this.pickerRef) {
+            this.pickerRef.close();
+            this.pickerRef = undefined;
+        }
+    }
+    async emitChange(c) {
+        if (this.setInputBackground) {
+            this.renderer.setStyle(this.el.nativeElement, 'background', c);
+        }
+        // اگر روی input باشیم، مقدار رو در input قرار بده
+        if (this.isHostInput) {
+            const input = this.el.nativeElement;
+            input.value = c;
+        }
+        // اگر targetInput وجود داره، در اونم مقدار ست کن
+        if (this._targetInput instanceof HTMLInputElement) {
+            this._targetInput.value = c;
+            const event = new Event('input', { bubbles: true });
+            this._targetInput.dispatchEvent(event);
+        }
+        this._onChange(c);
+        this.change.emit(c);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputGradient, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputGradient, isStandalone: true, selector: "[ngxInputGradient]", inputs: { setInputBackground: "setInputBackground", theme: "theme", ngxInputColor: "ngxInputColor" }, outputs: { change: "change" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputGradient), multi: true },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: NgxInputGradient,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputGradient, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxInputGradient]',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputGradient), multi: true },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: NgxInputGradient,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$1.DialogService }], propDecorators: { setInputBackground: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], ngxInputColor: [{
+                type: Input,
+                args: ['ngxInputColor']
+            }], change: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxInputGradient, NgxInputGradientComponent };
+//# sourceMappingURL=ngx-input-gradient-picker.mjs.map