ngx-kit 8.1.0 → 8.3.0

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

@@ -1,154 +1,153 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, forwardRef, ViewChild, Output, ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, Directive } from '@angular/core';
+import { input, output, forwardRef, ViewChild, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Output, Input, 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-kit/core';
-import { BrowserService, RangeSliderComponent } from 'ngx-kit/core';
+import { RangeSliderComponent } from 'ngx-kit/core';
 import { NgxInputColor } from 'ngx-kit/color-picker';
 import { NgxInputAngle } from 'ngx-kit/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)
+function buildGradientFromStops(stops, type = 'linear', rotation = 0, options = '') {
+    if (!stops?.length)
         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}%`;
+    const parts = sorted.map((stop) => {
+        const value = Math.max(0, Math.min(Number(stop.value) || 0, 100));
+        return `${stop.color.trim()} ${value}%`;
     });
-    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(', ')})`;
+    const kind = type.replace('repeating-', '');
+    let prefix = options.trim();
+    if (!prefix && kind === 'linear') {
+        prefix = typeof rotation === 'number' ? `${rotation}deg` : rotation.trim();
+    }
+    else if (!prefix && kind === 'radial') {
+        prefix = typeof rotation === 'string' && rotation.trim() ? rotation.trim() : 'circle';
+    }
+    else if (!prefix && kind === 'conic') {
+        prefix = typeof rotation === 'number' ? `from ${rotation}deg` : rotation.trim();
+    }
+    return `${type}-gradient(${prefix ? `${prefix}, ` : ''}${parts.join(', ')})`;
 }
 function generateRandomColor() {
     const letters = '0123456789ABCDEF';
     let color = '#';
-    for (let i = 0; i < 6; i++) {
+    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());
+    return (typeof value === 'string' &&
+        /^\s*(?:repeating-)?(?:conic|linear|radial)-gradient\s*\(/i.test(value));
 }
-/**
- * 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 options = '';
     let shape;
-    let stops = [];
+    const stops = [];
     let valid = false;
     if (!value)
-        return { type, rotation, shape, stops, valid };
-    const match = value.trim().match(/^(\s*)(conic|linear|radial)-gradient\s*\((.*)\)$/i);
+        return { type, rotation, options, shape, stops, valid };
+    const match = value
+        .trim()
+        .match(/^((?:repeating-)?(?: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.)
+        return { type, rotation, options, shape, stops, valid };
+    type = match[1].toLowerCase();
+    const parts = splitGradientArguments(match[2]);
+    const first = parts[0] ?? '';
+    const kind = type.replace('repeating-', '');
+    const hasPrelude = kind === 'linear'
+        ? /^(?:to\s+|in\s+|[-+]?(?:\d*\.)?\d+(?:deg|grad|rad|turn)\b)/i.test(first)
+        : kind === 'radial'
+            ? /^(?:(?:circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner)\b|at\s+)/i.test(first) || !parseColorStop(first)
+            : /^(?:from\s+|at\s+)/i.test(first) || !parseColorStop(first);
+    let firstStop = 0;
+    if (hasPrelude) {
+        options = first;
+        firstStop = 1;
+        const angle = first.match(/(?:from\s+)?([-+]?(?:\d*\.)?\d+)(deg|grad|rad|turn)\b/i);
+        if (angle)
+            rotation = angleToDegrees(Number(angle[1]), angle[2]);
+        if (kind === 'radial')
+            shape = first;
+    }
+    else if (kind === 'conic') {
+        rotation = 0;
+    }
+    for (let i = firstStop; i < parts.length; i++) {
+        const parsed = parseColorStop(parts[i]);
+        if (!parsed)
+            continue;
+        let position = parsed.position;
+        if (position === undefined) {
+            position =
+                stops.length === 0
+                    ? 0
+                    : i === parts.length - 1
+                        ? 100
+                        : (100 / (parts.length - firstStop - 1)) * stops.length;
+        }
+        stops.push({ color: parsed.color, value: position, id: generateId(stops) });
+    }
+    valid = stops.length >= 2;
+    return { type, rotation, options, shape, stops, valid };
+}
+function splitGradientArguments(value) {
     const parts = [];
-    let buf = '';
     let depth = 0;
-    for (const c of content) {
-        if (c === '(')
+    let start = 0;
+    for (let i = 0; i < value.length; i++) {
+        if (value[i] === '(')
             depth++;
-        if (c === ')')
+        else if (value[i] === ')')
             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 (value[i] === ',' && depth === 0) {
+            parts.push(value.slice(start, i).trim());
+            start = i + 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;
+    parts.push(value.slice(start).trim());
+    return parts.filter(Boolean);
+}
+function parseColorStop(value) {
+    const stop = value.trim();
+    const positionMatch = stop.match(/\s+([-+]?(?:\d*\.)?\d+)%?$/);
+    const color = positionMatch ? stop.slice(0, positionMatch.index).trim() : stop;
+    if (!/^(?:#[\da-f]{3,8}|[a-z][\w-]*|[a-z][\w-]*\()/i.test(color))
+        return undefined;
+    if (color.includes('(')) {
+        let depth = 0;
+        for (const char of color) {
+            if (char === '(')
+                depth++;
+            else if (char === ')')
+                depth--;
+            if (depth < 0)
+                return undefined;
         }
+        if (depth !== 0 || !/\)$/.test(color))
+            return undefined;
     }
-    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) });
-        }
+    return { color, position: positionMatch ? Number.parseFloat(positionMatch[1]) : undefined };
+}
+function angleToDegrees(value, unit) {
+    switch (unit.toLowerCase()) {
+        case 'turn':
+            return value * 360;
+        case 'grad':
+            return value * 0.9;
+        case 'rad':
+            return value * (180 / Math.PI);
+        default:
+            return value;
     }
-    valid = stops.length >= 2;
-    return { type, rotation, shape, stops, valid };
 }
-function generateId(rangeValues) {
+function generateId(stops) {
     const id = 'ngx-stop-' + Math.random().toString(36).substring(2, 9);
-    return rangeValues.find((x) => x.id === id) ? generateId(rangeValues) : id;
+    return stops.some((stop) => stop.id === id) ? generateId(stops) : id;
 }
 
 const DefaultGradients = [
@@ -260,14 +259,16 @@ const DefaultGradients = [
 
 class NgxInputGradientComponent {
     cd;
-    browserService = inject(BrowserService);
-    change = new EventEmitter();
+    showSamples = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSamples" }] : /* istanbul ignore next */ []));
+    change = output();
     defaultGradients = [];
     resultGradient = '';
     baseBg = '';
     rangeValues = [];
     type = 'linear';
     rotation = 90;
