ngx-kit 4.0.0 → 6.0.0

package/drawer-menu/README.md

@@ -0,0 +1,76 @@
+# ngx-kit/drawer-menu
+
+درور منو (side drawer) با ۷ جلوه‌ی بازوبسته‌شدنِ متفاوت (از ساده تا سه‌بعدی/ژله‌ای)، ۳ رفتار برای محتوای صفحه (overlay/push/reveal)، و پیش‌فرضِ باز/بسته‌بودنِ واکنش‌گرا نسبت به اندازه‌ی صفحه.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## استفاده‌ی پایه
+
+```html
+<ngx-drawer-menu
+  side="start"
+  effect="jelly"
+  contentBehavior="push"
+  [width]="280"
+  [openOnDesktop]="true"
+  [openOnMobile]="false"
+  [(open)]="isOpen">
+  <div drawerContent>
+    <!-- محتوای منو -->
+    <a routerLink="/home">خانه</a>
+    <a routerLink="/settings">تنظیمات</a>
+  </div>
+
+  <!-- محتوای اصلیِ صفحه (پیش‌فرض، بدون 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` هم درست کار می‌کنن.

package/dropzone/README.md

@@ -0,0 +1,59 @@
+# ngx-kit/dropzone
+
+ناحیه‌ی درگ‌اند‌دراپ فایل: اعتبارسنجیِ نوع/حجم/تعداد، پیش‌نمایشِ تصاویر، پیمایشِ بازگشتیِ پوشه‌ها (وقتی کاربر یه پوشه رو درگ کنه)، و کاملاً قابل‌دسترسی با کیبورد.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## استفاده
+
+```html
+<ngx-dropzone
+  [accept]="'image/*,.pdf'"
+  [multiple]="true"
+  [maxFileSize]="5 * 1024 * 1024"
+  [maxFiles]="10"
+  (filesAdded)="onFilesAdded($event)"
+  (filesRejected)="onFilesRejected($event)">
+  فایل‌ها را اینجا رها کنید یا کلیک کنید
+</ngx-dropzone>
+```
+
+## API
+
+| ورودی          | نوع             | پیش‌فرض      | توضیح                                                                  |
+| -------------- | --------------- | ------------ | ---------------------------------------------------------------------- |
+| `accept`       | `string`        | `''`         | مثل `input[type=file]`: `"image/*"`, `".pdf,.docx"`, یا ترکیبی با کاما |
+| `multiple`     | `boolean`       | `true`       | اجازه‌ی انتخاب چند فایل                                                |
+| `maxFileSize`  | `number` (بایت) | بدون محدودیت | حداکثر حجمِ هر فایل                                                    |
+| `maxFiles`     | `number`        | بدون محدودیت | حداکثر تعدادِ فایل مجاز                                                |
+| `disabled`     | `boolean`       | `false`      |                                                                        |
+| `showFileList` | `boolean`       | `true`       | نمایشِ لیست/پیش‌نمایشِ فایل‌های انتخاب‌شده داخل خودِ کامپوننت          |
+
+| خروجی           | نوع                                                     | توضیح                                         |
+| --------------- | ------------------------------------------------------- | --------------------------------------------- |
+| `filesAdded`    | `File[]`                                                | فایل‌های تازه‌پذیرفته‌شده                     |
+| `filesRejected` | `{ file: File; reason: 'type' \| 'size' \| 'count' }[]` | فایل‌های ردشده و دلیلش                        |
+| `filesChange`   | `File[]`                                                | کل لیستِ فعلی، بعد از هر تغییر (اضافه یا حذف) |
+
+### آیکونِ سفارشی
+
+```html
+<ngx-dropzone>
+  <svg dropzone-icon>...</svg>
+  متن دلخواه شما
+</ngx-dropzone>
+```
+
+## نکات فنی
+
+- شمارنده‌ی enter/leave برای جلوگیری از چشمک‌زدنِ حالتِ «درگ» موقعِ عبور از روی فرزندهای داخلِ ناحیه.
+- درگ‌کردن یه **پوشه** هم پشتیبانی می‌شه (`webkitGetAsEntry` + پیمایشِ بازگشتی) — مرورگرهایی که پشتیبانی نکنن، به گرفتنِ فایل‌های مستقیم fallback می‌کنن.
+- object URLهای پیش‌نمایش موقعِ حذفِ فایل یا destroy شدنِ کامپوننت، خودکار `revokeObjectURL` می‌شن (بدون نشتی حافظه).
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه.

package/fesm2022/ngx-kit-angle-selector.mjs

