ngx-kit 7.2.0 → 7.3.0

package/fesm2022/ngx-kit-box-shadow.mjs

@@ -1,423 +1,397 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { input, model, output, signal, HostListener, ViewChild, Component, inject, DOCUMENT, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i1$1 from 'ngx-kit/shared';
-import { BrowserService, startDragSession, getOffsetPosition } from 'ngx-kit/shared';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { extractCssColors, getOffsetPosition, WINDOW, OverlayService } from 'ngx-kit/core';
 import { NgxInputColor } from 'ngx-kit/color-picker';
 
-function parseBoxShadowToPx(shadow, contextPx = 16) {
-    if (!shadow || !shadow?.trim())
-        return null;
-    let inset = false;
-    shadow = shadow.trim();
-    if (shadow.startsWith('inset')) {
-        inset = true;
-        shadow = shadow.slice(5).trim();
-    }
-    const colorRegex = /(#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{4}|[a-f0-9]{8})\b|rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)|rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*\d*(?:\.\d+)?\)|hsl\(\s*\d+,\s*\d*(?:\.\d+)?%,\s*\d*(?:\.\d+)?%\)|hsla\(\d+,\s*[\d.]+%,\s*[\d.]+%,\s*\d*(?:\.\d+)?\))/gi;
-    const colorMatch = shadow.match(colorRegex);
-    let color = 'black';
-    if (colorMatch) {
-        color = colorMatch[0];
-        shadow = shadow.replace(color, '').trim();
-    }
-    const toPx = (value, unit) => {
-        switch (unit.toLowerCase()) {
-            case 'px':
-            case '':
-                return value;
-            case 'em':
-            case 'rem':
-                return value * contextPx;
-            case '%':
-                return (value / 100) * contextPx;
-            case 'pt':
-                return value * 1.333;
-            default:
-                return value; // fallback
+function parseBoxShadow(cssValue) {
+    if (!cssValue || typeof cssValue !== 'string') {
+        return [];
+    }
+    // Split multiple shadows by comma
+    const shadows = cssValue
+        .split(/,(?![^\(]*\))/)
+        .map((shadow) => shadow.trim())
+        .filter((shadow) => shadow);
+    const boxShadows = [];
+    const unitRegex = /(px|rem|em)/;
+    const numberRegex = /-?\d*\.?\d*(?:px|rem|em)?/g;
+    for (const shadow of shadows) {
+        const boxShadow = {
+            xOffset: 0,
+            yOffset: 0,
+            color: 'rgba(0, 0, 0, 0)', // Default color
+            unit: 'px', // Default unit
+            cssValue: '',
+        };
+        // Check for inset
+        boxShadow.inset = shadow.includes('inset');
+        // Extract color
+        const colorMatch = extractCssColors(shadow);
+        if (colorMatch) {
+            boxShadow.color = colorMatch[0];
+        }
+        // Remove inset and color to parse numbers
+        let numberString = shadow.replace('inset', '').replace(boxShadow.color, '').trim();
+        // Extract numbers
+        const numbers = (numberString.match(numberRegex) ?? [])
+            .map((shadow) => shadow.trim())
+            .filter((shadow) => shadow);
+        if (!numbers)
+            continue;
+        // Parse numbers
+        for (let i = 0; i < numbers.length; i++) {
+            const num = parseFloat(numbers[i]);
+            const unit = numbers[i].match(unitRegex)?.[0] || 'px';
+            boxShadow.unit = unit; // Update unit based on first detected unit
+            if (i === 0) {
+                boxShadow.xOffset = isNaN(num) ? 0 : num;
+            }
+            else if (i === 1) {
+                boxShadow.yOffset = isNaN(num) ? 0 : num;
+            }
+            else if (i === 2) {
+                boxShadow.blurRadius = isNaN(num) ? 0 : Math.max(0, num); // Blur can't be negative
+            }
+            else if (i === 3) {
+                boxShadow.spreadRadius = isNaN(num) ? 0 : num;
+            }
         }
-    };
-    const matches = [...shadow.matchAll(/(-?\d*\.?\d+)([a-zA-Z%]*)/g)];
-    const values = matches.map(([_, num, unit]) => toPx(parseFloat(num), unit));
-    const [offsetX, offsetY, blur, spread] = values;
-    return {
-        inset,
-        offsetX: offsetX ?? 0,
-        offsetY: offsetY ?? 0,
-        blurRadius: blur ?? 0,
-        spreadRadius: spread ?? 0,
-        color,
-    };
+        boxShadow.cssValue = shadow;
+        boxShadows.push(boxShadow);
+    }
+    return boxShadows;
 }
-function stringifyBoxShadow(obj) {
-    const { inset, offsetX, offsetY, blurRadius, spreadRadius, color } = obj;
-    const parts = [
-        inset ? 'inset' : '',
-        `${offsetX}px`,
-        `${offsetY}px`,
-        `${blurRadius}px`,
-        `${spreadRadius}px`,
-        color,
+// Utility to validate and format color
+function validateColor(color) {
+    const hexRegex = /^#[0-9a-fA-F]{3,8}$/;
+    const rgbRegex = /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+)?\)$/;
+    const hslRegex = /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/;
+    const namedColors = [
+        'black',
+        'white',
+        'red',
+        'blue',
+        'green',
+        'yellow',
+        'purple',
+        'orange',
+        // Add more named colors as needed
     ];
-    return parts.filter(Boolean).join(' ').trim();
+    color = color.trim();
+    if (hexRegex.test(color) || rgbRegex.test(color) || hslRegex.test(color)) {
+        return color;
+    }
+    if (namedColors.includes(color.toLowerCase())) {
+        return color.toLowerCase();
+    }
+    return 'rgba(0, 0, 0, 0)'; // Fallback to transparent
 }
-
-class NgxBoxShadowComponent {
-    cd;
-    theme = 'light';
-    set setTheme(val) {
-        if (!val || val == 'auto') {
-            this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';
+// Utility to format BoxShadow back to CSS string
+function formatBoxShadowToCSS(shadows) {
+    return shadows
+        .map((shadow) => {
+        const parts = [];
+        if (shadow.inset) {
+            parts.push('inset');
         }
-        else {
-            this.theme = val;
+        parts.push(`${shadow.xOffset}${shadow.unit}`, `${shadow.yOffset}${shadow.unit}`);
+        if (shadow.blurRadius !== undefined) {
+            parts.push(`${shadow.blurRadius}${shadow.unit}`);
         }
-    }
-    /**
-     * The maximum range of the box shadow.
-     * @default 25
-     */
-    maxRange = 25;
-    change = new EventEmitter();
-    isDisabled = false;
-    isDragging = false;
-    value = { x: 0, y: 0 };
-    x = 0;
-    y = 0;
-    blur = 0;
-    spread = 0;
-    color = 'black';
-    line = { x1: 0, y1: 0, x2: 0, y2: 0 };
-    center = { x: 0, y: 0 };
+        if (shadow.spreadRadius !== undefined) {
+            parts.push(`${shadow.spreadRadius}${shadow.unit}`);
+        }
+        parts.push(shadow.color);
+        return parts.join(' ');
+    })
+        .join(', ');
+}
+// Example usage:
+/*
+const css = "10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000";
+const parsed = parseBoxShadow(css);
+console.log(parsed);
+// Output: [
+//   { xOffset: 10, yOffset: 20, blurRadius: 5, spreadRadius: 0, color: "rgba(0, 0, 0, 0.5)", unit: "px" },
+//   { inset: true, xOffset: -10, yOffset: -20, blurRadius: 10, color: "#ff0000", unit: "px" }
+// ]
+const cssString = formatBoxShadowToCSS(parsed);
+console.log(cssString);
+// Output: "10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000"
+*/
+
+class NgxShadowControl {
+    maxRange = input(25, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRange" }] : /* istanbul ignore next */ []));
+    selectedShadow = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedShadow" }] : /* istanbul ignore next */ []));
+    _previousCssValue = '';
+    shadowChange = output();
     padRect;
-    thumbRect;
-    _onChange = (value) => { };
-    _onTouched = () => { };
-    _onValidateChange = () => { };
-    stopDrag;
+    flashlightRect;
+    center = { x: 0, y: 0 };
+    x = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+    y = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    isDragging = false;
     pad;
-    thumb;
-    browserService = inject(BrowserService);
-    constructor(cd) {
-        this.cd = cd;
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this.updateRects();
+    flashlight;
+    radius = 0;
+    ngOnInit() {
+        this.setXyFromShadow(this.selectedShadow());
+        this._previousCssValue = this.selectedShadow().cssValue;
     }
-    ngOnDestroy() {
-        this.stopDrag?.();
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(disabled) {
-        this.isDisabled = disabled;
-    }
-    registerOnValidatorChange(fn) {
-        this._onValidateChange = fn;
-    }
-    validate(control) {
-        return null;
-    }
-    writeValue(value) {
-        this.resetPosition();
-        if (value) {
-            const boxShadow = parseBoxShadowToPx(value);
-            // console.log(boxShadow);
-            if (boxShadow) {
-                this.value = { x: boxShadow.offsetX, y: boxShadow.offsetY };
-                this.blur = boxShadow.blurRadius;
-                this.spread = boxShadow.spreadRadius;
-                this.color = boxShadow.color;
-                this.convertValueToPosition(boxShadow.offsetX, boxShadow.offsetY);
-            }
-        }
+    onPadClick(ev) {
+        const position = getOffsetPosition(ev, this.pad.nativeElement);
+        this.isDragging = true;
+        this.updatePosition(position);
     }
     dragStart(ev) {
         ev.stopPropagation();
         ev.preventDefault();
+        this.updateContainerDimensions();
         this.isDragging = true;
-        this.updatePosition(ev);
-        this.updateRects();
-        this.stopDrag?.();
-        this.stopDrag = startDragSession({
-            onMove: (moveEv) => this.updatePosition(moveEv),
-            onEnd: () => {
-                this.isDragging = false;
-                this.stopDrag = undefined;
-                this.cd.markForCheck();
-            },
-        });
-    }
-    updateRects() {
-        this.padRect = this.pad.nativeElement.getBoundingClientRect();
-        this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
-    }
-    resetPosition() {
-        if (!this.padRect || !this.thumbRect)
-            this.updateRects();
-        this.center = { x: this.padRect.width / 2, y: this.padRect.height / 2 };
-        this.x = this.center.x - this.thumbRect.width / 2;
-        this.y = this.center.y - this.thumbRect.height / 2;
-        this.line = { x1: this.center.x, y1: this.center.y, x2: this.center.x, y2: this.center.y };
-        this.cd.detectChanges();
+        const position = getOffsetPosition(ev, this.pad.nativeElement);
+        this.updatePosition(position);
     }
-    onResize() {
-        this.writeValue(this.value);
+    onDragEnd(ev) {
+        this.isDragging = false;
     }
-    updatePosition(ev) {
+    onMouseMove(ev) {
         if (!this.isDragging)
             return;
-        if (!this.padRect || !this.thumbRect)
-            this.updateRects();
         const position = getOffsetPosition(ev, this.pad.nativeElement);
+        this.updatePosition(position);
+    }
+    updatePosition(position) {
         const padRec = this.padRect;
-        const thumbRec = this.thumbRect;
-        const minX = thumbRec.width / 2;
-        const maxX = padRec.width - thumbRec.width / 2;
-        const minY = thumbRec.height / 2;
-        const maxY = padRec.height - thumbRec.height / 2;
+        const flashlightRec = this.flashlightRect;
+        const centerX = this.center.x;
+        const centerY = this.center.y;
+        const dx = position.x - centerX;
+        const dy = position.y - centerY;
+        // زاویه
+        const angleRad = Math.atan2(dy, dx);
+        const minX = flashlightRec.width / 2;
+        const maxX = padRec.width - flashlightRec.width / 2;
+        const minY = flashlightRec.height / 2;
+        const maxY = padRec.height - flashlightRec.height / 2;
         const clampedX = Math.max(minX, Math.min(position.x, maxX));
         const clampedY = Math.max(minY, Math.min(position.y, maxY));
         // فقط یکبار از وسط اصلاح کن
-        this.x = clampedX - thumbRec.width / 2;
-        this.y = clampedY - thumbRec.height / 2;
-        this.line = {
-            x1: this.center.x,
-            y1: this.center.y,
-            x2: this.x + thumbRec.width / 2,
-            y2: this.y + thumbRec.height / 2,
-        };
-        this.setValueByPosition(thumbRec, padRec);
-        this.cd.markForCheck();
-    }
-    setValueByPosition(thumbRec, padRec) {
-        const padCenterX = (padRec.width - thumbRec.width) / 2;
-        const padCenterY = (padRec.height - thumbRec.height) / 2;
-        // فاصله thumb از مرکز
-        const dx = this.x - padCenterX;
-        const dy = this.y - padCenterY;
-        // مقیاس تبدیل به -50 تا +50 (یا هرچقدر بخوای)
-        const halfRangeX = (padRec.width - thumbRec.width) / 2;
-        const halfRangeY = (padRec.height - thumbRec.height) / 2;
-        let valueX = (dx / halfRangeX) * this.maxRange; // -50 تا +50
-        let valueY = (dy / halfRangeY) * this.maxRange;
-        // رُند کردن
-        valueX = Math.round(valueX);
-        valueY = Math.round(valueY);
-        // محدود کردن به -50 تا +50 یا هر مقدار دلخواه
-        valueX = Math.min(Math.max(valueX, -this.maxRange), this.maxRange);
-        valueY = Math.min(Math.max(valueY, -this.maxRange), this.maxRange);
-        const newValue = { x: valueX, y: valueY };
-        if (!this.value || this.value.x !== valueX || this.value.y !== valueY) {
-            this.value = newValue;
-            this.onChangeData();
+        this.x.set(clampedX - flashlightRec.width / 2);
+        this.y.set(clampedY - flashlightRec.height / 2);
+        // ✅ ولی مقدار واقعی shadow رو از موقعیت موس (dx, dy) بگیر
+        const halfRangeX = (padRec.width - flashlightRec.width) / 2;
+        const halfRangeY = (padRec.height - flashlightRec.height) / 2;
+        let valueX = (-dx / halfRangeX) * this.maxRange();
+        let valueY = (-dy / halfRangeY) * this.maxRange();
+        valueX = Math.round(Math.min(Math.max(valueX, -this.maxRange()), this.maxRange()));
+        valueY = Math.round(Math.min(Math.max(valueY, -this.maxRange()), this.maxRange()));
+        // چرخش چراغ قوه
+        const angleDeg = angleRad * (180 / Math.PI);
+        if (this.flashlight.nativeElement) {
+            this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;
         }
+        // آپدیت shadow
+        this.selectedShadow.set({
+            ...this.selectedShadow(),
+            xOffset: valueX,
+            yOffset: valueY,
+        });
+        this.updateShadow(this.selectedShadow());
+    }
+    updateContainerDimensions() {
+        setTimeout(() => {
+            if (!this.pad)
+                return;
+            this.padRect = this.pad.nativeElement.getBoundingClientRect();
+            this.flashlightRect = this.flashlight.nativeElement.getBoundingClientRect();
+            this.center = { x: this.padRect.width / 2, y: this.padRect.height / 2 };
+            this.radius =
+                Math.min(this.padRect.width, this.padRect.height) / 2 - this.flashlightRect.width / 2;
+            this.x.set(0); // Reset to center
+            this.y.set(0);
+        });
     }
-    onChangeValue() {
-        this.convertValueToPosition(this.value.x, this.value.y);
-        this.onChangeData();
-    }
-    convertValueToPosition(offsetX, offsetY) {
-        if (!this.padRect || !this.thumbRect)
-            this.updateRects();
-        // موقعیت پیشنهادی بر اساس offset
-        let proposedX = this.padRect.width / 2 + offsetX - this.thumbRect.width / 2;
-        let proposedY = this.padRect.height / 2 + offsetY - this.thumbRect.height / 2;
-        // محدود کردن (clamp) تا خارج از pad نره
-        const minX = 0;
-        const maxX = this.padRect.width - this.thumbRect.width;
-        const minY = 0;
-        const maxY = this.padRect.height - this.thumbRect.height;
-        this.x = Math.min(Math.max(proposedX, minX), maxX);
-        this.y = Math.min(Math.max(proposedY, minY), maxY);
-        // رسم خط راهنما از مرکز به thumb
-        this.line = {
-            x1: this.center.x,
-            y1: this.center.y,
-            x2: this.x + this.thumbRect.width / 2,
-            y2: this.y + this.thumbRect.height / 2,
-        };
-        this.cd.detectChanges();
+    updateShadow(updatedShadow) {
+        this.selectedShadow().cssValue = formatBoxShadowToCSS([this.selectedShadow()]);
+        this.setXyFromShadow(this.selectedShadow());
+        if (this._previousCssValue != this.selectedShadow().cssValue) {
+            this.shadowChange.emit(this.selectedShadow());
+        }
     }
-    onChangeData() {
-        const boxShadow = stringifyBoxShadow({
-            inset: false,
-            offsetX: this.value.x,
-            offsetY: this.value.y,
-            blurRadius: this.blur,
-            spreadRadius: this.spread,
-            color: this.color,
+    setXyFromShadow(item) {
+        this.updateContainerDimensions();
+        setTimeout(() => {
+            const padRec = this.padRect;
+            const flashlightRec = this.flashlightRect;
+            const centerX = this.center.x;
+            const centerY = this.center.y;
+            const halfRangeX = (padRec.width - flashlightRec.width) / 2;
+            const halfRangeY = (padRec.height - flashlightRec.height) / 2;
+            // معکوس فرمول برای به‌دست آوردن dx , dy
+            const dx = -(item.xOffset / this.maxRange()) * halfRangeX;
+            const dy = -(item.yOffset / this.maxRange()) * halfRangeY;
+            // موقعیت واقعی چراغ‌قوه
+            const posX = centerX + dx;
+            const posY = centerY + dy;
+            this.x.set(posX - flashlightRec.width / 2);
+            this.y.set(posY - flashlightRec.height / 2);
+            // زاویه چراغ‌قوه
+            const angleRad = Math.atan2(dy, dx);
+            const angleDeg = angleRad * (180 / Math.PI);
+            if (this.flashlight.nativeElement) {
+                this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;
+            }
         });
-        this._onChange(boxShadow);
-        this.change.emit(boxShadow);
-    }
-    stopPropagation(ev) {
-        ev.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxBoxShadowComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: NgxBoxShadowComponent, isStandalone: true, selector: "ngx-box-shadow", inputs: { setTheme: ["theme", "setTheme"], maxRange: "maxRange" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.dark": "theme==\"dark\"" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NgxBoxShadowComponent),
-                multi: true,
-            },
-            {
-                provide: NG_VALIDATORS,
-                multi: true,
-                useExisting: NgxBoxShadowComponent,
-            },
-        ], viewQueries: [{ propertyName: "pad", first: true, predicate: ["pad"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ngx-box-shadow-container\" (click)=\"stopPropagation($event)\">\n  <div class=\"pad-container\" #pad>\n    <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"blue\"\n        stroke-width=\"2\" />\n    </svg>\n    <div\n      class=\"thumb\"\n      #thumb\n      [style.left.px]=\"x\"\n      [style.top.px]=\"y\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\"></div>\n  </div>\n\n  <div class=\"ngx-settings\">\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Offset X</span>\n        <input\n          type=\"number\"\n          id=\"offsetX\"\n          [(ngModel)]=\"value.x\"\n          name=\"offsetX\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"offsetX\"\n        [(ngModel)]=\"value.x\"\n        name=\"rangeOffsetX\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\"\n        [min]=\"-maxRange\"\n        [max]=\"maxRange\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Offset Y</span>\n        <input\n          type=\"number\"\n          id=\"offsetY\"\n          [(ngModel)]=\"value.y\"\n          name=\"offsetY\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"offsetY\"\n        [(ngModel)]=\"value.y\"\n        name=\"rangeOffsetY\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\"\n        [min]=\"-maxRange\"\n        [max]=\"maxRange\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Blur</span>\n        <input\n          type=\"number\"\n          id=\"blur\"\n          [(ngModel)]=\"blur\"\n          name=\"blur\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"blur\"\n        [(ngModel)]=\"blur\"\n        name=\"rangeBlur\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Spread</span>\n        <input\n          type=\"number\"\n          id=\"spread\"\n          [(ngModel)]=\"spread\"\n          name=\"spread\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"spread\"\n        [(ngModel)]=\"spread\"\n        name=\"rangeSpread\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>color</span>\n        <input\n          type=\"text\"\n          readonly\n          id=\"color\"\n          [(ngModel)]=\"color\"\n          name=\"color\"\n          ngxInputColor\n          [simpleMode]=\"true\"\n          (ngModelChange)=\"onChangeData()\"\n          autocomplete=\"off\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ngx-box-shadow-container{width:180px;max-width:100%;border-radius:15px;background-color:#fff;overflow:hidden;direction:ltr;padding:12px;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-box-shadow-container *{box-sizing:border-box}.pad-container{position:relative;width:100px;height:100px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(145,145,145,.4117647059) solid}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.ngx-settings .ngx-row{display:flex;align-items:flex-end;justify-content:space-between}.ngx-settings input:not([type=range]){width:46px;border:none;border:1px solid rgba(145,145,145,.4117647059);padding:2px 4px;border-radius:5px;background-color:transparent;color:#000;font-size:14px;font-weight:500;text-align:center;direction:ltr}.ngx-settings input:not([type=range]):focus{outline:none;border:1px solid #09218d}.ngx-settings input[type=range]{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxInputColor, selector: "[ngxInputColor]", inputs: ["setInputBackgroundColor", "defaultInspector", "simpleMode", "outputType", "theme", "useAlphaChannel", "ngxInputColor"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    close() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxShadowControl, isStandalone: true, selector: "ngx-shadow-control", inputs: { maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null }, selectedShadow: { classPropertyName: "selectedShadow", publicName: "selectedShadow", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedShadow: "selectedShadowChange", shadowChange: "shadowChange" }, host: { listeners: { "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)", "mousemove": "onMouseMove($event)", "touchmove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "pad", first: true, predicate: ["pad"], descendants: true }, { propertyName: "flashlight", first: true, predicate: ["flashlight"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxInputColor, selector: "[ngxInputColor]", inputs: ["setInputBackgroundColor", "simpleMode", "outputType", "defaultInspector", "useAlphaChannel", "showPresets", "presetColors", "ngxInputColor"], outputs: ["defaultInspectorChange", "colorChange", "change"], exportAs: ["ngxInputColor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxBoxShadowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowControl, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-box-shadow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NgxBoxShadowComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            multi: true,
-                            useExisting: NgxBoxShadowComponent,
-                        },
-                    ], imports: [FormsModule, NgxInputColor], host: {
-                        '[class.dark]': 'theme=="dark"',
-                    }, template: "<div class=\"ngx-box-shadow-container\" (click)=\"stopPropagation($event)\">\n  <div class=\"pad-container\" #pad>\n    <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n      <line\n        [attr.x1]=\"line.x1\"\n        [attr.y1]=\"line.y1\"\n        [attr.x2]=\"line.x2\"\n        [attr.y2]=\"line.y2\"\n        stroke=\"blue\"\n        stroke-width=\"2\" />\n    </svg>\n    <div\n      class=\"thumb\"\n      #thumb\n      [style.left.px]=\"x\"\n      [style.top.px]=\"y\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\"></div>\n  </div>\n\n  <div class=\"ngx-settings\">\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Offset X</span>\n        <input\n          type=\"number\"\n          id=\"offsetX\"\n          [(ngModel)]=\"value.x\"\n          name=\"offsetX\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"offsetX\"\n        [(ngModel)]=\"value.x\"\n        name=\"rangeOffsetX\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\"\n        [min]=\"-maxRange\"\n        [max]=\"maxRange\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Offset Y</span>\n        <input\n          type=\"number\"\n          id=\"offsetY\"\n          [(ngModel)]=\"value.y\"\n          name=\"offsetY\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"offsetY\"\n        [(ngModel)]=\"value.y\"\n        name=\"rangeOffsetY\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\"\n        [min]=\"-maxRange\"\n        [max]=\"maxRange\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Blur</span>\n        <input\n          type=\"number\"\n          id=\"blur\"\n          [(ngModel)]=\"blur\"\n          name=\"blur\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"blur\"\n        [(ngModel)]=\"blur\"\n        name=\"rangeBlur\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>Spread</span>\n        <input\n          type=\"number\"\n          id=\"spread\"\n          [(ngModel)]=\"spread\"\n          name=\"spread\"\n          (ngModelChange)=\"onChangeValue()\" />\n      </div>\n      <input\n        type=\"range\"\n        id=\"spread\"\n        [(ngModel)]=\"spread\"\n        name=\"rangeSpread\"\n        (ngModelChange)=\"onChangeValue()\"\n        step=\"1\" />\n    </div>\n    <div class=\"ngx-setting-item\">\n      <div class=\"ngx-row\">\n        <span>color</span>\n        <input\n          type=\"text\"\n          readonly\n          id=\"color\"\n          [(ngModel)]=\"color\"\n          name=\"color\"\n          ngxInputColor\n          [simpleMode]=\"true\"\n          (ngModelChange)=\"onChangeData()\"\n          autocomplete=\"off\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".ngx-box-shadow-container{width:180px;max-width:100%;border-radius:15px;background-color:#fff;overflow:hidden;direction:ltr;padding:12px;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-box-shadow-container *{box-sizing:border-box}.pad-container{position:relative;width:100px;height:100px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(145,145,145,.4117647059) solid}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.ngx-settings .ngx-row{display:flex;align-items:flex-end;justify-content:space-between}.ngx-settings input:not([type=range]){width:46px;border:none;border:1px solid rgba(145,145,145,.4117647059);padding:2px 4px;border-radius:5px;background-color:transparent;color:#000;font-size:14px;font-weight:500;text-align:center;direction:ltr}.ngx-settings input:not([type=range]):focus{outline:none;border:1px solid #09218d}.ngx-settings input[type=range]{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
-                type: Input,
-                args: ['theme']
-            }], maxRange: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], pad: [{
+            args: [{ selector: 'ngx-shadow-control', imports: [FormsModule, NgxInputColor], template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"] }]
+        }], propDecorators: { maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], selectedShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedShadow", required: true }] }, { type: i0.Output, args: ["selectedShadowChange"] }], shadowChange: [{ type: i0.Output, args: ["shadowChange"] }], pad: [{
                 type: ViewChild,
-                args: ['pad', { static: true }]
-            }], thumb: [{
+                args: ['pad', { static: false }]
+            }], flashlight: [{
                 type: ViewChild,
-                args: ['thumb', { static: true }]
-            }], onResize: [{
+                args: ['flashlight', { static: false }]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }, {
                 type: HostListener,
-                args: ['window:resize']
+                args: ['touchmove', ['$event']]
             }] } });
 
-class NgxInputBoxShadow {
-    el;
-    viewContainerRef;
-    renderer;
-    overlayService;
-    setInputBackground = true;
-    pickerRef;
-    value = '';
-    _onChange = (value) => { };
-    _onTouched = () => { };
-    _onValidateChange = () => { };
-    constructor(el, viewContainerRef, renderer, overlayService) {
-        this.el = el;
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
-        this.overlayService = overlayService;
-    }
-    onClick(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.toggleColorPicker();
-    }
+class NgxShadowBox {
+    maxRange = input(25, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRange" }] : /* istanbul ignore next */ []));
+    shadowChange = output();
+    selectedIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    shadows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shadows" }] : /* istanbul ignore next */ []));
+    result = '';
+    doc = inject(DOCUMENT);
+    win = inject(WINDOW);
+    overlay = inject(OverlayService);
+    chdr = inject(ChangeDetectorRef);
+    isDisabled = false;
+    onChange = (_) => { };
+    onTouched = () => { };
     registerOnChange(fn) {
-        this._onChange = 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();
+        this.onTouched = fn;
     }
-    writeValue(value) {
-        this.value = value;
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
     }
-    toggleColorPicker() {
-        if (this.pickerRef) {
-            this.destroyPicker();
+    constructor() { }
+    ngOnInit() { }
+    ngAfterViewInit() { }
+    writeValue(val) {
+        if (!val) {
+            this.shadows.set([]);
+            this.result = '';
             return;
         }
-        this.pickerRef = this.overlayService.open({
-            anchor: this.el.nativeElement,
-            component: NgxBoxShadowComponent,
-            viewContainerRef: this.viewContainerRef,
-            alignment: 'start',
-            placement: 'auto',
+        this.shadows.set(parseBoxShadow(val));
+        this.result = formatBoxShadowToCSS(this.shadows());
+        // if (val !== this.result) {
+        //   this.update();
+        // }
+    }
+    addShadow(container) {
+        this.shadows.update((u) => [
+            ...u,
+            {
+                xOffset: 0,
+                yOffset: 0,
+                blurRadius: 10,
+                spreadRadius: 0,
+                color: 'rgba(0, 0, 0, 0.5)',
+                unit: 'px',
+                inset: false,
+            },
+        ]);
+        this.update();
+        setTimeout(() => {
+            container.scrollTop = container.scrollHeight;
+        }, 100);
+    }
+    setShadow(el, item, index) {
+        this.selectedIndex.set(index);
+        this.overlay.open({
+            component: NgxShadowControl,
+            anchor: el,
             configure: (instance, ref) => {
-                instance.writeValue(this.value);
-                instance.change.subscribe((c) => {
-                    this._onChange(c);
+                ref.componentRef?.setInput('maxRange', this.maxRange());
+                ref.componentRef?.setInput('selectedShadow', item);
+                instance.shadowChange.subscribe((v) => {
+                    item = v;
+                    this.shadows.update((shadows) => {
+                        shadows[this.selectedIndex()] = item;
+                        return shadows;
+                    });
+                    this.chdr.markForCheck();
+                    this.update();
                 });
-                // instance.closed.subscribe(() => ref.close());
             },
             onClosed: () => {
-                this.pickerRef = undefined;
+                this.selectedIndex.set(-1);
             },
         });
     }
-    destroyPicker() {
-        if (this.pickerRef) {
-            this.pickerRef.close();
-            this.pickerRef = undefined;
-        }
+    removeShadow(ev, index) {
+        ev.stopPropagation();
+        this.shadows().splice(index, 1);
+        this.update();
+    }
+    update() {
+        this.result = formatBoxShadowToCSS(this.shadows());
+        this.shadows().forEach((m) => (m.cssValue = formatBoxShadowToCSS([m])));
+        this.onChange(this.result);
+        this.shadowChange.emit(this.result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputBoxShadow, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1$1.OverlayService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInputBoxShadow, isStandalone: true, selector: "[ngxInputBoxShadow]", inputs: { setInputBackground: "setInputBackground" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputBoxShadow), multi: true },
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxShadowBox, isStandalone: true, selector: "ngx-box-shadow", inputs: { maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shadowChange: "shadowChange" }, providers: [
             {
-                provide: NG_VALIDATORS,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxShadowBox),
                 multi: true,
-                useExisting: NgxInputBoxShadow,
             },
-        ], ngImport: i0 });
+        ], ngImport: i0, template: "<div class=\"\">\n  <button (click)=\"addShadow(list)\" type=\"button\" class=\"action-btn add-btn\">Add</button>\n</div>\n<div class=\"list-box\" #list>\n  @for (item of shadows(); let i = $index; track i) {\n    <button\n      type=\"button\"\n      class=\"list-item\"\n      [class.active]=\"i == selectedIndex()\"\n      #el\n      (click)=\"setShadow(el, item, i)\">\n      <span>{{ item.cssValue }}</span>\n      <button (click)=\"removeShadow($event, i)\" type=\"button\" class=\"action-btn\">\n        <svg fill=\"currentColor\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </button>\n  }\n</div>\n", styles: [".list-box{max-width:320px;max-height:250px;overflow:auto;border-top:1px rgba(117,117,117,.1411764706) solid;display:flex;flex-direction:column;margin:15px 0}.list-box .list-item{all:unset;outline:none;display:flex;justify-content:space-between;align-items:center;padding:0 10px;line-height:1;font-size:10px;height:28px;overflow:hidden;border-bottom:1px rgba(74,91,115,.2588235294) solid;border-radius:5px}.list-box .list-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list-box .list-item.active{border:1px #005eff solid;background-color:#005eff}.action-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:inherit;padding:4px;border-radius:6px;height:24px;background:light-dark(#efeff1,#2b2b33)}.action-btn svg{width:24px;height:100%}.action-btn:hover{background:light-dark(#e2e2e6,#34343d)}.add-btn{font-size:inherit;padding:5px 20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputBoxShadow, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxInputBoxShadow]',
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputBoxShadow), multi: true },
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-box-shadow', standalone: true, imports: [CommonModule, FormsModule], providers: [
                         {
-                            provide: NG_VALIDATORS,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxShadowBox),
                             multi: true,
-                            useExisting: NgxInputBoxShadow,
                         },
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1$1.OverlayService }], propDecorators: { setInputBackground: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\">\n  <button (click)=\"addShadow(list)\" type=\"button\" class=\"action-btn add-btn\">Add</button>\n</div>\n<div class=\"list-box\" #list>\n  @for (item of shadows(); let i = $index; track i) {\n    <button\n      type=\"button\"\n      class=\"list-item\"\n      [class.active]=\"i == selectedIndex()\"\n      #el\n      (click)=\"setShadow(el, item, i)\">\n      <span>{{ item.cssValue }}</span>\n      <button (click)=\"removeShadow($event, i)\" type=\"button\" class=\"action-btn\">\n        <svg fill=\"currentColor\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </button>\n  }\n</div>\n", styles: [".list-box{max-width:320px;max-height:250px;overflow:auto;border-top:1px rgba(117,117,117,.1411764706) solid;display:flex;flex-direction:column;margin:15px 0}.list-box .list-item{all:unset;outline:none;display:flex;justify-content:space-between;align-items:center;padding:0 10px;line-height:1;font-size:10px;height:28px;overflow:hidden;border-bottom:1px rgba(74,91,115,.2588235294) solid;border-radius:5px}.list-box .list-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list-box .list-item.active{border:1px #005eff solid;background-color:#005eff}.action-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:inherit;padding:4px;border-radius:6px;height:24px;background:light-dark(#efeff1,#2b2b33)}.action-btn svg{width:24px;height:100%}.action-btn:hover{background:light-dark(#e2e2e6,#34343d)}.add-btn{font-size:inherit;padding:5px 20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], shadowChange: [{ type: i0.Output, args: ["shadowChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxBoxShadowComponent, NgxInputBoxShadow };
+export { NgxShadowBox };
 //# sourceMappingURL=ngx-kit-box-shadow.mjs.map