+    gradientOptions = '';
     selectedIndex = 0;
     isDisabled = false;
     _onChange = (value) => { };
@@ -309,7 +310,8 @@ class NgxInputGradientComponent {
             if (parsed.valid) {
                 this.resultGradient = value;
                 this.type = parsed.type;
-                this.rotation = +parsed.rotation;
+                this.rotation = parsed.rotation;
+                this.gradientOptions = parsed.options;
                 this.rangeValues = parsed.stops;
             }
             else {
@@ -320,6 +322,7 @@ class NgxInputGradientComponent {
                 ];
                 this.type = 'linear';
                 this.rotation = 90;
+                this.gradientOptions = '';
             }
         }
         else {
@@ -330,6 +333,7 @@ class NgxInputGradientComponent {
             ];
             this.type = 'linear';
             this.rotation = 90;
+            this.gradientOptions = '';
         }
         this.generateGradient();
     }
@@ -358,9 +362,17 @@ class NgxInputGradientComponent {
             item.color ??= generateRandomColor();
         }
         this.baseBg = buildGradientFromStops(this.rangeValues, 'linear', 90);
-        this.resultGradient = buildGradientFromStops(this.rangeValues, this.type, +this.rotation);
+        this.resultGradient = buildGradientFromStops(this.rangeValues, this.type, this.rotation, this.gradientOptions);
         this.emitChange();
     }