@@ -134,7 +134,7 @@ class NgxAngleSelectorComponent {
                 useExisting: forwardRef(() => NgxAngleSelectorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-input-angle-selector\">\r\n  <div #selectorContainer class=\"angle-selector\">\r\n    <div class=\"center-dot\"></div>\r\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\r\n\r\n    @for (angle of tickes; track $index) {\r\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{--ngx-color-bg: #e5e5e5;--ngx-color-text: #000;--border-color: #c8c8c8;--ngx-size: 100px;--handle-color: #007ac6;--tick-color: #444444;--inner-shadow-color: #000000a3}:host-context(.dark){--ngx-color-bg: #222222;--ngx-color-text: #fff;--border-color: #3a3a3a;--tick-color: #595959;--inner-shadow-color: #000}.ngx-input-angle-selector{width:var(--ngx-size, 100);height:var(--ngx-size, 100);border:calc(8 * var(--ngx-size, 100) / 100) var(--border-color) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 10px #0000005d;margin:14px 4px;border-radius:50%;direction:ltr;font-family:arial,tahoma;box-sizing:border-box}.ngx-input-angle-selector *{box-sizing:border-box}.angle-selector{position:relative;width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 20px 0 var(--inner-shadow-color)}.center-dot{width:15px;height:15px;background:var(--handle-color);border-radius:50%;z-index:10;box-shadow:0 0 20px #303030}.hand{position:absolute;width:4px;height:calc(var(--ngx-size, 100) * .6);box-shadow:0 0 20px #303030;background:var(--handle-color);bottom:50%;transform-origin:bottom center;border-radius:4px;pointer-events:none;z-index:1}.tick{position:absolute;width:2px;height:12%;background:var(--tick-color);left:50%;top:0;transform-origin:50% calc(var(--ngx-size, 100px) / 2 - 8 * var(--ngx-size, 100) / 100)}::ng-deep dialog .ngx-input-angle-selector:before{content:\" \";border:14px var(--border-color) solid;position:absolute;z-index:1;filter:drop-shadow(0px -3px 2px rgba(0,0,0,.2));box-sizing:border-box}::ng-deep dialog.tips-above .ngx-input-angle-selector:before{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;top:-12px;left:calc(50% - 14px)}::ng-deep dialog.tips-bottom .ngx-input-angle-selector:before{border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;bottom:-10px;left:calc(50% - 14px);filter:drop-shadow(0px 4px 2px rgba(0,0,0,.2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-input-angle-selector\">\n  <div #selectorContainer class=\"angle-selector\">\n    <div class=\"center-dot\"></div>\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\n\n    @for (angle of tickes; track $index) {\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #e5e5e5;--ngx-color-text: #000;--border-color: #c8c8c8;--ngx-size: 100px;--handle-color: #007ac6;--tick-color: #444444;--inner-shadow-color: #000000a3}:host-context(.dark){--ngx-color-bg: #222222;--ngx-color-text: #fff;--border-color: #3a3a3a;--tick-color: #595959;--inner-shadow-color: #000}.ngx-input-angle-selector{width:var(--ngx-size, 100);height:var(--ngx-size, 100);border:calc(8 * var(--ngx-size, 100) / 100) var(--border-color) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 10px #0000005d;margin:14px 4px;border-radius:50%;direction:ltr;font-family:arial,tahoma;box-sizing:border-box}.ngx-input-angle-selector *{box-sizing:border-box}.angle-selector{position:relative;width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 20px 0 var(--inner-shadow-color)}.center-dot{width:15px;height:15px;background:var(--handle-color);border-radius:50%;z-index:10;box-shadow:0 0 20px #303030}.hand{position:absolute;width:4px;height:calc(var(--ngx-size, 100) * .6);box-shadow:0 0 20px #303030;background:var(--handle-color);bottom:50%;transform-origin:bottom center;border-radius:4px;pointer-events:none;z-index:1}.tick{position:absolute;width:2px;height:12%;background:var(--tick-color);left:50%;top:0;transform-origin:50% calc(var(--ngx-size, 100px) / 2 - 8 * var(--ngx-size, 100) / 100)}::ng-deep dialog .ngx-input-angle-selector:before{content:\" \";border:14px var(--border-color) solid;position:absolute;z-index:1;filter:drop-shadow(0px -3px 2px rgba(0,0,0,.2));box-sizing:border-box}::ng-deep dialog.tips-above .ngx-input-angle-selector:before{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;top:-12px;left:calc(50% - 14px)}::ng-deep dialog.tips-bottom .ngx-input-angle-selector:before{border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;bottom:-10px;left:calc(50% - 14px);filter:drop-shadow(0px 4px 2px rgba(0,0,0,.2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxAngleSelectorComponent, decorators: [{
             type: Component,
@@ -147,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.dark]': 'theme=="dark"',
                         '[style.--ngx-size]': 'size()+"px"',
-                    }, template: "<div class=\"ngx-input-angle-selector\">\r\n  <div #selectorContainer class=\"angle-selector\">\r\n    <div class=\"center-dot\"></div>\r\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\r\n\r\n    @for (angle of tickes; track $index) {\r\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{--ngx-color-bg: #e5e5e5;--ngx-color-text: #000;--border-color: #c8c8c8;--ngx-size: 100px;--handle-color: #007ac6;--tick-color: #444444;--inner-shadow-color: #000000a3}:host-context(.dark){--ngx-color-bg: #222222;--ngx-color-text: #fff;--border-color: #3a3a3a;--tick-color: #595959;--inner-shadow-color: #000}.ngx-input-angle-selector{width:var(--ngx-size, 100);height:var(--ngx-size, 100);border:calc(8 * var(--ngx-size, 100) / 100) var(--border-color) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 10px #0000005d;margin:14px 4px;border-radius:50%;direction:ltr;font-family:arial,tahoma;box-sizing:border-box}.ngx-input-angle-selector *{box-sizing:border-box}.angle-selector{position:relative;width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 20px 0 var(--inner-shadow-color)}.center-dot{width:15px;height:15px;background:var(--handle-color);border-radius:50%;z-index:10;box-shadow:0 0 20px #303030}.hand{position:absolute;width:4px;height:calc(var(--ngx-size, 100) * .6);box-shadow:0 0 20px #303030;background:var(--handle-color);bottom:50%;transform-origin:bottom center;border-radius:4px;pointer-events:none;z-index:1}.tick{position:absolute;width:2px;height:12%;background:var(--tick-color);left:50%;top:0;transform-origin:50% calc(var(--ngx-size, 100px) / 2 - 8 * var(--ngx-size, 100) / 100)}::ng-deep dialog .ngx-input-angle-selector:before{content:\" \";border:14px var(--border-color) solid;position:absolute;z-index:1;filter:drop-shadow(0px -3px 2px rgba(0,0,0,.2));box-sizing:border-box}::ng-deep dialog.tips-above .ngx-input-angle-selector:before{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;top:-12px;left:calc(50% - 14px)}::ng-deep dialog.tips-bottom .ngx-input-angle-selector:before{border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;bottom:-10px;left:calc(50% - 14px);filter:drop-shadow(0px 4px 2px rgba(0,0,0,.2))}\n"] }]
+                    }, template: "<div class=\"ngx-input-angle-selector\">\n  <div #selectorContainer class=\"angle-selector\">\n    <div class=\"center-dot\"></div>\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\n\n    @for (angle of tickes; track $index) {\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\n    }\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: #e5e5e5;--ngx-color-text: #000;--border-color: #c8c8c8;--ngx-size: 100px;--handle-color: #007ac6;--tick-color: #444444;--inner-shadow-color: #000000a3}:host-context(.dark){--ngx-color-bg: #222222;--ngx-color-text: #fff;--border-color: #3a3a3a;--tick-color: #595959;--inner-shadow-color: #000}.ngx-input-angle-selector{width:var(--ngx-size, 100);height:var(--ngx-size, 100);border:calc(8 * var(--ngx-size, 100) / 100) var(--border-color) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text);overflow:hidden;box-shadow:0 0 10px #0000005d;margin:14px 4px;border-radius:50%;direction:ltr;font-family:arial,tahoma;box-sizing:border-box}.ngx-input-angle-selector *{box-sizing:border-box}.angle-selector{position:relative;width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 20px 0 var(--inner-shadow-color)}.center-dot{width:15px;height:15px;background:var(--handle-color);border-radius:50%;z-index:10;box-shadow:0 0 20px #303030}.hand{position:absolute;width:4px;height:calc(var(--ngx-size, 100) * .6);box-shadow:0 0 20px #303030;background:var(--handle-color);bottom:50%;transform-origin:bottom center;border-radius:4px;pointer-events:none;z-index:1}.tick{position:absolute;width:2px;height:12%;background:var(--tick-color);left:50%;top:0;transform-origin:50% calc(var(--ngx-size, 100px) / 2 - 8 * var(--ngx-size, 100) / 100)}::ng-deep dialog .ngx-input-angle-selector:before{content:\" \";border:14px var(--border-color) solid;position:absolute;z-index:1;filter:drop-shadow(0px -3px 2px rgba(0,0,0,.2));box-sizing:border-box}::ng-deep dialog.tips-above .ngx-input-angle-selector:before{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;top:-12px;left:calc(50% - 14px)}::ng-deep dialog.tips-bottom .ngx-input-angle-selector:before{border-bottom-color:transparent;border-right-color:transparent;border-left-color:transparent;bottom:-10px;left:calc(50% - 14px);filter:drop-shadow(0px 4px 2px rgba(0,0,0,.2))}\n"] }]
         }], propDecorators: { setTheme: [{
                 type: Input,
                 args: ['theme']

package/fesm2022/ngx-kit-angle-selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-angle-selector.mjs","sources":["../../../projects/libs/angle-selector/components/input-angle.component.ts","../../../projects/libs/angle-selector/components/input-angle.component.html","../../../projects/libs/angle-selector/directives/ngx-input-angle.directive.ts","../../../projects/libs/angle-selector/ngx-kit-angle-selector.ts"],"sourcesContent":["import {\n  Component,\n  Output,\n  EventEmitter,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  OnInit,\n  inject,\n  signal,\n  effect,\n  DestroyRef,\n  WritableSignal,\n  forwardRef,\n  ChangeDetectionStrategy,\n  input,\n  ChangeDetectorRef,\n  Input,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BrowserService } from 'ngx-kit/shared';\nimport { Subject, fromEvent, merge, tap, map, filter, switchMap, takeUntil, repeat } from 'rxjs';\n\n@Component({\n  selector: 'ngx-input-angle',\n  templateUrl: './input-angle.component.html',\n  styleUrls: ['./input-angle.component.scss'],\n  standalone: true,\n  imports: [],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxAngleSelectorComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.dark]': 'theme==\"dark\"',\n    '[style.--ngx-size]': 'size()+\"px\"',\n  },\n})\nexport class NgxAngleSelectorComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n  browserService = inject(BrowserService);\n  theme: 'light' | 'dark' = this.browserService.prefersDarkMode ? 'dark' : '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  size = input<number>(90);\n  private minAngle = signal<number>(0);\n  private maxAngle = signal<number>(360);\n\n  isDisabled = signal(false);\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n\n  private onChange: (value: number) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  @ViewChild('selectorContainer') selectorContainer!: ElementRef<HTMLDivElement>;\n  currentAngle = signal(0);\n  isDragging = signal(false);\n  selectorRect: DOMRect | null = null;\n  centerX: number = 0;\n  centerY: number = 0;\n\n  tickes: number[] = [];\n  private pointerDownSubject = new Subject<PointerEvent>();\n  private pointerMoveSubject = new Subject<PointerEvent>();\n  private pointerUpSubject = new Subject<PointerEvent>();\n\n  private destroyRef = inject(DestroyRef);\n\n  chdr = inject(ChangeDetectorRef);\n  ngOnInit(): void {\n    // const clampedInitial = this.clamp(this.initialAngle(), this.minAngle(), this.maxAngle());\n    // this.currentAngle.set(clampedInitial);\n  }\n\n  ngAfterViewInit(): void {\n    this.updateSelectorDimensions();\n    this.drawTicks();\n    this.setupPointerEvents();\n  }\n\n  writeValue(value: number | null | undefined): void {\n    if (value !== null && value != undefined) {\n      const clampedValue = this.clamp(+value, this.minAngle(), this.maxAngle());\n      this.currentAngle.set(clampedValue);\n    }\n  }\n  registerOnChange(fn: (value: number) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState?(isDisabled: boolean): void {\n    this.isDisabled.set(isDisabled);\n  }\n\n  private clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, max));\n  }\n\n  private updateSelectorDimensions(): void {\n    const containerElement = this.selectorContainer.nativeElement;\n    this.selectorRect = containerElement.getBoundingClientRect();\n    this.centerX = this.selectorRect.left + this.selectorRect.width / 2;\n    this.centerY = this.selectorRect.top + this.selectorRect.height / 2;\n  }\n  selectorSize() {\n    return this.selectorRect?.width ?? 300;\n  }\n\n  private drawTicks(): void {\n    const containerElement = this.selectorContainer.nativeElement;\n\n    containerElement.querySelectorAll('.tick').forEach((tick: any) => tick.remove());\n\n    const numTicks = 8;\n    const tickInterval = 360 / numTicks;\n    this.tickes = [];\n    for (let i = 0; i < numTicks; i++) {\n      const angle = i * tickInterval;\n      this.tickes.push(angle);\n    }\n    this.chdr.detectChanges();\n  }\n\n  private calculateAngle(event: PointerEvent): void {\n    if (!this.selectorRect) return;\n\n    const clientX = event.clientX;\n    const clientY = event.clientY;\n\n    const dx = clientX - this.centerX;\n    const dy = clientY - this.centerY;\n\n    let angleRad = Math.atan2(dy, dx);\n    let angleDeg = angleRad * (180 / Math.PI);\n\n    angleDeg += 90;\n    if (angleDeg < 0) {\n      angleDeg += 360;\n    }\n\n    // const finalAngle = this.clamp(angleDeg, this.minAngle(), this.maxAngle());\n\n    const finalAngle = Math.round(angleDeg);\n\n    if (finalAngle !== this.currentAngle()) {\n      this.currentAngle.set(finalAngle);\n      this.change.emit(Math.round(this.currentAngle()));\n      this.onChange(Math.round(this.currentAngle()));\n    }\n  }\n\n  private setupPointerEvents(): void {\n    const container = this.selectorContainer.nativeElement;\n\n    const pointerDown$ = fromEvent<PointerEvent>(container, 'pointerdown').pipe(\n      tap((event) => {\n        event.preventDefault();\n        this.isDragging.set(true);\n        this.onTouched();\n        this.updateSelectorDimensions();\n      }),\n\n      switchMap((event) => {\n        this.calculateAngle(event);\n        return merge(\n          fromEvent<PointerEvent>(document, 'pointermove').pipe(\n            tap((moveEvent) => moveEvent.preventDefault()),\n            map((moveEvent) => this.calculateAngle(moveEvent)),\n\n            filter(() => this.isDragging()),\n            takeUntil(fromEvent(document, 'pointerup')),\n          ),\n          fromEvent<PointerEvent>(document, 'pointerup').pipe(\n            tap((upEvent) => {\n              upEvent.preventDefault();\n              this.isDragging.set(false);\n            }),\n            takeUntil(fromEvent(document, 'pointercancel')),\n          ),\n        );\n      }),\n      repeat(),\n    );\n\n    pointerDown$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();\n  }\n}\n","<div class=\"ngx-input-angle-selector\">\r\n  <div #selectorContainer class=\"angle-selector\">\r\n    <div class=\"center-dot\"></div>\r\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\r\n\r\n    @for (angle of tickes; track $index) {\r\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\r\n    }\r\n  </div>\r\n</div>","import {\r\n  Directive,\r\n  forwardRef,\r\n  OnDestroy,\r\n  Input,\r\n  ElementRef,\r\n  Renderer2,\r\n  ViewContainerRef,\r\n  HostListener,\r\n  Output,\r\n  EventEmitter,\r\n  input,\r\n} from '@angular/core';\r\nimport {\r\n  NG_VALUE_ACCESSOR,\r\n  NG_VALIDATORS,\r\n  ControlValueAccessor,\r\n  Validator,\r\n  AbstractControl,\r\n  ValidationErrors,\r\n} from '@angular/forms';\r\nimport { OverlayRef, OverlayService } from 'ngx-kit/shared';\r\nimport { NgxAngleSelectorComponent } from '../components/input-angle.component';\r\n\r\n@Directive({\r\n  selector: '[ngxInputAngle]',\r\n  exportAs: 'ngxInputAngle',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => NgxInputAngle),\r\n      multi: true,\r\n    },\r\n    {\r\n      provide: NG_VALIDATORS,\r\n      useExisting: forwardRef(() => NgxInputAngle),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class NgxInputAngle implements OnDestroy, ControlValueAccessor, Validator {\r\n  @Input() theme: 'light' | 'dark' | 'auto' = 'auto';\r\n  size = input<number>(90);\r\n  openOnCLick = input<boolean>(true);\r\n  @Output() change = new EventEmitter<number>();\r\n  private value?: number | null;\r\n  private pickerRef?: OverlayRef<NgxAngleSelectorComponent>;\r\n  inValid: boolean = false;\r\n\r\n  private isDisabled = false;\r\n  protected _onChange = (value?: number | null) => {};\r\n  protected _onTouched = () => {};\r\n  _onValidateChange = () => {};\r\n\r\n  constructor(\r\n    private el: ElementRef<HTMLInputElement>,\r\n    private renderer: Renderer2,\r\n    private viewContainerRef: ViewContainerRef,\r\n    private overlayService: OverlayService,\r\n  ) {}\r\n\r\n  ngOnDestroy(): void {\r\n    this.destroyAnglePicker();\r\n  }\r\n\r\n  @HostListener('click', ['$event'])\r\n  onClick(ev: Event) {\r\n    if (this.openOnCLick() && !this.isDisabled) {\r\n      ev.stopPropagation();\r\n      ev.preventDefault();\r\n      this.toggle();\r\n    }\r\n  }\r\n\r\n  @HostListener('input', ['$event'])\r\n  onInput(event: Event) {\r\n    const input = event.target as HTMLInputElement;\r\n    this.parseInput(input.value);\r\n    this._onChange(this.value);\r\n  }\r\n\r\n  @HostListener('blur')\r\n  onBlur() {\r\n    this._onTouched();\r\n  }\r\n\r\n  writeValue(val: any): void {\r\n    this.parseInput(val);\r\n    this.renderer.setProperty(this.el.nativeElement, 'value', this.value);\r\n\r\n    this.inValid = false;\r\n    if (this.pickerRef && this.pickerRef.componentRef) {\r\n      this.pickerRef.componentRef.instance.writeValue(this.value);\r\n    }\r\n    this._onValidateChange();\r\n  }\r\n\r\n  parseInput(val: any) {\r\n    try {\r\n      this.inValid = false;\r\n      this.value = val != null && val != undefined ? Number.parseInt(val) : val;\r\n    } catch {\r\n      this.inValid = true;\r\n    }\r\n  }\r\n\r\n  registerOnChange(fn: any): void {\r\n    this._onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any): void {\r\n    this._onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean): void {\r\n    this.isDisabled = disabled;\r\n    if (disabled) {\r\n      this.renderer.setProperty(this.el.nativeElement, 'disabled', disabled);\r\n    } else {\r\n      this.renderer.removeAttribute(this.el.nativeElement, 'disabled');\r\n    }\r\n  }\r\n\r\n  registerOnValidatorChange(fn: () => void): void {\r\n    this._onValidateChange = fn;\r\n  }\r\n\r\n  validate(control: AbstractControl): ValidationErrors | null {\r\n    if (this.inValid === true) {\r\n      return { invalid: true };\r\n    }\r\n    if (this.value && this.value > 360) return { max: true };\r\n    if (this.value && this.value < 0) return { min: true };\r\n    return null;\r\n  }\r\n\r\n  public toggle() {\r\n    if (this.pickerRef || this.isDisabled) {\r\n      this.destroyAnglePicker();\r\n      return;\r\n    }\r\n\r\n    this.pickerRef = this.overlayService.open({\r\n      anchor: this.el.nativeElement,\r\n      component: NgxAngleSelectorComponent,\r\n      viewContainerRef: this.viewContainerRef,\r\n      alignment: 'center',\r\n      placement: 'bottom',\r\n      margin: 2,\r\n      configure: (instance, ref) => {\r\n        instance.size = this.size;\r\n        instance.setTheme = this.theme;\r\n        instance.writeValue(this.value);\r\n\r\n        instance.change.subscribe((c: number) => {\r\n          this.value = c;\r\n          this.emitChange(c);\r\n        });\r\n\r\n        // instance.closed.subscribe(() => ref.close());\r\n      },\r\n      onClosed: () => {\r\n        this.pickerRef = undefined;\r\n      },\r\n    });\r\n  }\r\n\r\n  private destroyAnglePicker() {\r\n    this.pickerRef?.close();\r\n    this.pickerRef = undefined;\r\n  }\r\n\r\n  private async emitChange(c: number) {\r\n    this.renderer.setProperty(this.el.nativeElement, 'value', c);\r\n\r\n    this._onChange(c);\r\n    this.change.emit(c);\r\n    this._onTouched();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-kit-angle-selector.mjs","sources":["../../../projects/libs/angle-selector/components/input-angle.component.ts","../../../projects/libs/angle-selector/components/input-angle.component.html","../../../projects/libs/angle-selector/directives/ngx-input-angle.directive.ts","../../../projects/libs/angle-selector/ngx-kit-angle-selector.ts"],"sourcesContent":["import {\n  Component,\n  Output,\n  EventEmitter,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  OnInit,\n  inject,\n  signal,\n  effect,\n  DestroyRef,\n  WritableSignal,\n  forwardRef,\n  ChangeDetectionStrategy,\n  input,\n  ChangeDetectorRef,\n  Input,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BrowserService } from 'ngx-kit/shared';\nimport { Subject, fromEvent, merge, tap, map, filter, switchMap, takeUntil, repeat } from 'rxjs';\n\n@Component({\n  selector: 'ngx-input-angle',\n  templateUrl: './input-angle.component.html',\n  styleUrls: ['./input-angle.component.scss'],\n  standalone: true,\n  imports: [],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxAngleSelectorComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.dark]': 'theme==\"dark\"',\n    '[style.--ngx-size]': 'size()+\"px\"',\n  },\n})\nexport class NgxAngleSelectorComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n  browserService = inject(BrowserService);\n  theme: 'light' | 'dark' = this.browserService.prefersDarkMode ? 'dark' : '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  size = input<number>(90);\n  private minAngle = signal<number>(0);\n  private maxAngle = signal<number>(360);\n\n  isDisabled = signal(false);\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n\n  private onChange: (value: number) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  @ViewChild('selectorContainer') selectorContainer!: ElementRef<HTMLDivElement>;\n  currentAngle = signal(0);\n  isDragging = signal(false);\n  selectorRect: DOMRect | null = null;\n  centerX: number = 0;\n  centerY: number = 0;\n\n  tickes: number[] = [];\n  private pointerDownSubject = new Subject<PointerEvent>();\n  private pointerMoveSubject = new Subject<PointerEvent>();\n  private pointerUpSubject = new Subject<PointerEvent>();\n\n  private destroyRef = inject(DestroyRef);\n\n  chdr = inject(ChangeDetectorRef);\n  ngOnInit(): void {\n    // const clampedInitial = this.clamp(this.initialAngle(), this.minAngle(), this.maxAngle());\n    // this.currentAngle.set(clampedInitial);\n  }\n\n  ngAfterViewInit(): void {\n    this.updateSelectorDimensions();\n    this.drawTicks();\n    this.setupPointerEvents();\n  }\n\n  writeValue(value: number | null | undefined): void {\n    if (value !== null && value != undefined) {\n      const clampedValue = this.clamp(+value, this.minAngle(), this.maxAngle());\n      this.currentAngle.set(clampedValue);\n    }\n  }\n  registerOnChange(fn: (value: number) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState?(isDisabled: boolean): void {\n    this.isDisabled.set(isDisabled);\n  }\n\n  private clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, max));\n  }\n\n  private updateSelectorDimensions(): void {\n    const containerElement = this.selectorContainer.nativeElement;\n    this.selectorRect = containerElement.getBoundingClientRect();\n    this.centerX = this.selectorRect.left + this.selectorRect.width / 2;\n    this.centerY = this.selectorRect.top + this.selectorRect.height / 2;\n  }\n  selectorSize() {\n    return this.selectorRect?.width ?? 300;\n  }\n\n  private drawTicks(): void {\n    const containerElement = this.selectorContainer.nativeElement;\n\n    containerElement.querySelectorAll('.tick').forEach((tick: any) => tick.remove());\n\n    const numTicks = 8;\n    const tickInterval = 360 / numTicks;\n    this.tickes = [];\n    for (let i = 0; i < numTicks; i++) {\n      const angle = i * tickInterval;\n      this.tickes.push(angle);\n    }\n    this.chdr.detectChanges();\n  }\n\n  private calculateAngle(event: PointerEvent): void {\n    if (!this.selectorRect) return;\n\n    const clientX = event.clientX;\n    const clientY = event.clientY;\n\n    const dx = clientX - this.centerX;\n    const dy = clientY - this.centerY;\n\n    let angleRad = Math.atan2(dy, dx);\n    let angleDeg = angleRad * (180 / Math.PI);\n\n    angleDeg += 90;\n    if (angleDeg < 0) {\n      angleDeg += 360;\n    }\n\n    // const finalAngle = this.clamp(angleDeg, this.minAngle(), this.maxAngle());\n\n    const finalAngle = Math.round(angleDeg);\n\n    if (finalAngle !== this.currentAngle()) {\n      this.currentAngle.set(finalAngle);\n      this.change.emit(Math.round(this.currentAngle()));\n      this.onChange(Math.round(this.currentAngle()));\n    }\n  }\n\n  private setupPointerEvents(): void {\n    const container = this.selectorContainer.nativeElement;\n\n    const pointerDown$ = fromEvent<PointerEvent>(container, 'pointerdown').pipe(\n      tap((event) => {\n        event.preventDefault();\n        this.isDragging.set(true);\n        this.onTouched();\n        this.updateSelectorDimensions();\n      }),\n\n      switchMap((event) => {\n        this.calculateAngle(event);\n        return merge(\n          fromEvent<PointerEvent>(document, 'pointermove').pipe(\n            tap((moveEvent) => moveEvent.preventDefault()),\n            map((moveEvent) => this.calculateAngle(moveEvent)),\n\n            filter(() => this.isDragging()),\n            takeUntil(fromEvent(document, 'pointerup')),\n          ),\n          fromEvent<PointerEvent>(document, 'pointerup').pipe(\n            tap((upEvent) => {\n              upEvent.preventDefault();\n              this.isDragging.set(false);\n            }),\n            takeUntil(fromEvent(document, 'pointercancel')),\n          ),\n        );\n      }),\n      repeat(),\n    );\n\n    pointerDown$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();\n  }\n}\n","<div class=\"ngx-input-angle-selector\">\n  <div #selectorContainer class=\"angle-selector\">\n    <div class=\"center-dot\"></div>\n    <div #hand class=\"hand\" [style.transform]=\"'rotate(' + currentAngle() + 'deg)'\"></div>\n\n    @for (angle of tickes; track $index) {\n      <div [style.transform]=\"'rotate(' + angle + 'deg)'\" class=\"tick\"></div>\n    }\n  </div>\n</div>\n","import {\n  Directive,\n  forwardRef,\n  OnDestroy,\n  Input,\n  ElementRef,\n  Renderer2,\n  ViewContainerRef,\n  HostListener,\n  Output,\n  EventEmitter,\n  input,\n} from '@angular/core';\nimport {\n  NG_VALUE_ACCESSOR,\n  NG_VALIDATORS,\n  ControlValueAccessor,\n  Validator,\n  AbstractControl,\n  ValidationErrors,\n} from '@angular/forms';\nimport { OverlayRef, OverlayService } from 'ngx-kit/shared';\nimport { NgxAngleSelectorComponent } from '../components/input-angle.component';\n\n@Directive({\n  selector: '[ngxInputAngle]',\n  exportAs: 'ngxInputAngle',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxInputAngle),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => NgxInputAngle),\n      multi: true,\n    },\n  ],\n})\nexport class NgxInputAngle implements OnDestroy, ControlValueAccessor, Validator {\n  @Input() theme: 'light' | 'dark' | 'auto' = 'auto';\n  size = input<number>(90);\n  openOnCLick = input<boolean>(true);\n  @Output() change = new EventEmitter<number>();\n  private value?: number | null;\n  private pickerRef?: OverlayRef<NgxAngleSelectorComponent>;\n  inValid: boolean = false;\n\n  private isDisabled = false;\n  protected _onChange = (value?: number | null) => {};\n  protected _onTouched = () => {};\n  _onValidateChange = () => {};\n\n  constructor(\n    private el: ElementRef<HTMLInputElement>,\n    private renderer: Renderer2,\n    private viewContainerRef: ViewContainerRef,\n    private overlayService: OverlayService,\n  ) {}\n\n  ngOnDestroy(): void {\n    this.destroyAnglePicker();\n  }\n\n  @HostListener('click', ['$event'])\n  onClick(ev: Event) {\n    if (this.openOnCLick() && !this.isDisabled) {\n      ev.stopPropagation();\n      ev.preventDefault();\n      this.toggle();\n    }\n  }\n\n  @HostListener('input', ['$event'])\n  onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.parseInput(input.value);\n    this._onChange(this.value);\n  }\n\n  @HostListener('blur')\n  onBlur() {\n    this._onTouched();\n  }\n\n  writeValue(val: any): void {\n    this.parseInput(val);\n    this.renderer.setProperty(this.el.nativeElement, 'value', this.value);\n\n    this.inValid = false;\n    if (this.pickerRef && this.pickerRef.componentRef) {\n      this.pickerRef.componentRef.instance.writeValue(this.value);\n    }\n    this._onValidateChange();\n  }\n\n  parseInput(val: any) {\n    try {\n      this.inValid = false;\n      this.value = val != null && val != undefined ? Number.parseInt(val) : val;\n    } catch {\n      this.inValid = true;\n    }\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean): void {\n    this.isDisabled = disabled;\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\n  registerOnValidatorChange(fn: () => void): void {\n    this._onValidateChange = fn;\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (this.inValid === true) {\n      return { invalid: true };\n    }\n    if (this.value && this.value > 360) return { max: true };\n    if (this.value && this.value < 0) return { min: true };\n    return null;\n  }\n\n  public toggle() {\n    if (this.pickerRef || this.isDisabled) {\n      this.destroyAnglePicker();\n      return;\n    }\n\n    this.pickerRef = this.overlayService.open({\n      anchor: this.el.nativeElement,\n      component: NgxAngleSelectorComponent,\n      viewContainerRef: this.viewContainerRef,\n      alignment: 'center',\n      placement: 'bottom',\n      margin: 2,\n      configure: (instance, ref) => {\n        instance.size = this.size;\n        instance.setTheme = this.theme;\n        instance.writeValue(this.value);\n\n        instance.change.subscribe((c: number) => {\n          this.value = c;\n          this.emitChange(c);\n        });\n\n        // instance.closed.subscribe(() => ref.close());\n      },\n      onClosed: () => {\n        this.pickerRef = undefined;\n      },\n    });\n  }\n\n  private destroyAnglePicker() {\n    this.pickerRef?.close();\n    this.pickerRef = undefined;\n  }\n\n  private async emitChange(c: number) {\n    this.renderer.setProperty(this.el.nativeElement, 'value', c);\n\n    this._onChange(c);\n    this.change.emit(c);\n    this._onTouched();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { EventEmitter, inject, forwardRef, HostListener, ViewChild, Output, Inpu
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1$1 from 'ngx-kit/shared';
-import { BrowserService, getOffsetPosition } from 'ngx-kit/shared';
+import { BrowserService, startDragSession, getOffsetPosition } from 'ngx-kit/shared';
 import { NgxInputColor } from 'ngx-kit/color-picker';
 
 function parseBoxShadowToPx(shadow, contextPx = 16) {
@@ -95,6 +95,7 @@ class NgxBoxShadowComponent {
     _onChange = (value) => { };
     _onTouched = () => { };
     _onValidateChange = () => { };
+    stopDrag;
     pad;
     thumb;
     browserService = inject(BrowserService);
@@ -105,7 +106,9 @@ class NgxBoxShadowComponent {
     ngAfterViewInit() {
         this.updateRects();
     }
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this.stopDrag?.();
+    }
     registerOnChange(fn) {
         this._onChange = fn;
     }
@@ -141,6 +144,15 @@ class NgxBoxShadowComponent {
         this.isDragging = true;
         this.updatePosition(ev);
         this.updateRects();
+        this.stopDrag?.();
+        this.stopDrag = startDragSession({
+            onMove: (moveEv) => this.updatePosition(moveEv),
+            onEnd: () => {
+                this.isDragging = false;
+                this.stopDrag = undefined;
+                this.cd.markForCheck();
+            },
+        });
     }
     updateRects() {
         this.padRect = this.pad.nativeElement.getBoundingClientRect();
@@ -158,11 +170,6 @@ class NgxBoxShadowComponent {
     onResize() {
         this.writeValue(this.value);
     }
-    onDrag(ev) {
-        if (!this.isDragging)
-            return;
-        this.updatePosition(ev);
-    }
     updatePosition(ev) {
         if (!this.isDragging)
             return;
@@ -187,9 +194,7 @@ class NgxBoxShadowComponent {
             y2: this.y + thumbRec.height / 2,
         };
         this.setValueByPosition(thumbRec, padRec);
-    }
-    onDragEnd(ev) {
-        this.isDragging = false;
+        this.cd.markForCheck();
     }
     setValueByPosition(thumbRec, padRec) {
         const padCenterX = (padRec.width - thumbRec.width) / 2;
@@ -256,19 +261,27 @@ class NgxBoxShadowComponent {
         ev.stopPropagation();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxBoxShadowComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: NgxBoxShadowComponent, isStandalone: true, selector: "ngx-box-shadow", inputs: { setTheme: ["theme", "setTheme"], maxRange: "maxRange" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" }, properties: { "class.dark": "theme==\"dark\"" } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxBoxShadowComponent), multi: true },
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: NgxBoxShadowComponent, isStandalone: true, selector: "ngx-box-shadow", inputs: { setTheme: ["theme", "setTheme"], maxRange: "maxRange" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.dark": "theme==\"dark\"" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgxBoxShadowComponent),
+                multi: true,
+            },
             {
                 provide: NG_VALIDATORS,
                 multi: true,
                 useExisting: NgxBoxShadowComponent,
             },
-        ], viewQueries: [{ propertyName: "pad", first: true, predicate: ["pad"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ngx-box-shadow-container\" (click)=\"stopPropagation($event)\">\r\n  <div class=\"pad-container\" #pad>\r\n    <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line\r\n        [attr.x1]=\"line.x1\"\r\n        [attr.y1]=\"line.y1\"\r\n        [attr.x2]=\"line.x2\"\r\n        [attr.y2]=\"line.y2\"\r\n        stroke=\"blue\"\r\n        stroke-width=\"2\" />\r\n    </svg>\r\n    <div\r\n      class=\"thumb\"\r\n      #thumb\r\n      [style.left.px]=\"x\"\r\n      [style.top.px]=\"y\"\r\n      (mousedown)=\"dragStart($event)\"\r\n      (touchstart)=\"dragStart($event)\"></div>\r\n  </div>\r\n\r\n  <div class=\"ngx-settings\">\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Offset X</span>\r\n        <input type=\"number\" id=\"offsetX\" [(ngModel)]=\"value.x\" name=\"offsetX\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"offsetX\"\r\n        [(ngModel)]=\"value.x\"\r\n        name=\"rangeOffsetX\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\"\r\n        [min]=\"-maxRange\"\r\n        [max]=\"maxRange\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Offset Y</span>\r\n        <input type=\"number\" id=\"offsetY\" [(ngModel)]=\"value.y\" name=\"offsetY\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"offsetY\"\r\n        [(ngModel)]=\"value.y\"\r\n        name=\"rangeOffsetY\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\"\r\n        [min]=\"-maxRange\"\r\n        [max]=\"maxRange\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Blur</span>\r\n        <input type=\"number\" id=\"blur\" [(ngModel)]=\"blur\" name=\"blur\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input type=\"range\" id=\"blur\" [(ngModel)]=\"blur\" name=\"rangeBlur\" (ngModelChange)=\"onChangeValue()\" step=\"1\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Spread</span>\r\n        <input type=\"number\" id=\"spread\" [(ngModel)]=\"spread\" name=\"spread\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"spread\"\r\n        [(ngModel)]=\"spread\"\r\n        name=\"rangeSpread\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>color</span>\r\n        <input\r\n          type=\"text\"\r\n          readonly\r\n          id=\"color\"\r\n          [(ngModel)]=\"color\"\r\n          name=\"color\"\r\n          ngxInputColor\r\n          [simpleMode]=\"true\"\r\n          (ngModelChange)=\"onChangeData()\"\r\n          autocomplete=\"off\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ngx-box-shadow-container{width:180px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;background-color:#fff;overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;padding:12px}.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(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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxBoxShadowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-box-shadow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxBoxShadowComponent), multi: true },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgxBoxShadowComponent),
+                            multi: true,
+                        },
                         {
                             provide: NG_VALIDATORS,
                             multi: true,
@@ -276,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)\">\r\n  <div class=\"pad-container\" #pad>\r\n    <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line\r\n        [attr.x1]=\"line.x1\"\r\n        [attr.y1]=\"line.y1\"\r\n        [attr.x2]=\"line.x2\"\r\n        [attr.y2]=\"line.y2\"\r\n        stroke=\"blue\"\r\n        stroke-width=\"2\" />\r\n    </svg>\r\n    <div\r\n      class=\"thumb\"\r\n      #thumb\r\n      [style.left.px]=\"x\"\r\n      [style.top.px]=\"y\"\r\n      (mousedown)=\"dragStart($event)\"\r\n      (touchstart)=\"dragStart($event)\"></div>\r\n  </div>\r\n\r\n  <div class=\"ngx-settings\">\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Offset X</span>\r\n        <input type=\"number\" id=\"offsetX\" [(ngModel)]=\"value.x\" name=\"offsetX\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"offsetX\"\r\n        [(ngModel)]=\"value.x\"\r\n        name=\"rangeOffsetX\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\"\r\n        [min]=\"-maxRange\"\r\n        [max]=\"maxRange\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Offset Y</span>\r\n        <input type=\"number\" id=\"offsetY\" [(ngModel)]=\"value.y\" name=\"offsetY\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"offsetY\"\r\n        [(ngModel)]=\"value.y\"\r\n        name=\"rangeOffsetY\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\"\r\n        [min]=\"-maxRange\"\r\n        [max]=\"maxRange\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Blur</span>\r\n        <input type=\"number\" id=\"blur\" [(ngModel)]=\"blur\" name=\"blur\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input type=\"range\" id=\"blur\" [(ngModel)]=\"blur\" name=\"rangeBlur\" (ngModelChange)=\"onChangeValue()\" step=\"1\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>Spread</span>\r\n        <input type=\"number\" id=\"spread\" [(ngModel)]=\"spread\" name=\"spread\" (ngModelChange)=\"onChangeValue()\" />\r\n      </div>\r\n      <input\r\n        type=\"range\"\r\n        id=\"spread\"\r\n        [(ngModel)]=\"spread\"\r\n        name=\"rangeSpread\"\r\n        (ngModelChange)=\"onChangeValue()\"\r\n        step=\"1\" />\r\n    </div>\r\n    <div class=\"ngx-setting-item\">\r\n      <div class=\"ngx-row\">\r\n        <span>color</span>\r\n        <input\r\n          type=\"text\"\r\n          readonly\r\n          id=\"color\"\r\n          [(ngModel)]=\"color\"\r\n          name=\"color\"\r\n          ngxInputColor\r\n          [simpleMode]=\"true\"\r\n          (ngModelChange)=\"onChangeData()\"\r\n          autocomplete=\"off\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ngx-box-shadow-container{width:180px;max-width:100%;border:1px #bfbfbf solid;border-radius:15px;background-color:#fff;overflow:hidden;box-shadow:0 0 20px #0000004f;direction:ltr;padding:12px}.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(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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
                 type: Input,
                 args: ['theme']
@@ -293,18 +306,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
-            }], onDrag: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchmove', ['$event']]
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchend', ['$event']]
             }] } });
 
 class NgxInputBoxShadow {