ngx-kit 6.0.0 → 6.0.2

package/drawer-menu/README.md

@@ -1,14 +1,14 @@
 # ngx-kit/drawer-menu
 
-درور منو (side drawer) با ۷ جلوه‌ی بازوبسته‌شدنِ متفاوت (از ساده تا سه‌بعدی/ژله‌ای)، ۳ رفتار برای محتوای صفحه (overlay/push/reveal)، و پیش‌فرضِ باز/بسته‌بودنِ واکنش‌گرا نسبت به اندازه‌ی صفحه.
+A side drawer menu with 7 different opening/closing effects (from simple to 3D/jelly), 3 behaviors for the page content (overlay/push/reveal), and a responsive default open/closed state based on screen size.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده‌ی پایه
+## Basic usage
 
 ```html
 <ngx-drawer-menu
@@ -18,59 +18,60 @@ npm install ngx-kit
   [width]="280"
   [openOnDesktop]="true"
   [openOnMobile]="false"
-  [(open)]="isOpen">
+  [(open)]="isOpen"
+>
   <div drawerContent>
-    <!-- محتوای منو -->
-    <a routerLink="/home">خانه</a>
-    <a routerLink="/settings">تنظیمات</a>
+    <!-- menu content -->
+    <a routerLink="/home">Home</a>
+    <a routerLink="/settings">Settings</a>
   </div>
 
-  <!-- محتوای اصلیِ صفحه (پیش‌فرض، بدون select) -->
+  <!-- main page content (default, no select) -->
   <router-outlet />
 </ngx-drawer-menu>
 ```
 
 ## API
 