+    updateGradientType() {
+        this.gradientOptions = '';
+        this.generateGradient();
+    }
+    updateRotation() {
+        this.gradientOptions = '';
+        this.generateGradient();
+    }
     updateRangeSlider() {
         if (this.rangeSlider) {
             this.rangeSlider.writeValue(this.rangeValues);
@@ -382,7 +394,7 @@ class NgxInputGradientComponent {
         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", outputs: { change: "change" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxInputGradientComponent, isStandalone: true, selector: "ngx-input-gradient", inputs: { showSamples: { classPropertyName: "showSamples", publicName: "showSamples", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputGradientComponent),
@@ -393,7 +405,7 @@ class NgxInputGradientComponent {
                 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)\">\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\n  <div class=\"ngx-c-inner\">\n    <range-slider\n      [(ngModel)]=\"rangeValues\"\n      name=\"rangeCalues\"\n      [min]=\"0\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [addNewRangeOnClick]=\"true\"\n      [background]=\"baseBg\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (change)=\"generateGradient()\"\n      #rangeSlider></range-slider>\n\n    <div class=\"text-end\">\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\n    </div>\n    @if (rangeValues[selectedIndex]) {\n      <div class=\"ngx-row\">\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Color</div>\n          <div class=\"input-color\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\n              name=\"color\"\n              #inputColor\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\n            <span\n              #ngxGradColor\n              class=\"color\"\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\n              [ngxInputColor]=\"inputColor\"\n              [ngModel]=\"rangeValues[selectedIndex].color\"\n              [simpleMode]=\"true\"\n              (change)=\"generateGradient($event)\"></span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Position</div>\n          <input\n            type=\"number\"\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\n            min=\"0\"\n            max=\"100\"\n            name=\"posiition\"\n            (change)=\"generateGradient(); updateRangeSlider()\" />\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Rotation</div>\n          <div class=\"ngx-input-group\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rotation\"\n              ngxInputAngle\n              (change)=\"generateGradient()\"\n              name=\"rotation\"\n              [disabled]=\"type == 'radial'\" />\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Type</div>\n          <div class=\"ngx-input-group\">\n            <select [(ngModel)]=\"type\" (change)=\"generateGradient()\" name=\"type\">\n              <option value=\"linear\">linear</option>\n              <option value=\"radial\">radial</option>\n            </select>\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"default-list\">\n      @for (item of defaultGradients; track $index; let i = $index) {\n        <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-gradient-picker{width:270px;max-width:100%;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.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,.ngx-row .ngx-input-group .ngx-input-group-text{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg,.ngx-row .ngx-input-group .ngx-input-group-text 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:5px;flex-wrap:wrap;margin-top:16px}.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", "simpleMode", "outputType", "defaultInspector", "useAlphaChannel", "showPresets", "presetColors", "ngxInputColor"], outputs: ["defaultInspectorChange", "colorChange", "change"], exportAs: ["ngxInputColor"] }, { kind: "directive", type: NgxInputAngle, selector: "[ngxInputAngle]", inputs: ["size", "openOnCLick"], outputs: ["change"], exportAs: ["ngxInputAngle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "rangeSlider", first: true, predicate: ["rangeSlider"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ngx-input-gradient-picker\" (click)=\"stopPropagation($event)\">\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\n  <div class=\"ngx-c-inner\">\n    <range-slider\n      [(ngModel)]=\"rangeValues\"\n      name=\"rangeCalues\"\n      [min]=\"0\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [addNewRangeOnClick]=\"true\"\n      [background]=\"baseBg\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (change)=\"generateGradient()\"\n      #rangeSlider></range-slider>\n\n    <div class=\"text-end\">\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\n    </div>\n    @if (rangeValues[selectedIndex]) {\n      <div class=\"ngx-row\">\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Color</div>\n          <div class=\"input-color\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\n              name=\"color\"\n              #inputColor\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\n            <span\n              #ngxGradColor\n              class=\"color\"\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\n              [ngxInputColor]=\"inputColor\"\n              [ngModel]=\"rangeValues[selectedIndex].color\"\n              [simpleMode]=\"true\"\n              (change)=\"generateGradient($event)\"></span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Position</div>\n          <input\n            type=\"number\"\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\n            min=\"0\"\n            max=\"100\"\n            name=\"posiition\"\n            (change)=\"generateGradient(); updateRangeSlider()\" />\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Rotation</div>\n          <div class=\"ngx-input-group\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rotation\"\n              ngxInputAngle\n              (change)=\"updateRotation()\"\n              name=\"rotation\"\n              [disabled]=\"type.endsWith('radial')\" />\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Type</div>\n          <div class=\"ngx-input-group\">\n            <select [(ngModel)]=\"type\" (change)=\"updateGradientType()\" name=\"type\">\n              <option value=\"linear\">linear</option>\n              <option value=\"radial\">radial</option>\n              <option value=\"conic\">conic</option>\n              <option value=\"repeating-linear\">repeating linear</option>\n              <option value=\"repeating-radial\">repeating radial</option>\n              <option value=\"repeating-conic\">repeating conic</option>\n            </select>\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (showSamples()) {\n      <div class=\"default-list\">\n        @for (item of defaultGradients; track $index; let i = $index) {\n          <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-gradient-picker{width:270px;max-width:100%;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.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,.ngx-row .ngx-input-group .ngx-input-group-text{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg,.ngx-row .ngx-input-group .ngx-input-group-text 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}.ngx-row select:disabled,.ngx-row input:disabled{cursor:not-allowed;opacity:.7}.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:5px;flex-wrap:wrap;margin-top:16px}.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", "simpleMode", "outputType", "defaultInspector", "useAlphaChannel", "showPresets", "presetColors", "ngxInputColor"], outputs: ["defaultInspectorChange", "colorChange", "change"], exportAs: ["ngxInputColor"] }, { kind: "directive", type: NgxInputAngle, selector: "[ngxInputAngle]", inputs: ["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,
@@ -408,10 +420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             multi: true,
                             useExisting: NgxInputGradientComponent,
                         },
-                    ], imports: [CommonModule, FormsModule, RangeSliderComponent, NgxInputColor, NgxInputAngle], template: "<div class=\"ngx-input-gradient-picker\" (click)=\"stopPropagation($event)\">\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\n  <div class=\"ngx-c-inner\">\n    <range-slider\n      [(ngModel)]=\"rangeValues\"\n      name=\"rangeCalues\"\n      [min]=\"0\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [addNewRangeOnClick]=\"true\"\n      [background]=\"baseBg\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (change)=\"generateGradient()\"\n      #rangeSlider></range-slider>\n\n    <div class=\"text-end\">\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\n    </div>\n    @if (rangeValues[selectedIndex]) {\n      <div class=\"ngx-row\">\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Color</div>\n          <div class=\"input-color\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\n              name=\"color\"\n              #inputColor\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\n            <span\n              #ngxGradColor\n              class=\"color\"\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\n              [ngxInputColor]=\"inputColor\"\n              [ngModel]=\"rangeValues[selectedIndex].color\"\n              [simpleMode]=\"true\"\n              (change)=\"generateGradient($event)\"></span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Position</div>\n          <input\n            type=\"number\"\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\n            min=\"0\"\n            max=\"100\"\n            name=\"posiition\"\n            (change)=\"generateGradient(); updateRangeSlider()\" />\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Rotation</div>\n          <div class=\"ngx-input-group\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rotation\"\n              ngxInputAngle\n              (change)=\"generateGradient()\"\n              name=\"rotation\"\n              [disabled]=\"type == 'radial'\" />\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Type</div>\n          <div class=\"ngx-input-group\">\n            <select [(ngModel)]=\"type\" (change)=\"generateGradient()\" name=\"type\">\n              <option value=\"linear\">linear</option>\n              <option value=\"radial\">radial</option>\n            </select>\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"default-list\">\n      @for (item of defaultGradients; track $index; let i = $index) {\n        <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-gradient-picker{width:270px;max-width:100%;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.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,.ngx-row .ngx-input-group .ngx-input-group-text{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg,.ngx-row .ngx-input-group .ngx-input-group-text 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:5px;flex-wrap:wrap;margin-top:16px}.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: { change: [{
-                type: Output
-            }], rangeSlider: [{
+                    ], imports: [CommonModule, FormsModule, RangeSliderComponent, NgxInputColor, NgxInputAngle], template: "<div class=\"ngx-input-gradient-picker\" (click)=\"stopPropagation($event)\">\n  <div class=\"ngx-color-preview\" [ngStyle]=\"{ '--ngx-selected-gradient': resultGradient }\"></div>\n  <div class=\"ngx-c-inner\">\n    <range-slider\n      [(ngModel)]=\"rangeValues\"\n      name=\"rangeCalues\"\n      [min]=\"0\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [addNewRangeOnClick]=\"true\"\n      [background]=\"baseBg\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (change)=\"generateGradient()\"\n      #rangeSlider></range-slider>\n\n    <div class=\"text-end\">\n      <button class=\"remove-btn\" type=\"button\" (click)=\"remove()\">remove</button>\n    </div>\n    @if (rangeValues[selectedIndex]) {\n      <div class=\"ngx-row\">\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Color</div>\n          <div class=\"input-color\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rangeValues[selectedIndex].color\"\n              name=\"color\"\n              #inputColor\n              (ngModelChange)=\"generateGradient(); updateRangeSlider()\" />\n            <span\n              #ngxGradColor\n              class=\"color\"\n              [style.backgroundColor]=\"rangeValues[selectedIndex].color\"\n              [ngxInputColor]=\"inputColor\"\n              [ngModel]=\"rangeValues[selectedIndex].color\"\n              [simpleMode]=\"true\"\n              (change)=\"generateGradient($event)\"></span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Position</div>\n          <input\n            type=\"number\"\n            [(ngModel)]=\"rangeValues[selectedIndex].value\"\n            min=\"0\"\n            max=\"100\"\n            name=\"posiition\"\n            (change)=\"generateGradient(); updateRangeSlider()\" />\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Rotation</div>\n          <div class=\"ngx-input-group\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"rotation\"\n              ngxInputAngle\n              (change)=\"updateRotation()\"\n              name=\"rotation\"\n              [disabled]=\"type.endsWith('radial')\" />\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n        <div class=\"ngx-col-6\">\n          <div class=\"label\">Type</div>\n          <div class=\"ngx-input-group\">\n            <select [(ngModel)]=\"type\" (change)=\"updateGradientType()\" name=\"type\">\n              <option value=\"linear\">linear</option>\n              <option value=\"radial\">radial</option>\n              <option value=\"conic\">conic</option>\n              <option value=\"repeating-linear\">repeating linear</option>\n              <option value=\"repeating-radial\">repeating radial</option>\n              <option value=\"repeating-conic\">repeating conic</option>\n            </select>\n            <span class=\"ngx-input-prefix\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\">\n                <path\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\" />\n              </svg>\n            </span>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (showSamples()) {\n      <div class=\"default-list\">\n        @for (item of defaultGradients; track $index; let i = $index) {\n          <span [style.background]=\"item\" (click)=\"onSelectDefault(item, i)\"></span>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-gradient-picker{width:270px;max-width:100%;border-radius:15px;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.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,.ngx-row .ngx-input-group .ngx-input-group-text{width:14px;margin-left:-28px;margin-top:6px;pointer-events:none}.ngx-row .ngx-input-group .ngx-input-prefix svg,.ngx-row .ngx-input-group .ngx-input-group-text 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}.ngx-row select:disabled,.ngx-row input:disabled{cursor:not-allowed;opacity:.7}.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:5px;flex-wrap:wrap;margin-top:16px}.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: { showSamples: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSamples", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], rangeSlider: [{
                 type: ViewChild,
                 args: ['rangeSlider', { static: true }]
             }] } });