-| ورودی                            | نوع                                                                              | پیش‌فرض          | توضیح                                                                                                                    |
-| -------------------------------- | -------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `side`                           | `'start' \| 'end'`                                                               | `'start'`        | منطقی — زیر RTL خودکار برعکس می‌شه                                                                                       |
-| `effect`                         | `'slide' \| 'curtain' \| 'jelly' \| 'pull' \| 'rotate3d' \| 'flip3d' \| 'scale'` | `'slide'`        | جلوه‌ی بازوبسته‌شدنِ خودِ پنل (پایین‌تر توضیح داده شده)                                                                  |
-| `contentBehavior`                | `'overlay' \| 'push' \| 'reveal'`                                                | `'overlay'`      | رفتارِ محتوای اصلیِ صفحه                                                                                                 |
-| `width`                          | `number`                                                                         | `280`            | عرضِ پنل به پیکسل                                                                                                        |
-| `swipeEnabled`                   | `boolean`                                                                        | `true`           | باز کردن با کشیدن از لبه‌ی صفحه                                                                                          |
-| `swipeEdgeSize`                  | `number`                                                                         | `24`             | پهنای ناحیه‌ی نامرئیِ لبه که کشیدن ازش باز می‌کنه                                                                        |
-| `backdropClose`                  | `boolean`                                                                        | `true`           | بستن با کلیک روی بک‌دراپ (یا تیره‌شدنِ محتوا در push/reveal)                                                             |
-| `curtainStrips`                  | `number`                                                                         | `7`              | فقط برای `effect="curtain"`                                                                                              |
-| `open`                           | `boolean` (model، دوطرفه)                                                        | `false`          | با `[(open)]` قابل‌کنترله                                                                                                |
-| `respondToViewport`              | `boolean`                                                                        | `true`           | رد شدن از `mobileBreakpoint` به‌صورت **زنده** (نه فقط بار اول) `open` رو با `openOnDesktop`/`openOnMobile` هماهنگ می‌کنه |
-| `openOnDesktop` / `openOnMobile` | `boolean`                                                                        | `true` / `false` |                                                                                                                          |
-| `mobileBreakpoint`               | `number`                                                                         | `768`            |                                                                                                                          |
-
-### جلوه‌ها (`effect`)
-
-| مقدار      | توضیح                                                                                                            |
-| ---------- | ---------------------------------------------------------------------------------------------------------------- |
-| `slide`    | اسلایدِ ساده‌ی کلاسیک                                                                                            |
-| `curtain`  | چند نوارِ عمودیِ هم‌رنگِ پنل که با تأخیرِ پلکانی جمع می‌شن و محتوا رو نمایان می‌کنن                              |
-| `jelly`    | نوسانِ فنریِ چندمرحله‌ای که فروکش می‌کنه (الهام از افکتِ [Jelly Slide Menu](https://dribbble.com/shots/2307371)) |
-| `pull`     | کشیدگیِ لاستیکیِ تک‌ضربه‌ای (rubber-band)                                                                        |
-| `rotate3d` | چرخشِ سه‌بعدیِ دورِ لولا، مثلِ بازشدنِ یه در                                                                     |
-| `flip3d`   | ورق‌خوردن با عمق روی محورِ Z، مثلِ جلدِ یه کتاب                                                                  |
-| `scale`    | بزرگ‌شدن از مرکز همراه با fade                                                                                   |
-
-### رفتارِ محتوا (`contentBehavior`)
-
-| مقدار     | توضیح                                                                  |
-| --------- | ---------------------------------------------------------------------- |
-| `overlay` | محتوا سرجاش می‌مونه، درور روش شناور می‌شه (با بک‌دراپ)                 |
-| `push`    | محتوا به‌اندازه‌ی عرضِ درور هل داده می‌شه (کنار می‌ره)                 |
-| `reveal`  | محتوا کمی کوچیک/عقب می‌ره، انگار درور از زیرش نمایان می‌شه (افکتِ iOS) |
-
-## نکته‌ی معماری: امبد کردن داخلِ یه ناحیه‌ی محدود
-
-پیش‌فرض، درور کل ارتفاعِ نزدیک‌ترین والدِ positioned رو می‌گیره (برای shell سراسریِ اپ همینو می‌خواید). اگه می‌خواید داخلِ یه کارت/ناحیه‌ی محدود (نه کل صفحه) امبدش کنید، کافیه اون container یه `position: relative` و ارتفاعِ مشخص داشته باشه — درور خودکار به همون باکس محدود می‌مونه (به لطفِ `perspective`ای که برای جلوه‌های سه‌بعدی استفاده می‌کنه و طبقِ اسپکِ CSS، containing-block برای فرزندهای `position:fixed` می‌سازه).
-
-## دارک‌مود و RTL
-
-خودکار پشتیبانی می‌شه؛ محاسباتِ درگ (که برخلافِ CSS logical properties، جهتِ فیزیکیِ واقعی لازم دارن) از `DirectionService` مشترک استفاده می‌کنن، پس با تغییرِ زنده‌ی `dir` هم درست کار می‌کنن.
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `side` | `'start' \| 'end'` | `'start'` | Logical — automatically flips under RTL |
+| `effect` | `'slide' \| 'curtain' \| 'jelly' \| 'pull' \| 'rotate3d' \| 'flip3d' \| 'scale'` | `'slide'` | The panel's own open/close effect (described below) |
+| `contentBehavior` | `'overlay' \| 'push' \| 'reveal'` | `'overlay'` | How the main page content behaves |
+| `width` | `number` | `280` | Panel width in pixels |
+| `swipeEnabled` | `boolean` | `true` | Open by swiping from the screen edge |
+| `swipeEdgeSize` | `number` | `24` | Width of the invisible edge zone that a swipe can start from |
+| `backdropClose` | `boolean` | `true` | Close on backdrop click (or dimming the content in push/reveal) |
+| `curtainStrips` | `number` | `7` | Only for `effect="curtain"` |
+| `open` | `boolean` (model, two-way) | `false` | Controllable via `[(open)]` |
+| `respondToViewport` | `boolean` | `true` | Crossing `mobileBreakpoint` **live** (not just on first load) syncs `open` with `openOnDesktop`/`openOnMobile` |
+| `openOnDesktop` / `openOnMobile` | `boolean` | `true` / `false` | |
+| `mobileBreakpoint` | `number` | `768` | |
+
+### Effects (`effect`)
+
+| Value | Description |
+| --- | --- |
+| `slide` | Classic simple slide |
+| `curtain` | Several same-colored vertical strips that collapse with a staggered delay, revealing the content |
+| `jelly` | A multi-stage spring oscillation that settles down (inspired by the [Jelly Slide Menu](https://dribbble.com/shots/2307371) effect) |
+| `pull` | A single rubber-band stretch |
+| `rotate3d` | A 3D rotation around a hinge, like a door opening |
+| `flip3d` | Flips with depth on the Z axis, like a book cover |
+| `scale` | Zooms in from the center with a fade |
+
+### Content behavior (`contentBehavior`)
+
+| Value | Description |
+| --- | --- |
+| `overlay` | Content stays in place, the drawer floats over it (with a backdrop) |
+| `push` | Content is pushed aside by the drawer's width |
+| `reveal` | Content shrinks/recedes slightly, as if the drawer is revealed behind it (the iOS effect) |
+
+## Architecture note: embedding inside a bounded area
+
+By default, the drawer takes up the full height of the nearest positioned ancestor (which is what you want for a full app shell). If you want to embed it inside a bounded card/area (not the whole page), just give that container `position: relative` and a defined height — the drawer will automatically confine itself to that box (thanks to the `perspective` it uses for 3D effects, which per the CSS spec creates a containing block for `position:fixed` descendants).
+
+## Dark mode and RTL
+
+Supported automatically; drag math (which, unlike CSS logical properties, needs the real physical direction) uses the shared `DirectionService`, so it works correctly even with a live `dir` change.

package/dropzone/README.md

@@ -1,14 +1,14 @@
 # ngx-kit/dropzone
 
-ناحیه‌ی درگ‌اند‌دراپ فایل: اعتبارسنجیِ نوع/حجم/تعداد، پیش‌نمایشِ تصاویر، پیمایشِ بازگشتیِ پوشه‌ها (وقتی کاربر یه پوشه رو درگ کنه)، و کاملاً قابل‌دسترسی با کیبورد.
+A file drag-and-drop area: type/size/count validation, image previews, recursive folder traversal (when a user drags a folder), and full keyboard accessibility.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده
+## Usage
 
 ```html
 <ngx-dropzone
@@ -17,43 +17,44 @@ npm install ngx-kit
   [maxFileSize]="5 * 1024 * 1024"
   [maxFiles]="10"
   (filesAdded)="onFilesAdded($event)"
-  (filesRejected)="onFilesRejected($event)">
-  فایل‌ها را اینجا رها کنید یا کلیک کنید
+  (filesRejected)="onFilesRejected($event)"
+>
+  Drop files here or click to browse
 </ngx-dropzone>
 ```
 
 ## API
 
-| ورودی          | نوع             | پیش‌فرض      | توضیح                                                                  |
-| -------------- | --------------- | ------------ | ---------------------------------------------------------------------- |
-| `accept`       | `string`        | `''`         | مثل `input[type=file]`: `"image/*"`, `".pdf,.docx"`, یا ترکیبی با کاما |
-| `multiple`     | `boolean`       | `true`       | اجازه‌ی انتخاب چند فایل                                                |
-| `maxFileSize`  | `number` (بایت) | بدون محدودیت | حداکثر حجمِ هر فایل                                                    |
-| `maxFiles`     | `number`        | بدون محدودیت | حداکثر تعدادِ فایل مجاز                                                |
-| `disabled`     | `boolean`       | `false`      |                                                                        |
-| `showFileList` | `boolean`       | `true`       | نمایشِ لیست/پیش‌نمایشِ فایل‌های انتخاب‌شده داخل خودِ کامپوننت          |
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `accept` | `string` | `''` | Like `input[type=file]`: `"image/*"`, `".pdf,.docx"`, or a comma-separated combination |
+| `multiple` | `boolean` | `true` | Allow selecting multiple files |
+| `maxFileSize` | `number` (bytes) | unlimited | Max size per file |
+| `maxFiles` | `number` | unlimited | Max number of allowed files |
+| `disabled` | `boolean` | `false` | |
+| `showFileList` | `boolean` | `true` | Show the list/preview of selected files inside the component itself |
 
-| خروجی           | نوع                                                     | توضیح                                         |
-| --------------- | ------------------------------------------------------- | --------------------------------------------- |
-| `filesAdded`    | `File[]`                                                | فایل‌های تازه‌پذیرفته‌شده                     |
-| `filesRejected` | `{ file: File; reason: 'type' \| 'size' \| 'count' }[]` | فایل‌های ردشده و دلیلش                        |
-| `filesChange`   | `File[]`                                                | کل لیستِ فعلی، بعد از هر تغییر (اضافه یا حذف) |
+| Output | Type | Description |
+| --- | --- | --- |
+| `filesAdded` | `File[]` | Newly accepted files |
+| `filesRejected` | `{ file: File; reason: 'type' \| 'size' \| 'count' }[]` | Rejected files and why |
+| `filesChange` | `File[]` | The full current list, after every change (add or remove) |
 
-### آیکونِ سفارشی
+### Custom icon
 
 ```html
 <ngx-dropzone>
   <svg dropzone-icon>...</svg>
-  متن دلخواه شما
+  Your own text
 </ngx-dropzone>
 ```
 
-## نکات فنی
+## Technical notes
 
-- شمارنده‌ی enter/leave برای جلوگیری از چشمک‌زدنِ حالتِ «درگ» موقعِ عبور از روی فرزندهای داخلِ ناحیه.
-- درگ‌کردن یه **پوشه** هم پشتیبانی می‌شه (`webkitGetAsEntry` + پیمایشِ بازگشتی) — مرورگرهایی که پشتیبانی نکنن، به گرفتنِ فایل‌های مستقیم fallback می‌کنن.
-- object URLهای پیش‌نمایش موقعِ حذفِ فایل یا destroy شدنِ کامپوننت، خودکار `revokeObjectURL` می‌شن (بدون نشتی حافظه).
+- An enter/leave counter prevents the "dragging" state from flickering as the pointer passes over children inside the drop area.
+- Dropping a **folder** is also supported (`webkitGetAsEntry` + recursive traversal) — browsers without support fall back to grabbing files directly.
+- Preview object URLs are automatically `revokeObjectURL`'d when a file is removed or the component is destroyed (no memory leak).
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+Supported automatically.

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

@@ -272,7 +272,7 @@ class NgxBoxShadowComponent {
                 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(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.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 });
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxBoxShadowComponent, decorators: [{
             type: Component,
@@ -289,7 +289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ], 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(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.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"] }]
+                    }, 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']

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-box-shadow.mjs","sources":["../../../projects/libs/box-shadow/utils/box-shadow.ts","../../../projects/libs/box-shadow/components/box-shadow.component.ts","../../../projects/libs/box-shadow/components/box-shadow.component.html","../../../projects/libs/box-shadow/directives/ngx-input-box-shadow.directive.ts","../../../projects/libs/box-shadow/ngx-kit-box-shadow.ts"],"sourcesContent":["import { BoxShadowValue } from '../contracts/BoxShadowValue';\nexport function parseBoxShadowToPx(shadow: string, contextPx = 16): BoxShadowValue | null {\n  if (!shadow || !shadow?.trim()) return null;\n  let inset = false;\n  shadow = shadow.trim();\n\n  if (shadow.startsWith('inset')) {\n    inset = true;\n    shadow = shadow.slice(5).trim();\n  }\n\n  const colorRegex =\n    /(#(?:[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;\n  const colorMatch = shadow.match(colorRegex);\n  let color = 'black';\n  if (colorMatch) {\n    color = colorMatch[0];\n    shadow = shadow.replace(color, '').trim();\n  }\n\n  const toPx = (value: number, unit: string): number => {\n    switch (unit.toLowerCase()) {\n      case 'px':\n      case '':\n        return value;\n      case 'em':\n      case 'rem':\n        return value * contextPx;\n      case '%':\n        return (value / 100) * contextPx;\n      case 'pt':\n        return value * 1.333;\n      default:\n        return value; // fallback\n    }\n  };\n\n  const matches = [...shadow.matchAll(/(-?\\d*\\.?\\d+)([a-zA-Z%]*)/g)];\n  const values = matches.map(([_, num, unit]) => toPx(parseFloat(num), unit));\n\n  const [offsetX, offsetY, blur, spread] = values;\n\n  return {\n    inset,\n    offsetX: offsetX ?? 0,\n    offsetY: offsetY ?? 0,\n    blurRadius: blur ?? 0,\n    spreadRadius: spread ?? 0,\n    color,\n  };\n}\n\nexport function stringifyBoxShadow(obj: BoxShadowValue): string {\n  const { inset, offsetX, offsetY, blurRadius, spreadRadius, color } = obj;\n\n  const parts = [\n    inset ? 'inset' : '',\n    `${offsetX}px`,\n    `${offsetY}px`,\n    `${blurRadius}px`,\n    `${spreadRadius}px`,\n    color,\n  ];\n\n  return parts.filter(Boolean).join(' ').trim();\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  forwardRef,\n  OnInit,\n  OnDestroy,\n  ChangeDetectorRef,\n  HostListener,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  Input,\n  Output,\n  EventEmitter,\n  inject,\n} from '@angular/core';\nimport {\n  NG_VALUE_ACCESSOR,\n  NG_VALIDATORS,\n  FormsModule,\n  ControlValueAccessor,\n  Validator,\n  AbstractControl,\n  ValidationErrors,\n} from '@angular/forms';\nimport { parseBoxShadowToPx, stringifyBoxShadow } from '../utils/box-shadow';\nimport { IPosition, getOffsetPosition, startDragSession } from 'ngx-kit/shared';\nimport { NgxInputColor } from 'ngx-kit/color-picker';\nimport { BrowserService } from 'ngx-kit/shared';\n\n@Component({\n  selector: 'ngx-box-shadow',\n  templateUrl: './box-shadow.component.html',\n  styleUrls: ['./box-shadow.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxBoxShadowComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      multi: true,\n      useExisting: NgxBoxShadowComponent,\n    },\n  ],\n  imports: [FormsModule, NgxInputColor],\n  host: {\n    '[class.dark]': 'theme==\"dark\"',\n  },\n})\nexport class NgxBoxShadowComponent\n  implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator\n{\n  theme: 'light' | 'dark' | 'auto' = 'light';\n  @Input('theme') set setTheme(val: 'light' | 'dark' | 'auto') {\n    if (!val || val == 'auto') {\n      this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';\n    } else {\n      this.theme = val;\n    }\n  }\n  /**\n   * The maximum range of the box shadow.\n   * @default 25\n   */\n  @Input() maxRange = 25;\n  @Output() change = new EventEmitter<string>();\n  isDisabled = false;\n  isDragging = false;\n  value: IPosition = { x: 0, y: 0 };\n  x = 0;\n  y = 0;\n  blur = 0;\n  spread = 0;\n  color = 'black';\n  line: { x1: number; y1: number; x2: number; y2: number } = { x1: 0, y1: 0, x2: 0, y2: 0 };\n  center: { x: number; y: number } = { x: 0, y: 0 };\n\n  padRect?: DOMRect;\n  thumbRect?: DOMRect;\n  protected _onChange = (value: string) => {};\n  protected _onTouched = () => {};\n  _onValidateChange = () => {};\n  private stopDrag?: () => void;\n\n  @ViewChild('pad', { static: true }) pad!: ElementRef<HTMLDivElement>;\n  @ViewChild('thumb', { static: true }) thumb!: ElementRef<HTMLDivElement>;\n\n  browserService = inject(BrowserService);\n\n  constructor(private cd: ChangeDetectorRef) {}\n\n  ngOnInit(): void {}\n  ngAfterViewInit(): void {\n    this.updateRects();\n  }\n  ngOnDestroy(): void {\n    this.stopDrag?.();\n  }\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    this.isDisabled = disabled;\n  }\n  registerOnValidatorChange(fn: () => void): void {\n    this._onValidateChange = fn;\n  }\n  validate(control: AbstractControl): ValidationErrors | null {\n    return null;\n  }\n\n  writeValue(value: any): void {\n    this.resetPosition();\n    if (value) {\n      const boxShadow = parseBoxShadowToPx(value);\n      // console.log(boxShadow);\n      if (boxShadow) {\n        this.value = { x: boxShadow.offsetX, y: boxShadow.offsetY };\n        this.blur = boxShadow.blurRadius;\n        this.spread = boxShadow.spreadRadius;\n        this.color = boxShadow.color;\n        this.convertValueToPosition(boxShadow.offsetX, boxShadow.offsetY);\n      }\n    }\n  }\n\n  dragStart(ev: MouseEvent | TouchEvent) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.isDragging = true;\n    this.updatePosition(ev);\n    this.updateRects();\n    this.stopDrag?.();\n    this.stopDrag = startDragSession({\n      onMove: (moveEv) => this.updatePosition(moveEv),\n      onEnd: () => {\n        this.isDragging = false;\n        this.stopDrag = undefined;\n        this.cd.markForCheck();\n      },\n    });\n  }\n  private updateRects() {\n    this.padRect = this.pad.nativeElement.getBoundingClientRect();\n    this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();\n  }\n  private resetPosition() {\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n    this.center = { x: this.padRect!.width / 2, y: this.padRect!.height / 2 };\n    this.x = this.center.x - this.thumbRect!.width / 2;\n    this.y = this.center.y - this.thumbRect!.height / 2;\n    this.line = { x1: this.center.x, y1: this.center.y, x2: this.center.x, y2: this.center.y };\n    this.cd.detectChanges();\n  }\n\n  @HostListener('window:resize')\n  onResize() {\n    this.writeValue(this.value);\n  }\n\n  private updatePosition(ev: MouseEvent | TouchEvent) {\n    if (!this.isDragging) return;\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n\n    const padRec = this.padRect!;\n    const thumbRec = this.thumbRect!;\n\n    const minX = thumbRec.width / 2;\n    const maxX = padRec.width - thumbRec.width / 2;\n    const minY = thumbRec.height / 2;\n    const maxY = padRec.height - thumbRec.height / 2;\n\n    const clampedX = Math.max(minX, Math.min(position.x, maxX));\n    const clampedY = Math.max(minY, Math.min(position.y, maxY));\n\n    // فقط یکبار از وسط اصلاح کن\n    this.x = clampedX - thumbRec.width / 2;\n    this.y = clampedY - thumbRec.height / 2;\n\n    this.line = {\n      x1: this.center.x,\n      y1: this.center.y,\n      x2: this.x + thumbRec.width / 2,\n      y2: this.y + thumbRec.height / 2,\n    };\n\n    this.setValueByPosition(thumbRec, padRec);\n    this.cd.markForCheck();\n  }\n\n  setValueByPosition(thumbRec: DOMRect, padRec: DOMRect) {\n    const padCenterX = (padRec.width - thumbRec.width) / 2;\n    const padCenterY = (padRec.height - thumbRec.height) / 2;\n\n    // فاصله thumb از مرکز\n    const dx = this.x - padCenterX;\n    const dy = this.y - padCenterY;\n\n    // مقیاس تبدیل به -50 تا +50 (یا هرچقدر بخوای)\n    const halfRangeX = (padRec.width - thumbRec.width) / 2;\n    const halfRangeY = (padRec.height - thumbRec.height) / 2;\n\n    let valueX = (dx / halfRangeX) * this.maxRange; // -50 تا +50\n    let valueY = (dy / halfRangeY) * this.maxRange;\n\n    // رُند کردن\n    valueX = Math.round(valueX);\n    valueY = Math.round(valueY);\n\n    // محدود کردن به -50 تا +50 یا هر مقدار دلخواه\n    valueX = Math.min(Math.max(valueX, -this.maxRange), this.maxRange);\n    valueY = Math.min(Math.max(valueY, -this.maxRange), this.maxRange);\n\n    const newValue = { x: valueX, y: valueY };\n\n    if (!this.value || this.value.x !== valueX || this.value.y !== valueY) {\n      this.value = newValue;\n      this.onChangeData();\n    }\n  }\n\n  public onChangeValue() {\n    this.convertValueToPosition(this.value.x, this.value.y);\n    this.onChangeData();\n  }\n  private convertValueToPosition(offsetX: number, offsetY: number) {\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n\n    // موقعیت پیشنهادی بر اساس offset\n    let proposedX = this.padRect!.width / 2 + offsetX - this.thumbRect!.width / 2;\n    let proposedY = this.padRect!.height / 2 + offsetY - this.thumbRect!.height / 2;\n\n    // محدود کردن (clamp) تا خارج از pad نره\n    const minX = 0;\n    const maxX = this.padRect!.width - this.thumbRect!.width;\n    const minY = 0;\n    const maxY = this.padRect!.height - this.thumbRect!.height;\n\n    this.x = Math.min(Math.max(proposedX, minX), maxX);\n    this.y = Math.min(Math.max(proposedY, minY), maxY);\n\n    // رسم خط راهنما از مرکز به thumb\n    this.line = {\n      x1: this.center.x,\n      y1: this.center.y,\n      x2: this.x + this.thumbRect!.width / 2,\n      y2: this.y + this.thumbRect!.height / 2,\n    };\n\n    this.cd.detectChanges();\n  }\n\n  onChangeData() {\n    const boxShadow = stringifyBoxShadow({\n      inset: false,\n      offsetX: this.value.x,\n      offsetY: this.value.y,\n      blurRadius: this.blur,\n      spreadRadius: this.spread,\n      color: this.color,\n    });\n    this._onChange(boxShadow);\n    this.change.emit(boxShadow);\n  }\n\n  stopPropagation(ev: Event) {\n    ev.stopPropagation();\n  }\n}\n","<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","import {\n  ComponentRef,\n  Directive,\n  ElementRef,\n  HostListener,\n  Inject,\n  Input,\n  OnDestroy,\n  Renderer2,\n  ViewContainerRef,\n  forwardRef,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { DOCUMENT } from '@angular/common';\nimport { NgxBoxShadowComponent } from '../components/box-shadow.component';\nimport { OverlayRef, OverlayService } from 'ngx-kit/shared';\n\n@Directive({\n  selector: '[ngxInputBoxShadow]',\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputBoxShadow), multi: true },\n    {\n      provide: NG_VALIDATORS,\n      multi: true,\n      useExisting: NgxInputBoxShadow,\n    },\n  ],\n})\nexport class NgxInputBoxShadow implements OnDestroy, ControlValueAccessor, Validator {\n  @Input() setInputBackground = true;\n\n  private pickerRef?: OverlayRef<NgxBoxShadowComponent>;\n\n  value = '';\n\n  protected _onChange = (value: string) => {};\n  protected _onTouched = () => {};\n  _onValidateChange = () => {};\n  constructor(\n    private el: ElementRef,\n    private viewContainerRef: ViewContainerRef,\n    private renderer: Renderer2,\n    private overlayService: OverlayService,\n  ) {}\n\n  @HostListener('click', ['$event']) onClick(ev: Event) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.toggleColorPicker();\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    if (disabled) {\n      this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);\n    } else {\n      this.renderer.removeAttribute(this.el.nativeElement, 'disabled');\n    }\n  }\n  registerOnValidatorChange(fn: () => void): void {\n    this._onValidateChange = fn;\n  }\n  validate(control: AbstractControl): ValidationErrors | null {\n    return null;\n  }\n\n  ngOnDestroy(): void {\n    this.destroyPicker();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n  }\n\n  toggleColorPicker() {\n    if (this.pickerRef) {\n      this.destroyPicker();\n      return;\n    }\n    this.pickerRef = this.overlayService.open({\n      anchor: this.el.nativeElement,\n      component: NgxBoxShadowComponent,\n      viewContainerRef: this.viewContainerRef,\n      alignment: 'start',\n      placement: 'auto',\n      configure: (instance, ref) => {\n        instance.writeValue(this.value);\n\n        instance.change.subscribe((c: string) => {\n          this._onChange(c);\n        });\n\n        // instance.closed.subscribe(() => ref.close());\n      },\n      onClosed: () => {\n        this.pickerRef = undefined;\n      },\n    });\n  }\n\n  destroyPicker() {\n    if (this.pickerRef) {\n      this.pickerRef.close();\n      this.pickerRef = undefined;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":";;;;;;;;SACgB,kBAAkB,CAAC,MAAc,EAAE,SAAS,GAAG,EAAE,EAAA;AAC/D,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE;AAAE,QAAA,OAAO,IAAI;IAC3C,IAAI,KAAK,GAAG,KAAK;AACjB,IAAA,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE;AAEtB,IAAA,IAAI,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC9B,KAAK,GAAG,IAAI;QACZ,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;IACjC;IAEA,MAAM,UAAU,GACd,6PAA6P;IAC/P,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC;IAC3C,IAAI,KAAK,GAAG,OAAO;IACnB,IAAI,UAAU,EAAE;AACd,QAAA,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;AACrB,QAAA,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;IAC3C;AAEA,IAAA,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,IAAY,KAAY;AACnD,QAAA,QAAQ,IAAI,CAAC,WAAW,EAAE;AACxB,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,EAAE;AACL,gBAAA,OAAO,KAAK;AACd,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,KAAK;gBACR,OAAO,KAAK,GAAG,SAAS;AAC1B,YAAA,KAAK,GAAG;AACN,gBAAA,OAAO,CAAC,KAAK,GAAG,GAAG,IAAI,SAAS;AAClC,YAAA,KAAK,IAAI;gBACP,OAAO,KAAK,GAAG,KAAK;AACtB,YAAA;gBACE,OAAO,KAAK,CAAC;;AAEnB,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IAE3E,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,MAAM;IAE/C,OAAO;QACL,KAAK;QACL,OAAO,EAAE,OAAO,IAAI,CAAC;QACrB,OAAO,EAAE,OAAO,IAAI,CAAC;QACrB,UAAU,EAAE,IAAI,IAAI,CAAC;QACrB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,KAAK;KACN;AACH;AAEM,SAAU,kBAAkB,CAAC,GAAmB,EAAA;AACpD,IAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,GAAG;AAExE,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,KAAK,GAAG,OAAO,GAAG,EAAE;AACpB,QAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI;AACd,QAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI;AACd,QAAA,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI;AACjB,QAAA,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI;QACnB,KAAK;KACN;AAED,IAAA,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;AAC/C;;MCba,qBAAqB,CAAA;AAwCZ,IAAA,EAAA;IArCpB,KAAK,GAA8B,OAAO;IAC1C,IAAoB,QAAQ,CAAC,GAA8B,EAAA;AACzD,QAAA,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO;QACrE;aAAO;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG;QAClB;IACF;AACA;;;AAGG;IACM,QAAQ,GAAG,EAAE;AACZ,IAAA,MAAM,GAAG,IAAI,YAAY,EAAU;IAC7C,UAAU,GAAG,KAAK;IAClB,UAAU,GAAG,KAAK;IAClB,KAAK,GAAc,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACjC,CAAC,GAAG,CAAC;IACL,CAAC,GAAG,CAAC;IACL,IAAI,GAAG,CAAC;IACR,MAAM,GAAG,CAAC;IACV,KAAK,GAAG,OAAO;AACf,IAAA,IAAI,GAAuD,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;IACzF,MAAM,GAA6B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAEjD,IAAA,OAAO;AACP,IAAA,SAAS;AACC,IAAA,SAAS,GAAG,CAAC,KAAa,KAAI,EAAE,CAAC;AACjC,IAAA,UAAU,GAAG,MAAK,EAAE,CAAC;AAC/B,IAAA,iBAAiB,GAAG,MAAK,EAAE,CAAC;AACpB,IAAA,QAAQ;AAEoB,IAAA,GAAG;AACD,IAAA,KAAK;AAE3C,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAEvC,IAAA,WAAA,CAAoB,EAAqB,EAAA;QAArB,IAAA,CAAA,EAAE,GAAF,EAAE;IAAsB;AAE5C,IAAA,QAAQ,KAAU;IAClB,eAAe,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;IACpB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,IAAI;IACnB;AACA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AACA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,QAAQ;IAC5B;AACA,IAAA,yBAAyB,CAAC,EAAc,EAAA;AACtC,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;IAC7B;AACA,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,KAAK,EAAE;AACT,YAAA,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC;;YAE3C,IAAI,SAAS,EAAE;AACb,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,OAAO,EAAE;AAC3D,gBAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU;AAChC,gBAAA,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,YAAY;AACpC,gBAAA,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK;gBAC5B,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC;YACnE;QACF;IACF;AAEA,IAAA,SAAS,CAAC,EAA2B,EAAA;QACnC,EAAE,CAAC,eAAe,EAAE;QACpB,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YAC/B,MAAM,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YAC/C,KAAK,EAAE,MAAK;AACV,gBAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,gBAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;AACzB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;YACxB,CAAC;AACF,SAAA,CAAC;IACJ;IACQ,WAAW,GAAA;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC7D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE;IACnE;IACQ,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;QACxD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACzE,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;AAClD,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;AACnD,QAAA,IAAI,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE;AAC1F,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;IACzB;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B;AAEQ,IAAA,cAAc,CAAC,EAA2B,EAAA;QAChD,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;AACxD,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAE9D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAQ;AAC5B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAU;AAEhC,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;QAC/B,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;AAEhD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAC3D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;;QAG3D,IAAI,CAAC,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;QAEvC,IAAI,CAAC,IAAI,GAAG;AACV,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;YAC/B,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;SACjC;AAED,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,MAAM,CAAC;AACzC,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;IACxB;IAEA,kBAAkB,CAAC,QAAiB,EAAE,MAAe,EAAA;AACnD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC;AACtD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC;;AAGxD,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,UAAU;AAC9B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,UAAU;;AAG9B,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC;AACtD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC;AAExD,QAAA,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;QAC/C,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ;;AAG9C,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC3B,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;QAG3B,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QAClE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QAElE,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;QAEzC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,MAAM,EAAE;AACrE,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;YACrB,IAAI,CAAC,YAAY,EAAE;QACrB;IACF;IAEO,aAAa,GAAA;AAClB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,EAAE;IACrB;IACQ,sBAAsB,CAAC,OAAe,EAAE,OAAe,EAAA;QAC7D,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;;AAGxD,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;AAC7E,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;;QAG/E,MAAM,IAAI,GAAG,CAAC;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK;QACxD,MAAM,IAAI,GAAG,CAAC;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM;AAE1D,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC;AAClD,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC;;QAGlD,IAAI,CAAC,IAAI,GAAG;AACV,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;YACtC,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;SACxC;AAED,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;IACzB;IAEA,YAAY,GAAA;QACV,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACrB,YAAA,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACrB,UAAU,EAAE,IAAI,CAAC,IAAI;YACrB,YAAY,EAAE,IAAI,CAAC,MAAM;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7B;AAEA,IAAA,eAAe,CAAC,EAAS,EAAA;QACvB,EAAE,CAAC,eAAe,EAAE;IACtB;uGA9NW,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAjBrB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,WAAW,EAAE,qBAAqB;AACnC,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,KAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9CH,6kGAkHA,EAAA,MAAA,EAAA,CAAA,quCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDnEY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,wSAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,8IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,2IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKzB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAtBjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,KAAK,EAAE,IAAI;AACX,4BAAA,WAAW,EAAA,qBAAuB;AACnC,yBAAA;AACF,qBAAA,EAAA,OAAA,EACQ,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,IAAA,EAC/B;AACJ,wBAAA,cAAc,EAAE,eAAe;AAChC,qBAAA,EAAA,QAAA,EAAA,6kGAAA,EAAA,MAAA,EAAA,CAAA,quCAAA,CAAA,EAAA;;sBAMA,KAAK;uBAAC,OAAO;;sBAWb;;sBACA;;sBAmBA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACjC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAyEnC,YAAY;uBAAC,eAAe;;;ME9HlB,iBAAiB,CAAA;AAWlB,IAAA,EAAA;AACA,IAAA,gBAAA;AACA,IAAA,QAAA;AACA,IAAA,cAAA;IAbD,kBAAkB,GAAG,IAAI;AAE1B,IAAA,SAAS;IAEjB,KAAK,GAAG,EAAE;AAEA,IAAA,SAAS,GAAG,CAAC,KAAa,KAAI,EAAE,CAAC;AACjC,IAAA,UAAU,GAAG,MAAK,EAAE,CAAC;AAC/B,IAAA,iBAAiB,GAAG,MAAK,EAAE,CAAC;AAC5B,IAAA,WAAA,CACU,EAAc,EACd,gBAAkC,EAClC,QAAmB,EACnB,cAA8B,EAAA;QAH9B,IAAA,CAAA,EAAE,GAAF,EAAE;QACF,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;QAChB,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,cAAc,GAAd,cAAc;IACrB;AAEgC,IAAA,OAAO,CAAC,EAAS,EAAA;QAClD,EAAE,CAAC,eAAe,EAAE;QACpB,EAAE,CAAC,cAAc,EAAE;QACnB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AACA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC;QACxE;aAAO;AACL,YAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC;QAClE;IACF;AACA,IAAA,yBAAyB,CAAC,EAAc,EAAA;AACtC,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;IAC7B;AACA,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,OAAO,IAAI;IACb;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;IACtB;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;IACpB;IAEA,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,aAAa,EAAE;YACpB;QACF;QACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACxC,YAAA,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa;AAC7B,YAAA,SAAS,EAAE,qBAAqB;YAChC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;AACvC,YAAA,SAAS,EAAE,OAAO;AAClB,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,SAAS,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAI;AAC3B,gBAAA,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;gBAE/B,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAS,KAAI;AACtC,oBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;AACnB,gBAAA,CAAC,CAAC;;YAGJ,CAAC;YACD,QAAQ,EAAE,MAAK;AACb,gBAAA,IAAI,CAAC,SAAS,GAAG,SAAS;YAC5B,CAAC;AACF,SAAA,CAAC;IACJ;IAEA,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,SAAS;QAC5B;IACF;uGAlFW,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EATjB;AACT,YAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC7F,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,WAAW,EAAE,iBAAiB;AAC/B,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAEU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,SAAS,EAAE;AACT,wBAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC7F,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,KAAK,EAAE,IAAI;AACX,4BAAA,WAAW,EAAA,iBAAmB;AAC/B,yBAAA;AACF,qBAAA;AACF,iBAAA;;sBAEE;;sBAgBA,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;ACpDnC;;AAEG;;;;"}
+{"version":3,"file":"ngx-kit-box-shadow.mjs","sources":["../../../projects/libs/box-shadow/utils/box-shadow.ts","../../../projects/libs/box-shadow/components/box-shadow.component.ts","../../../projects/libs/box-shadow/components/box-shadow.component.html","../../../projects/libs/box-shadow/directives/ngx-input-box-shadow.directive.ts","../../../projects/libs/box-shadow/ngx-kit-box-shadow.ts"],"sourcesContent":["import { BoxShadowValue } from '../contracts/BoxShadowValue';\nexport function parseBoxShadowToPx(shadow: string, contextPx = 16): BoxShadowValue | null {\n  if (!shadow || !shadow?.trim()) return null;\n  let inset = false;\n  shadow = shadow.trim();\n\n  if (shadow.startsWith('inset')) {\n    inset = true;\n    shadow = shadow.slice(5).trim();\n  }\n\n  const colorRegex =\n    /(#(?:[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;\n  const colorMatch = shadow.match(colorRegex);\n  let color = 'black';\n  if (colorMatch) {\n    color = colorMatch[0];\n    shadow = shadow.replace(color, '').trim();\n  }\n\n  const toPx = (value: number, unit: string): number => {\n    switch (unit.toLowerCase()) {\n      case 'px':\n      case '':\n        return value;\n      case 'em':\n      case 'rem':\n        return value * contextPx;\n      case '%':\n        return (value / 100) * contextPx;\n      case 'pt':\n        return value * 1.333;\n      default:\n        return value; // fallback\n    }\n  };\n\n  const matches = [...shadow.matchAll(/(-?\\d*\\.?\\d+)([a-zA-Z%]*)/g)];\n  const values = matches.map(([_, num, unit]) => toPx(parseFloat(num), unit));\n\n  const [offsetX, offsetY, blur, spread] = values;\n\n  return {\n    inset,\n    offsetX: offsetX ?? 0,\n    offsetY: offsetY ?? 0,\n    blurRadius: blur ?? 0,\n    spreadRadius: spread ?? 0,\n    color,\n  };\n}\n\nexport function stringifyBoxShadow(obj: BoxShadowValue): string {\n  const { inset, offsetX, offsetY, blurRadius, spreadRadius, color } = obj;\n\n  const parts = [\n    inset ? 'inset' : '',\n    `${offsetX}px`,\n    `${offsetY}px`,\n    `${blurRadius}px`,\n    `${spreadRadius}px`,\n    color,\n  ];\n\n  return parts.filter(Boolean).join(' ').trim();\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  forwardRef,\n  OnInit,\n  OnDestroy,\n  ChangeDetectorRef,\n  HostListener,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  Input,\n  Output,\n  EventEmitter,\n  inject,\n} from '@angular/core';\nimport {\n  NG_VALUE_ACCESSOR,\n  NG_VALIDATORS,\n  FormsModule,\n  ControlValueAccessor,\n  Validator,\n  AbstractControl,\n  ValidationErrors,\n} from '@angular/forms';\nimport { parseBoxShadowToPx, stringifyBoxShadow } from '../utils/box-shadow';\nimport { IPosition, getOffsetPosition, startDragSession } from 'ngx-kit/shared';\nimport { NgxInputColor } from 'ngx-kit/color-picker';\nimport { BrowserService } from 'ngx-kit/shared';\n\n@Component({\n  selector: 'ngx-box-shadow',\n  templateUrl: './box-shadow.component.html',\n  styleUrls: ['./box-shadow.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxBoxShadowComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      multi: true,\n      useExisting: NgxBoxShadowComponent,\n    },\n  ],\n  imports: [FormsModule, NgxInputColor],\n  host: {\n    '[class.dark]': 'theme==\"dark\"',\n  },\n})\nexport class NgxBoxShadowComponent\n  implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator\n{\n  theme: 'light' | 'dark' | 'auto' = 'light';\n  @Input('theme') set setTheme(val: 'light' | 'dark' | 'auto') {\n    if (!val || val == 'auto') {\n      this.theme = this.browserService.prefersDarkMode ? 'dark' : 'light';\n    } else {\n      this.theme = val;\n    }\n  }\n  /**\n   * The maximum range of the box shadow.\n   * @default 25\n   */\n  @Input() maxRange = 25;\n  @Output() change = new EventEmitter<string>();\n  isDisabled = false;\n  isDragging = false;\n  value: IPosition = { x: 0, y: 0 };\n  x = 0;\n  y = 0;\n  blur = 0;\n  spread = 0;\n  color = 'black';\n  line: { x1: number; y1: number; x2: number; y2: number } = { x1: 0, y1: 0, x2: 0, y2: 0 };\n  center: { x: number; y: number } = { x: 0, y: 0 };\n\n  padRect?: DOMRect;\n  thumbRect?: DOMRect;\n  protected _onChange = (value: string) => {};\n  protected _onTouched = () => {};\n  _onValidateChange = () => {};\n  private stopDrag?: () => void;\n\n  @ViewChild('pad', { static: true }) pad!: ElementRef<HTMLDivElement>;\n  @ViewChild('thumb', { static: true }) thumb!: ElementRef<HTMLDivElement>;\n\n  browserService = inject(BrowserService);\n\n  constructor(private cd: ChangeDetectorRef) {}\n\n  ngOnInit(): void {}\n  ngAfterViewInit(): void {\n    this.updateRects();\n  }\n  ngOnDestroy(): void {\n    this.stopDrag?.();\n  }\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    this.isDisabled = disabled;\n  }\n  registerOnValidatorChange(fn: () => void): void {\n    this._onValidateChange = fn;\n  }\n  validate(control: AbstractControl): ValidationErrors | null {\n    return null;\n  }\n\n  writeValue(value: any): void {\n    this.resetPosition();\n    if (value) {\n      const boxShadow = parseBoxShadowToPx(value);\n      // console.log(boxShadow);\n      if (boxShadow) {\n        this.value = { x: boxShadow.offsetX, y: boxShadow.offsetY };\n        this.blur = boxShadow.blurRadius;\n        this.spread = boxShadow.spreadRadius;\n        this.color = boxShadow.color;\n        this.convertValueToPosition(boxShadow.offsetX, boxShadow.offsetY);\n      }\n    }\n  }\n\n  dragStart(ev: MouseEvent | TouchEvent) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.isDragging = true;\n    this.updatePosition(ev);\n    this.updateRects();\n    this.stopDrag?.();\n    this.stopDrag = startDragSession({\n      onMove: (moveEv) => this.updatePosition(moveEv),\n      onEnd: () => {\n        this.isDragging = false;\n        this.stopDrag = undefined;\n        this.cd.markForCheck();\n      },\n    });\n  }\n  private updateRects() {\n    this.padRect = this.pad.nativeElement.getBoundingClientRect();\n    this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();\n  }\n  private resetPosition() {\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n    this.center = { x: this.padRect!.width / 2, y: this.padRect!.height / 2 };\n    this.x = this.center.x - this.thumbRect!.width / 2;\n    this.y = this.center.y - this.thumbRect!.height / 2;\n    this.line = { x1: this.center.x, y1: this.center.y, x2: this.center.x, y2: this.center.y };\n    this.cd.detectChanges();\n  }\n\n  @HostListener('window:resize')\n  onResize() {\n    this.writeValue(this.value);\n  }\n\n  private updatePosition(ev: MouseEvent | TouchEvent) {\n    if (!this.isDragging) return;\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n\n    const padRec = this.padRect!;\n    const thumbRec = this.thumbRect!;\n\n    const minX = thumbRec.width / 2;\n    const maxX = padRec.width - thumbRec.width / 2;\n    const minY = thumbRec.height / 2;\n    const maxY = padRec.height - thumbRec.height / 2;\n\n    const clampedX = Math.max(minX, Math.min(position.x, maxX));\n    const clampedY = Math.max(minY, Math.min(position.y, maxY));\n\n    // فقط یکبار از وسط اصلاح کن\n    this.x = clampedX - thumbRec.width / 2;\n    this.y = clampedY - thumbRec.height / 2;\n\n    this.line = {\n      x1: this.center.x,\n      y1: this.center.y,\n      x2: this.x + thumbRec.width / 2,\n      y2: this.y + thumbRec.height / 2,\n    };\n\n    this.setValueByPosition(thumbRec, padRec);\n    this.cd.markForCheck();\n  }\n\n  setValueByPosition(thumbRec: DOMRect, padRec: DOMRect) {\n    const padCenterX = (padRec.width - thumbRec.width) / 2;\n    const padCenterY = (padRec.height - thumbRec.height) / 2;\n\n    // فاصله thumb از مرکز\n    const dx = this.x - padCenterX;\n    const dy = this.y - padCenterY;\n\n    // مقیاس تبدیل به -50 تا +50 (یا هرچقدر بخوای)\n    const halfRangeX = (padRec.width - thumbRec.width) / 2;\n    const halfRangeY = (padRec.height - thumbRec.height) / 2;\n\n    let valueX = (dx / halfRangeX) * this.maxRange; // -50 تا +50\n    let valueY = (dy / halfRangeY) * this.maxRange;\n\n    // رُند کردن\n    valueX = Math.round(valueX);\n    valueY = Math.round(valueY);\n\n    // محدود کردن به -50 تا +50 یا هر مقدار دلخواه\n    valueX = Math.min(Math.max(valueX, -this.maxRange), this.maxRange);\n    valueY = Math.min(Math.max(valueY, -this.maxRange), this.maxRange);\n\n    const newValue = { x: valueX, y: valueY };\n\n    if (!this.value || this.value.x !== valueX || this.value.y !== valueY) {\n      this.value = newValue;\n      this.onChangeData();\n    }\n  }\n\n  public onChangeValue() {\n    this.convertValueToPosition(this.value.x, this.value.y);\n    this.onChangeData();\n  }\n  private convertValueToPosition(offsetX: number, offsetY: number) {\n    if (!this.padRect || !this.thumbRect) this.updateRects();\n\n    // موقعیت پیشنهادی بر اساس offset\n    let proposedX = this.padRect!.width / 2 + offsetX - this.thumbRect!.width / 2;\n    let proposedY = this.padRect!.height / 2 + offsetY - this.thumbRect!.height / 2;\n\n    // محدود کردن (clamp) تا خارج از pad نره\n    const minX = 0;\n    const maxX = this.padRect!.width - this.thumbRect!.width;\n    const minY = 0;\n    const maxY = this.padRect!.height - this.thumbRect!.height;\n\n    this.x = Math.min(Math.max(proposedX, minX), maxX);\n    this.y = Math.min(Math.max(proposedY, minY), maxY);\n\n    // رسم خط راهنما از مرکز به thumb\n    this.line = {\n      x1: this.center.x,\n      y1: this.center.y,\n      x2: this.x + this.thumbRect!.width / 2,\n      y2: this.y + this.thumbRect!.height / 2,\n    };\n\n    this.cd.detectChanges();\n  }\n\n  onChangeData() {\n    const boxShadow = stringifyBoxShadow({\n      inset: false,\n      offsetX: this.value.x,\n      offsetY: this.value.y,\n      blurRadius: this.blur,\n      spreadRadius: this.spread,\n      color: this.color,\n    });\n    this._onChange(boxShadow);\n    this.change.emit(boxShadow);\n  }\n\n  stopPropagation(ev: Event) {\n    ev.stopPropagation();\n  }\n}\n","<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","import {\n  ComponentRef,\n  Directive,\n  ElementRef,\n  HostListener,\n  Inject,\n  Input,\n  OnDestroy,\n  Renderer2,\n  ViewContainerRef,\n  forwardRef,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { DOCUMENT } from '@angular/common';\nimport { NgxBoxShadowComponent } from '../components/box-shadow.component';\nimport { OverlayRef, OverlayService } from 'ngx-kit/shared';\n\n@Directive({\n  selector: '[ngxInputBoxShadow]',\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxInputBoxShadow), multi: true },\n    {\n      provide: NG_VALIDATORS,\n      multi: true,\n      useExisting: NgxInputBoxShadow,\n    },\n  ],\n})\nexport class NgxInputBoxShadow implements OnDestroy, ControlValueAccessor, Validator {\n  @Input() setInputBackground = true;\n\n  private pickerRef?: OverlayRef<NgxBoxShadowComponent>;\n\n  value = '';\n\n  protected _onChange = (value: string) => {};\n  protected _onTouched = () => {};\n  _onValidateChange = () => {};\n  constructor(\n    private el: ElementRef,\n    private viewContainerRef: ViewContainerRef,\n    private renderer: Renderer2,\n    private overlayService: OverlayService,\n  ) {}\n\n  @HostListener('click', ['$event']) onClick(ev: Event) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.toggleColorPicker();\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    if (disabled) {\n      this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);\n    } else {\n      this.renderer.removeAttribute(this.el.nativeElement, 'disabled');\n    }\n  }\n  registerOnValidatorChange(fn: () => void): void {\n    this._onValidateChange = fn;\n  }\n  validate(control: AbstractControl): ValidationErrors | null {\n    return null;\n  }\n\n  ngOnDestroy(): void {\n    this.destroyPicker();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n  }\n\n  toggleColorPicker() {\n    if (this.pickerRef) {\n      this.destroyPicker();\n      return;\n    }\n    this.pickerRef = this.overlayService.open({\n      anchor: this.el.nativeElement,\n      component: NgxBoxShadowComponent,\n      viewContainerRef: this.viewContainerRef,\n      alignment: 'start',\n      placement: 'auto',\n      configure: (instance, ref) => {\n        instance.writeValue(this.value);\n\n        instance.change.subscribe((c: string) => {\n          this._onChange(c);\n        });\n\n        // instance.closed.subscribe(() => ref.close());\n      },\n      onClosed: () => {\n        this.pickerRef = undefined;\n      },\n    });\n  }\n\n  destroyPicker() {\n    if (this.pickerRef) {\n      this.pickerRef.close();\n      this.pickerRef = undefined;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":";;;;;;;;SACgB,kBAAkB,CAAC,MAAc,EAAE,SAAS,GAAG,EAAE,EAAA;AAC/D,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE;AAAE,QAAA,OAAO,IAAI;IAC3C,IAAI,KAAK,GAAG,KAAK;AACjB,IAAA,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE;AAEtB,IAAA,IAAI,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC9B,KAAK,GAAG,IAAI;QACZ,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;IACjC;IAEA,MAAM,UAAU,GACd,6PAA6P;IAC/P,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC;IAC3C,IAAI,KAAK,GAAG,OAAO;IACnB,IAAI,UAAU,EAAE;AACd,QAAA,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;AACrB,QAAA,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;IAC3C;AAEA,IAAA,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,IAAY,KAAY;AACnD,QAAA,QAAQ,IAAI,CAAC,WAAW,EAAE;AACxB,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,EAAE;AACL,gBAAA,OAAO,KAAK;AACd,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,KAAK;gBACR,OAAO,KAAK,GAAG,SAAS;AAC1B,YAAA,KAAK,GAAG;AACN,gBAAA,OAAO,CAAC,KAAK,GAAG,GAAG,IAAI,SAAS;AAClC,YAAA,KAAK,IAAI;gBACP,OAAO,KAAK,GAAG,KAAK;AACtB,YAAA;gBACE,OAAO,KAAK,CAAC;;AAEnB,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IAE3E,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,MAAM;IAE/C,OAAO;QACL,KAAK;QACL,OAAO,EAAE,OAAO,IAAI,CAAC;QACrB,OAAO,EAAE,OAAO,IAAI,CAAC;QACrB,UAAU,EAAE,IAAI,IAAI,CAAC;QACrB,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,KAAK;KACN;AACH;AAEM,SAAU,kBAAkB,CAAC,GAAmB,EAAA;AACpD,IAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,GAAG;AAExE,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,KAAK,GAAG,OAAO,GAAG,EAAE;AACpB,QAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI;AACd,QAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAI;AACd,QAAA,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI;AACjB,QAAA,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI;QACnB,KAAK;KACN;AAED,IAAA,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;AAC/C;;MCba,qBAAqB,CAAA;AAwCZ,IAAA,EAAA;IArCpB,KAAK,GAA8B,OAAO;IAC1C,IAAoB,QAAQ,CAAC,GAA8B,EAAA;AACzD,QAAA,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO;QACrE;aAAO;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG;QAClB;IACF;AACA;;;AAGG;IACM,QAAQ,GAAG,EAAE;AACZ,IAAA,MAAM,GAAG,IAAI,YAAY,EAAU;IAC7C,UAAU,GAAG,KAAK;IAClB,UAAU,GAAG,KAAK;IAClB,KAAK,GAAc,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACjC,CAAC,GAAG,CAAC;IACL,CAAC,GAAG,CAAC;IACL,IAAI,GAAG,CAAC;IACR,MAAM,GAAG,CAAC;IACV,KAAK,GAAG,OAAO;AACf,IAAA,IAAI,GAAuD,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;IACzF,MAAM,GAA6B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAEjD,IAAA,OAAO;AACP,IAAA,SAAS;AACC,IAAA,SAAS,GAAG,CAAC,KAAa,KAAI,EAAE,CAAC;AACjC,IAAA,UAAU,GAAG,MAAK,EAAE,CAAC;AAC/B,IAAA,iBAAiB,GAAG,MAAK,EAAE,CAAC;AACpB,IAAA,QAAQ;AAEoB,IAAA,GAAG;AACD,IAAA,KAAK;AAE3C,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAEvC,IAAA,WAAA,CAAoB,EAAqB,EAAA;QAArB,IAAA,CAAA,EAAE,GAAF,EAAE;IAAsB;AAE5C,IAAA,QAAQ,KAAU;IAClB,eAAe,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;IACpB;IACA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,IAAI;IACnB;AACA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AACA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,QAAQ;IAC5B;AACA,IAAA,yBAAyB,CAAC,EAAc,EAAA;AACtC,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;IAC7B;AACA,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,KAAK,EAAE;AACT,YAAA,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC;;YAE3C,IAAI,SAAS,EAAE;AACb,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,OAAO,EAAE;AAC3D,gBAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU;AAChC,gBAAA,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,YAAY;AACpC,gBAAA,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK;gBAC5B,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC;YACnE;QACF;IACF;AAEA,IAAA,SAAS,CAAC,EAA2B,EAAA;QACnC,EAAE,CAAC,eAAe,EAAE;QACpB,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YAC/B,MAAM,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YAC/C,KAAK,EAAE,MAAK;AACV,gBAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,gBAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;AACzB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;YACxB,CAAC;AACF,SAAA,CAAC;IACJ;IACQ,WAAW,GAAA;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC7D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE;IACnE;IACQ,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;QACxD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACzE,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;AAClD,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;AACnD,QAAA,IAAI,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE;AAC1F,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;IACzB;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B;AAEQ,IAAA,cAAc,CAAC,EAA2B,EAAA;QAChD,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;AACxD,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAE9D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAQ;AAC5B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAU;AAEhC,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;QAC/B,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;AAEhD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAC3D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;;QAG3D,IAAI,CAAC,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;QAEvC,IAAI,CAAC,IAAI,GAAG;AACV,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC;YAC/B,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;SACjC;AAED,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,MAAM,CAAC;AACzC,QAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE;IACxB;IAEA,kBAAkB,CAAC,QAAiB,EAAE,MAAe,EAAA;AACnD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC;AACtD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC;;AAGxD,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,UAAU;AAC9B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,UAAU;;AAG9B,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC;AACtD,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC;AAExD,QAAA,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;QAC/C,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ;;AAG9C,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC3B,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;QAG3B,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QAClE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QAElE,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;QAEzC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,MAAM,EAAE;AACrE,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;YACrB,IAAI,CAAC,YAAY,EAAE;QACrB;IACF;IAEO,aAAa,GAAA;AAClB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,EAAE;IACrB;IACQ,sBAAsB,CAAC,OAAe,EAAE,OAAe,EAAA;QAC7D,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,WAAW,EAAE;;AAGxD,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;AAC7E,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;;QAG/E,MAAM,IAAI,GAAG,CAAC;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK;QACxD,MAAM,IAAI,GAAG,CAAC;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM;AAE1D,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC;AAClD,QAAA,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC;;QAGlD,IAAI,CAAC,IAAI,GAAG;AACV,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACjB,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,KAAK,GAAG,CAAC;YACtC,EAAE,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,GAAG,CAAC;SACxC;AAED,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;IACzB;IAEA,YAAY,GAAA;QACV,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACrB,YAAA,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACrB,UAAU,EAAE,IAAI,CAAC,IAAI;YACrB,YAAY,EAAE,IAAI,CAAC,MAAM;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7B;AAEA,IAAA,eAAe,CAAC,EAAS,EAAA;QACvB,EAAE,CAAC,eAAe,EAAE;IACtB;uGA9NW,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAjBrB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,WAAW,EAAE,qBAAqB;AACnC,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,KAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9CH,6kGAkHA,EAAA,MAAA,EAAA,CAAA,8uCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDnEY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,wSAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,8IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,2IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKzB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAtBjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,KAAK,EAAE,IAAI;AACX,4BAAA,WAAW,EAAA,qBAAuB;AACnC,yBAAA;AACF,qBAAA,EAAA,OAAA,EACQ,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,IAAA,EAC/B;AACJ,wBAAA,cAAc,EAAE,eAAe;AAChC,qBAAA,EAAA,QAAA,EAAA,6kGAAA,EAAA,MAAA,EAAA,CAAA,8uCAAA,CAAA,EAAA;;sBAMA,KAAK;uBAAC,OAAO;;sBAWb;;sBACA;;sBAmBA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACjC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAyEnC,YAAY;uBAAC,eAAe;;;ME9HlB,iBAAiB,CAAA;AAWlB,IAAA,EAAA;AACA,IAAA,gBAAA;AACA,IAAA,QAAA;AACA,IAAA,cAAA;IAbD,kBAAkB,GAAG,IAAI;AAE1B,IAAA,SAAS;IAEjB,KAAK,GAAG,EAAE;AAEA,IAAA,SAAS,GAAG,CAAC,KAAa,KAAI,EAAE,CAAC;AACjC,IAAA,UAAU,GAAG,MAAK,EAAE,CAAC;AAC/B,IAAA,iBAAiB,GAAG,MAAK,EAAE,CAAC;AAC5B,IAAA,WAAA,CACU,EAAc,EACd,gBAAkC,EAClC,QAAmB,EACnB,cAA8B,EAAA;QAH9B,IAAA,CAAA,EAAE,GAAF,EAAE;QACF,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;QAChB,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,cAAc,GAAd,cAAc;IACrB;AAEgC,IAAA,OAAO,CAAC,EAAS,EAAA;QAClD,EAAE,CAAC,eAAe,EAAE;QACpB,EAAE,CAAC,cAAc,EAAE;QACnB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AACA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC;QACxE;aAAO;AACL,YAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC;QAClE;IACF;AACA,IAAA,yBAAyB,CAAC,EAAc,EAAA;AACtC,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;IAC7B;AACA,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,OAAO,IAAI;IACb;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;IACtB;AAEA,IAAA,UAAU,CAAC,KAAU,EAAA;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;IACpB;IAEA,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,aAAa,EAAE;YACpB;QACF;QACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACxC,YAAA,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa;AAC7B,YAAA,SAAS,EAAE,qBAAqB;YAChC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;AACvC,YAAA,SAAS,EAAE,OAAO;AAClB,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,SAAS,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAI;AAC3B,gBAAA,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;gBAE/B,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAS,KAAI;AACtC,oBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;AACnB,gBAAA,CAAC,CAAC;;YAGJ,CAAC;YACD,QAAQ,EAAE,MAAK;AACb,gBAAA,IAAI,CAAC,SAAS,GAAG,SAAS;YAC5B,CAAC;AACF,SAAA,CAAC;IACJ;IAEA,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,SAAS;QAC5B;IACF;uGAlFW,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EATjB;AACT,YAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC7F,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,WAAW,EAAE,iBAAiB;AAC/B,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAEU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,SAAS,EAAE;AACT,wBAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AAC7F,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,KAAK,EAAE,IAAI;AACX,4BAAA,WAAW,EAAA,iBAAmB;AAC/B,yBAAA;AACF,qBAAA;AACF,iBAAA;;sBAEE;;sBAgBA,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;ACpDnC;;AAEG;;;;"}

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

@@ -1222,7 +1222,7 @@ class NgxInputColorComponent {
                 multi: true,
                 useExisting: NgxInputColorComponent,
             },
-        ], ngImport: i0, template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.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-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: 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: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.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-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: 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: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
             type: Component,
@@ -1247,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         CmykComponent,
                         HslComponent,
                         RgbComponent,
-                    ], template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.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-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"] }]
+                    ], template: "<div\n  class=\"ngx-input-color-picker\"\n  (click)=\"stopPropagation($event)\"\n  [class.simple-mode]=\"simpleMode\">\n  @if (!simpleMode) {\n    <div\n      class=\"ngx-color-preview\"\n      [ngStyle]=\"{ '--ngx-selected-color': rgbaColor }\"\n      [class.is-dark-color]=\"isDarkColor\">\n      <div class=\"rgbacode\">{{ outputColor | uppercase }}</div>\n      @if (outputType !== 'HEX') {\n        <div class=\"hexacode\">{{ hexColor | uppercase }}</div>\n      }\n      <div class=\"colorname\">{{ name }}</div>\n      <div class=\"color\"></div>\n    </div>\n  }\n  <div class=\"ngx-c-inner\">\n    <div class=\"top-actions\">\n      <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n        @for (inspector of ColorInspector | enumToArray; track inspector) {\n          <option [value]=\"inspector\">\n            {{ ColorInspector[+inspector] }}\n          </option>\n        }\n      </select>\n      @if (isSupportedEyeDrop) {\n        <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <defs>\n              <style>\n                .fa-secondary {\n                  opacity: 0.4;\n                }\n              </style>\n            </defs>\n            <path\n              class=\"fa-primary\"\n              d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n            <path\n              class=\"fa-secondary\"\n              d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n          </svg>\n        </button>\n      }\n    </div>\n\n    @switch (+defaultInspector) {\n      @case (ColorInspector.Picker) {\n        <app-picker\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [simpleMode]=\"simpleMode\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-picker>\n      }\n      @case (ColorInspector.HSL) {\n        <app-hsl\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-hsl>\n      }\n      @case (ColorInspector.RGB) {\n        <app-rgb\n          [color]=\"color\"\n          (colorChange)=\"initColor($event)\"\n          [useAlphaChannel]=\"useAlphaChannel\"></app-rgb>\n      }\n      @case (ColorInspector.CMYK) {\n        <app-cmyk [color]=\"color\" (colorChange)=\"initColor($event)\"></app-cmyk>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;box-shadow:0 0 20px #7a7a7a21}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.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-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
                 type: Input,
                 args: ['theme']