ngx-kit 7.3.3 → 8.0.0

package/drag-resize/README.md

@@ -2,7 +2,7 @@
 
 ## Design goals
 
-The package uses Angular 22 signals and Pointer Events. Dragging and resizing remain transform/pointer based, while drop-list sorting uses live DOM geometry.
+The package uses Angular 22 signals and Pointer Events. Dragging and resizing remain transform/pointer based. Drop-list sorting is snapshot-based and driven by `translate3d`, like Angular CDK Drag & Drop.
 
 ### Professional drop-list behavior
 
@@ -13,10 +13,32 @@ When a drag starts inside a drop list:
 - a fully styled visual clone is moved to `document.body`, so overflow/scroll containers cannot clip the drag;
 - the body preview copies computed styles recursively, including CSS custom properties and descendant styles;
 - entering, leaving and switching lists always disposes the previous placeholder before creating the next one;
-- sorting uses current DOM geometry instead of stale start-of-drag rectangles;
+- sorting is a pure function of the pointer and a geometry snapshot taken when the drag enters a list, so it is fully reversible (see below);
 - `previousIndex` is captured from the origin list and `currentIndex` is the final placeholder position;
 - dropping outside every connected list cancels the drag instead of accidentally committing it;
-- auto-scroll follows the currently hovered drop list.
+- auto-scroll follows the currently hovered drop list (or the page when outside every list);
+- the item is never clamped to its list; only an explicit `boundary` input restricts the preview;
+- free drag (items that are not direct children of a drop list) never uses the body clone and is never captured by a list.
+
+### How sorting works
+
+Per pointer position the engine answers *"if I release here, where is the item inserted?"*:
+
+1. **Snapshot.** When a drag enters a list, the rectangles of its items (with the dragged item's placeholder in its slot) are measured once. They are kept valid across page/parent/nested scrolling by shifting the pointer by the scroll delta, so pointer moves perform no layout reads.
+2. **Resolve.** `resolveInsertionIndex(pointer, snapshot)` counts how many siblings precede the pointer. Orientation is derived from the rectangles (row clustering and the order DOM siblings actually land on screen), so column, row, `flex` (incl. `wrap`, `*-reverse`), `grid`, inline/inline-block, floats, RTL and LTR all use one algorithm; `flex-direction`/`direction` are only a fallback for lists of fewer than two items. A small proportional hysteresis (10 % of the sibling's size, max 6 px) prevents flicker on a mid-line.
+3. **Show.** Single-row/column lists never touch the DOM while sorting: siblings and the placeholder are displaced with `translate3d` computed from measured sizes and gaps. Multi-row layouts (grid, wrapping) cannot be described by a translate without re-implementing the browser's layout, so the single placeholder node is moved and siblings are animated with FLIP `translate3d`. Decisions always use the immutable snapshot, so reflow never feeds back into them.
+4. **Commit or roll back.** Nothing is committed during the drag. On release over a connected list one `drop` is emitted (after all temporary DOM/styles were removed); anywhere else, on Escape, `pointercancel` or when the draggable is destroyed the drag is rolled back and nothing is emitted.
+
+The list the drag started in keeps its original slot (a hole) while the pointer is outside every list; other lists get a placeholder only while hovered. `DropListRef.sortAnimationDuration` (default 200 ms, `0` disables) controls the slide animation.
+
+### Notes and limits
+
+- Draggables must be direct children of their drop list (as before); others behave as free drag.
+- Nested draggables: the innermost enabled draggable claims a `pointerdown`. Use `dragHandle`s if an outer item should be draggable from its own area.
+- Nested lists: the innermost connected list under the pointer wins; lists inside the dragged element are never targets.
+- Hit testing only counts the visible (clip-aware) part of a list.
+- Custom placeholder templates (`NgxPlaceholder`) are not rendered by the engine (pre-existing).
+- Scaled (`transform: scale`) ancestors are not compensated.
 
 ## Basic drop list
 

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

@@ -252,11 +252,11 @@ class NgxShadowControl {
     }
     close() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxShadowControl, isStandalone: true, selector: "ngx-shadow-control", inputs: { maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null }, selectedShadow: { classPropertyName: "selectedShadow", publicName: "selectedShadow", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedShadow: "selectedShadowChange", shadowChange: "shadowChange" }, host: { listeners: { "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)", "mousemove": "onMouseMove($event)", "touchmove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "pad", first: true, predicate: ["pad"], descendants: true }, { propertyName: "flashlight", first: true, predicate: ["flashlight"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxInputColor, selector: "[ngxInputColor]", inputs: ["setInputBackgroundColor", "simpleMode", "outputType", "defaultInspector", "useAlphaChannel", "showPresets", "presetColors", "ngxInputColor"], outputs: ["defaultInspectorChange", "colorChange", "change"], exportAs: ["ngxInputColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxShadowControl, isStandalone: true, selector: "ngx-shadow-control", inputs: { maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null }, selectedShadow: { classPropertyName: "selectedShadow", publicName: "selectedShadow", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedShadow: "selectedShadowChange", shadowChange: "shadowChange" }, host: { listeners: { "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)", "mousemove": "onMouseMove($event)", "touchmove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "pad", first: true, predicate: ["pad"], descendants: true }, { propertyName: "flashlight", first: true, predicate: ["flashlight"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-shadowbox-bg: light-dark(#fff, #222);--ngx-shadowbox-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-shadowbox-bg);color:var(--ngx-shadowbox-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxInputColor, selector: "[ngxInputColor]", inputs: ["setInputBackgroundColor", "simpleMode", "outputType", "defaultInspector", "useAlphaChannel", "showPresets", "presetColors", "ngxInputColor"], outputs: ["defaultInspectorChange", "colorChange", "change"], exportAs: ["ngxInputColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxShadowControl, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-shadow-control', imports: [FormsModule, NgxInputColor], template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-color-bg);color:var(--ngx-color-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"] }]
+            args: [{ selector: 'ngx-shadow-control', imports: [FormsModule, NgxInputColor], template: "<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n", styles: [":host{--ngx-shadowbox-bg: light-dark(#fff, #222);--ngx-shadowbox-text: light-dark(#000, #fff)}.ngx-shadow-control{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid;background:var(--ngx-shadowbox-bg);color:var(--ngx-shadowbox-text)}.card-sample{border-radius:5px;width:50px;height:50px;background-color:#fff;z-index:1;border:1px #bbbbbb solid}.pad-container{background:#fff;position:relative;width:100%;height:200px;border:1px #545454 solid;box-sizing:border-box;direction:ltr;border-radius:3px;display:flex;align-items:center;justify-content:center}.pad-container:after,.pad-container:before{content:\"\";position:absolute;border:1px rgba(100,100,100,.1490196078) dotted}.pad-container:after{width:100%;top:calc(50% - 1px);left:0}.pad-container:before{height:100%;top:0;left:calc(50% - 1px)}.pad-container .thumb{box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px;display:block;border-radius:10px;position:absolute;cursor:pointer;background:#00f}.flashlight-svg{width:24px;position:absolute;transform-origin:center center;z-index:10;fill:#ff6a00}.container{position:relative;width:300px;height:300px;background:#fff;border:2px solid #333;border-radius:8px;margin:50px auto;transition:box-shadow .2s ease}.flashlight{position:absolute;width:24px;height:24px;color:gold;transform:translate(-50%,-50%);pointer-events:none}table{width:100%;table-layout:fixed}table th{width:60px;font-size:12px}i,button{color:inherit}input:not([type=range]){width:68px;background:#4d4d4d;border:none;border-radius:3px;color:inherit;padding:4px}input[type=range]{flex:auto;appearance:none;-webkit-appearance:none;width:auto;height:4px;border-radius:5px;background-color:#696969;outline:none;margin:20px 2px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:20px;border-radius:2px;background-color:#1741ff;position:relative}.pi-btn-group{background-color:var(--color-bg-secondary, #383838);border:1px solid var(--color-bg-secondary, #383838);border-radius:var(--radius-medium, .3125rem);color:var(--fgColor)}.pi-btn-group button,.pi-btn-group .button{display:inline-block;padding:6px 10px;line-height:1;min-width:40px;border-radius:5px}.pi-btn-group button:last-child,.pi-btn-group .button:last-child{border-right:none}.pi-btn-group button.active,.pi-btn-group .button.active{background:#151515;border:none}.pi-btn-group input{display:none}.pi-btn-group label{color:inherit}.pi-btn-group i{font-weight:400;color:inherit}.pi-btn-group .btn-check:checked+.button{background:#151515;border:none}\n"] }]
         }], propDecorators: { maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], selectedShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedShadow", required: true }] }, { type: i0.Output, args: ["selectedShadowChange"] }], shadowChange: [{ type: i0.Output, args: ["shadowChange"] }], pad: [{
                 type: ViewChild,
                 args: ['pad', { static: false }]

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-parser.ts","../../../projects/libs/box-shadow/components/shadow-control/shadow-control.ts","../../../projects/libs/box-shadow/components/shadow-control/shadow-control.html","../../../projects/libs/box-shadow/components/shadow-list/box-shadow.ts","../../../projects/libs/box-shadow/components/shadow-list/box-shadow.html","../../../projects/libs/box-shadow/ngx-kit-box-shadow.ts"],"sourcesContent":["import { extractCssColors } from 'ngx-kit/core';\nimport  { BoxShadow } from '../contracts/BoxShadowValue';\n\nexport function parseBoxShadow(cssValue: string): BoxShadow[] {\n  if (!cssValue || typeof cssValue !== 'string') {\n    return [];\n  }\n  // Split multiple shadows by comma\n  const shadows = cssValue\n    .split(/,(?![^\\(]*\\))/)\n    .map((shadow) => shadow.trim())\n    .filter((shadow) => shadow);\n\n  const boxShadows: BoxShadow[] = [];\n  const unitRegex = /(px|rem|em)/;\n  const numberRegex = /-?\\d*\\.?\\d*(?:px|rem|em)?/g;\n\n  for (const shadow of shadows) {\n    const boxShadow: BoxShadow = {\n      xOffset: 0,\n      yOffset: 0,\n      color: 'rgba(0, 0, 0, 0)', // Default color\n      unit: 'px', // Default unit\n      cssValue: '',\n    };\n\n    // Check for inset\n    boxShadow.inset = shadow.includes('inset');\n\n    // Extract color\n    const colorMatch = extractCssColors(shadow);\n    if (colorMatch) {\n      boxShadow.color = colorMatch[0];\n    }\n\n    // Remove inset and color to parse numbers\n    let numberString = shadow.replace('inset', '').replace(boxShadow.color, '').trim();\n\n    // Extract numbers\n    const numbers = (numberString.match(numberRegex) ?? [])\n      .map((shadow) => shadow.trim())\n      .filter((shadow) => shadow);\n    if (!numbers) continue;\n\n    // Parse numbers\n    for (let i = 0; i < numbers.length; i++) {\n      const num = parseFloat(numbers[i]);\n      const unit = numbers[i].match(unitRegex)?.[0] || 'px';\n      boxShadow.unit = unit; // Update unit based on first detected unit\n\n      if (i === 0) {\n        boxShadow.xOffset = isNaN(num) ? 0 : num;\n      } else if (i === 1) {\n        boxShadow.yOffset = isNaN(num) ? 0 : num;\n      } else if (i === 2) {\n        boxShadow.blurRadius = isNaN(num) ? 0 : Math.max(0, num); // Blur can't be negative\n      } else if (i === 3) {\n        boxShadow.spreadRadius = isNaN(num) ? 0 : num;\n      }\n    }\n    boxShadow.cssValue = shadow;\n    boxShadows.push(boxShadow);\n  }\n\n  return boxShadows;\n}\n\n// Utility to validate and format color\nexport function validateColor(color: string): string {\n  const hexRegex = /^#[0-9a-fA-F]{3,8}$/;\n  const rgbRegex = /^rgba?\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*(,\\s*[\\d.]+)?\\)$/;\n  const hslRegex = /^hsl\\(\\s*\\d+\\s*,\\s*\\d+%\\s*,\\s*\\d+%\\s*\\)$/;\n  const namedColors = [\n    'black',\n    'white',\n    'red',\n    'blue',\n    'green',\n    'yellow',\n    'purple',\n    'orange',\n    // Add more named colors as needed\n  ];\n\n  color = color.trim();\n  if (hexRegex.test(color) || rgbRegex.test(color) || hslRegex.test(color)) {\n    return color;\n  }\n  if (namedColors.includes(color.toLowerCase())) {\n    return color.toLowerCase();\n  }\n  return 'rgba(0, 0, 0, 0)'; // Fallback to transparent\n}\n\n// Utility to format BoxShadow back to CSS string\nexport function formatBoxShadowToCSS(shadows: BoxShadow[]): string {\n  return shadows\n    .map((shadow) => {\n      const parts: string[] = [];\n      if (shadow.inset) {\n        parts.push('inset');\n      }\n      parts.push(`${shadow.xOffset}${shadow.unit}`, `${shadow.yOffset}${shadow.unit}`);\n      if (shadow.blurRadius !== undefined) {\n        parts.push(`${shadow.blurRadius}${shadow.unit}`);\n      }\n      if (shadow.spreadRadius !== undefined) {\n        parts.push(`${shadow.spreadRadius}${shadow.unit}`);\n      }\n      parts.push(shadow.color);\n      return parts.join(' ');\n    })\n    .join(', ');\n}\n\n// Example usage:\n/*\nconst css = \"10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000\";\nconst parsed = parseBoxShadow(css);\nconsole.log(parsed);\n// Output: [\n//   { xOffset: 10, yOffset: 20, blurRadius: 5, spreadRadius: 0, color: \"rgba(0, 0, 0, 0.5)\", unit: \"px\" },\n//   { inset: true, xOffset: -10, yOffset: -20, blurRadius: 10, color: \"#ff0000\", unit: \"px\" }\n// ]\nconst cssString = formatBoxShadowToCSS(parsed);\nconsole.log(cssString);\n// Output: \"10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000\"\n*/\n","import {\n  Component,\n  HostListener,\n  input,\n  model,\n  output,\n  signal,\n  ViewChild,\n  ElementRef,\n  OnInit,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BoxShadow } from '../../contracts/BoxShadowValue';\nimport { NgxInputColor } from 'ngx-kit/color-picker';\nimport { formatBoxShadowToCSS } from '../../utils/box-shadow-parser';\nimport { getOffsetPosition } from 'ngx-kit/core';\n\n@Component({\n  selector: 'ngx-shadow-control',\n  templateUrl: './shadow-control.html',\n  styleUrl: './shadow-control.scss',\n  imports: [FormsModule, NgxInputColor],\n})\nexport class NgxShadowControl implements OnInit {\n  protected readonly maxRange = input(25);\n  readonly selectedShadow = model.required<BoxShadow>();\n\n  private _previousCssValue?: string = '';\n  readonly shadowChange = output<BoxShadow>();\n\n  padRect?: DOMRect;\n  flashlightRect?: DOMRect;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  x = signal(0);\n  y = signal(0);\n  isDragging = false;\n  @ViewChild('pad', { static: false }) pad!: ElementRef<HTMLDivElement>;\n  @ViewChild('flashlight', { static: false }) flashlight!: ElementRef<SVGSVGElement>;\n\n  private radius: number = 0;\n\n  ngOnInit(): void {\n    this.setXyFromShadow(this.selectedShadow());\n    this._previousCssValue = this.selectedShadow().cssValue;\n  }\n\n  onPadClick(ev: MouseEvent | TouchEvent) {\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.isDragging = true;\n    this.updatePosition(position);\n  }\n\n  dragStart(ev: MouseEvent | TouchEvent) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.updateContainerDimensions();\n    this.isDragging = true;\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.updatePosition(position);\n  }\n\n  @HostListener('document:mouseup', ['$event'])\n  @HostListener('document:touchend', ['$event'])\n  onDragEnd(ev: MouseEvent | TouchEvent) {\n    this.isDragging = false;\n  }\n\n  @HostListener('mousemove', ['$event'])\n  @HostListener('touchmove', ['$event'])\n  onMouseMove(ev: MouseEvent | TouchEvent) {\n    if (!this.isDragging) return;\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.updatePosition(position);\n  }\n\n  private updatePosition(position: { x: number; y: number }) {\n    const padRec = this.padRect!;\n    const flashlightRec = this.flashlightRect!;\n\n    const centerX = this.center.x;\n    const centerY = this.center.y;\n\n    const dx = position.x - centerX;\n    const dy = position.y - centerY;\n\n    // زاویه\n    const angleRad = Math.atan2(dy, dx);\n    const minX = flashlightRec.width / 2;\n    const maxX = padRec.width - flashlightRec.width / 2;\n    const minY = flashlightRec.height / 2;\n    const maxY = padRec.height - flashlightRec.height / 2;\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.set(clampedX - flashlightRec.width / 2);\n    this.y.set(clampedY - flashlightRec.height / 2);\n\n    // ✅ ولی مقدار واقعی shadow رو از موقعیت موس (dx, dy) بگیر\n    const halfRangeX = (padRec.width - flashlightRec.width) / 2;\n    const halfRangeY = (padRec.height - flashlightRec.height) / 2;\n\n    let valueX = (-dx / halfRangeX) * this.maxRange();\n    let valueY = (-dy / halfRangeY) * this.maxRange();\n\n    valueX = Math.round(Math.min(Math.max(valueX, -this.maxRange()), this.maxRange()));\n    valueY = Math.round(Math.min(Math.max(valueY, -this.maxRange()), this.maxRange()));\n\n    // چرخش چراغ قوه\n    const angleDeg = angleRad * (180 / Math.PI);\n    if (this.flashlight.nativeElement) {\n      this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;\n    }\n\n    // آپدیت shadow\n    this.selectedShadow.set({\n      ...this.selectedShadow(),\n      xOffset: valueX,\n      yOffset: valueY,\n    });\n    this.updateShadow(this.selectedShadow());\n  }\n\n  private updateContainerDimensions() {\n    setTimeout(() => {\n      if (!this.pad) return;\n      this.padRect = this.pad.nativeElement.getBoundingClientRect();\n      this.flashlightRect = this.flashlight.nativeElement.getBoundingClientRect();\n      this.center = { x: this.padRect.width / 2, y: this.padRect.height / 2 };\n      this.radius =\n        Math.min(this.padRect.width, this.padRect.height) / 2 - this.flashlightRect.width / 2;\n      this.x.set(0); // Reset to center\n      this.y.set(0);\n    });\n  }\n\n  updateShadow(updatedShadow: Partial<BoxShadow>) {\n    this.selectedShadow().cssValue = formatBoxShadowToCSS([this.selectedShadow()]);\n    this.setXyFromShadow(this.selectedShadow());\n    if (this._previousCssValue != this.selectedShadow().cssValue) {\n      this.shadowChange.emit(this.selectedShadow());\n    }\n  }\n\n  setXyFromShadow(item: BoxShadow) {\n    this.updateContainerDimensions();\n    setTimeout(() => {\n      const padRec = this.padRect!;\n      const flashlightRec = this.flashlightRect!;\n      const centerX = this.center.x;\n      const centerY = this.center.y;\n\n      const halfRangeX = (padRec.width - flashlightRec.width) / 2;\n      const halfRangeY = (padRec.height - flashlightRec.height) / 2;\n\n      // معکوس فرمول برای به‌دست آوردن dx , dy\n      const dx = -(item.xOffset / this.maxRange()) * halfRangeX;\n      const dy = -(item.yOffset / this.maxRange()) * halfRangeY;\n\n      // موقعیت واقعی چراغ‌قوه\n      const posX = centerX + dx;\n      const posY = centerY + dy;\n\n      this.x.set(posX - flashlightRec.width / 2);\n      this.y.set(posY - flashlightRec.height / 2);\n\n      // زاویه چراغ‌قوه\n      const angleRad = Math.atan2(dy, dx);\n      const angleDeg = angleRad * (180 / Math.PI);\n      if (this.flashlight.nativeElement) {\n        this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;\n      }\n    });\n  }\n\n  close() {}\n}\n","<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DOCUMENT,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostListener,\n  inject,\n  input,\n  Input,\n  OnInit,\n  output,\n  Output,\n  signal,\n  ViewChild,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { formatBoxShadowToCSS, parseBoxShadow, validateColor } from '../../utils/box-shadow-parser';\nimport { getOffsetPosition, OverlayService, WINDOW } from 'ngx-kit/core';\nimport { BoxShadow } from '../../contracts/BoxShadowValue';\nimport { NgxShadowControl } from '../shadow-control/shadow-control';\n\n@Component({\n  selector: 'ngx-box-shadow',\n  templateUrl: './box-shadow.html',\n  styleUrls: ['./box-shadow.scss'],\n  standalone: true,\n  imports: [CommonModule, FormsModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxShadowBox),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxShadowBox implements OnInit, AfterViewInit {\n  protected readonly maxRange = input(25);\n  protected readonly shadowChange = output<string>();\n\n  selectedIndex = signal(-1);\n\n  shadows = signal<BoxShadow[]>([]);\n\n  result = '';\n  protected readonly doc = inject(DOCUMENT);\n  protected readonly win = inject(WINDOW);\n  protected readonly overlay = inject(OverlayService);\n  protected readonly chdr = inject(ChangeDetectorRef);\n\n  isDisabled: boolean = false;\n  onChange = (_: string) => {};\n  onTouched = () => {};\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(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n  constructor() {}\n  ngOnInit() {}\n  ngAfterViewInit() {}\n  writeValue(val: string): void {\n    if (!val) {\n      this.shadows.set([]);\n      this.result = '';\n      return;\n    }\n    this.shadows.set(parseBoxShadow(val));\n    this.result = formatBoxShadowToCSS(this.shadows());\n    // if (val !== this.result) {\n    //   this.update();\n    // }\n  }\n\n  addShadow(container: HTMLElement) {\n    this.shadows.update((u) => [\n      ...u,\n      {\n        xOffset: 0,\n        yOffset: 0,\n        blurRadius: 10,\n        spreadRadius: 0,\n        color: 'rgba(0, 0, 0, 0.5)',\n        unit: 'px',\n        inset: false,\n      },\n    ]);\n    this.update();\n    setTimeout(() => {\n      container.scrollTop = container.scrollHeight;\n    }, 100);\n  }\n\n  setShadow(el: HTMLElement, item: BoxShadow, index: number) {\n    this.selectedIndex.set(index);\n    this.overlay.open({\n      component: NgxShadowControl,\n      anchor: el,\n      configure: (instance, ref) => {\n        ref.componentRef?.setInput('maxRange', this.maxRange());\n        ref.componentRef?.setInput('selectedShadow', item);\n        instance.shadowChange.subscribe((v) => {\n          item = v;\n          this.shadows.update((shadows) => {\n            shadows[this.selectedIndex()] = item;\n            return shadows;\n          });\n          this.chdr.markForCheck();\n          this.update();\n        });\n      },\n      onClosed: () => {\n        this.selectedIndex.set(-1);\n      },\n    });\n  }\n\n  removeShadow(ev: Event, index: number) {\n    ev.stopPropagation();\n\n    this.shadows().splice(index, 1);\n    this.update();\n  }\n\n  private update() {\n    this.result = formatBoxShadowToCSS(this.shadows());\n    this.shadows().forEach((m) => (m.cssValue = formatBoxShadowToCSS([m])));\n    this.onChange(this.result);\n    this.shadowChange.emit(this.result);\n  }\n}\n","<div class=\"\">\n  <button (click)=\"addShadow(list)\" type=\"button\" class=\"action-btn add-btn\">Add</button>\n</div>\n<div class=\"list-box\" #list>\n  @for (item of shadows(); let i = $index; track i) {\n    <button\n      type=\"button\"\n      class=\"list-item\"\n      [class.active]=\"i == selectedIndex()\"\n      #el\n      (click)=\"setShadow(el, item, i)\">\n      <span>{{ item.cssValue }}</span>\n      <button (click)=\"removeShadow($event, i)\" type=\"button\" class=\"action-btn\">\n        <svg fill=\"currentColor\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </button>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;AAGM,SAAU,cAAc,CAAC,QAAgB,EAAA;IAC7C,IAAI,CAAC,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAC7C,QAAA,OAAO,EAAE;IACX;;IAEA,MAAM,OAAO,GAAG;SACb,KAAK,CAAC,eAAe;SACrB,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,EAAE;SAC7B,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC;IAE7B,MAAM,UAAU,GAAgB,EAAE;IAClC,MAAM,SAAS,GAAG,aAAa;IAC/B,MAAM,WAAW,GAAG,4BAA4B;AAEhD,IAAA,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;AAC5B,QAAA,MAAM,SAAS,GAAc;AAC3B,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,IAAI;AACV,YAAA,QAAQ,EAAE,EAAE;SACb;;QAGD,SAAS,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;;AAG1C,QAAA,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC;QAC3C,IAAI,UAAU,EAAE;AACd,YAAA,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC;QACjC;;QAGA,IAAI,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;;QAGlF,MAAM,OAAO,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE;aACnD,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,EAAE;aAC7B,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO;YAAE;;AAGd,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClC,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI;AACrD,YAAA,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,YAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AACX,gBAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG;YAC1C;AAAO,iBAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AAClB,gBAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG;YAC1C;AAAO,iBAAA,IAAI,CAAC,KAAK,CAAC,EAAE;gBAClB,SAAS,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3D;AAAO,iBAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AAClB,gBAAA,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG;YAC/C;QACF;AACA,QAAA,SAAS,CAAC,QAAQ,GAAG,MAAM;AAC3B,QAAA,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5B;AAEA,IAAA,OAAO,UAAU;AACnB;AAEA;AACM,SAAU,aAAa,CAAC,KAAa,EAAA;IACzC,MAAM,QAAQ,GAAG,qBAAqB;IACtC,MAAM,QAAQ,GAAG,uDAAuD;IACxE,MAAM,QAAQ,GAAG,0CAA0C;AAC3D,IAAA,MAAM,WAAW,GAAG;QAClB,OAAO;QACP,OAAO;QACP,KAAK;QACL,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,QAAQ;;KAET;AAED,IAAA,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE;IACpB,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACxE,QAAA,OAAO,KAAK;IACd;IACA,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,EAAE;AAC7C,QAAA,OAAO,KAAK,CAAC,WAAW,EAAE;IAC5B;IACA,OAAO,kBAAkB,CAAC;AAC5B;AAEA;AACM,SAAU,oBAAoB,CAAC,OAAoB,EAAA;AACvD,IAAA,OAAO;AACJ,SAAA,GAAG,CAAC,CAAC,MAAM,KAAI;QACd,MAAM,KAAK,GAAa,EAAE;AAC1B,QAAA,IAAI,MAAM,CAAC,KAAK,EAAE;AAChB,YAAA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;QACrB;QACA,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,OAAO,CAAA,EAAG,MAAM,CAAC,IAAI,EAAE,EAAE,CAAA,EAAG,MAAM,CAAC,OAAO,CAAA,EAAG,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC;AAChF,QAAA,IAAI,MAAM,CAAC,UAAU,KAAK,SAAS,EAAE;AACnC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,UAAU,CAAA,EAAG,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC;QAClD;AACA,QAAA,IAAI,MAAM,CAAC,YAAY,KAAK,SAAS,EAAE;AACrC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,MAAM,CAAC,YAAY,CAAA,EAAG,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC;QACpD;AACA,QAAA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;AACxB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACxB,IAAA,CAAC;SACA,IAAI,CAAC,IAAI,CAAC;AACf;AAEA;AACA;;;;;;;;;;;AAWE;;MCxGW,gBAAgB,CAAA;IACR,QAAQ,GAAG,KAAK,CAAC,EAAE;iFAAC;IAC9B,cAAc,GAAG,KAAK,CAAC,QAAQ;uFAAa;IAE7C,iBAAiB,GAAY,EAAE;IAC9B,YAAY,GAAG,MAAM,EAAa;AAE3C,IAAA,OAAO;AACP,IAAA,cAAc;IACd,MAAM,GAA6B,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACjD,CAAC,GAAG,MAAM,CAAC,CAAC;0EAAC;IACb,CAAC,GAAG,MAAM,CAAC,CAAC;0EAAC;IACb,UAAU,GAAG,KAAK;AACmB,IAAA,GAAG;AACI,IAAA,UAAU;IAE9C,MAAM,GAAW,CAAC;IAE1B,QAAQ,GAAA;QACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ;IACzD;AAEA,IAAA,UAAU,CAAC,EAA2B,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAC9D,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;IAC/B;AAEA,IAAA,SAAS,CAAC,EAA2B,EAAA;QACnC,EAAE,CAAC,eAAe,EAAE;QACpB,EAAE,CAAC,cAAc,EAAE;QACnB,IAAI,CAAC,yBAAyB,EAAE;AAChC,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAC9D,QAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;IAC/B;AAIA,IAAA,SAAS,CAAC,EAA2B,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;IACzB;AAIA,IAAA,WAAW,CAAC,EAA2B,EAAA;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AACtB,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAC9D,QAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;IAC/B;AAEQ,IAAA,cAAc,CAAC,QAAkC,EAAA;AACvD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAQ;AAC5B,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAe;AAE1C,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAE7B,QAAA,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,OAAO;AAC/B,QAAA,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,OAAO;;QAG/B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC;AACnC,QAAA,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,GAAG,CAAC;QACpC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,GAAG,CAAC;AACnD,QAAA,MAAM,IAAI,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC;QACrC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC;AACrD,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;;AAG3D,QAAA,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC;AAC9C,QAAA,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;;AAG/C,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,IAAI,CAAC;AAC3D,QAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,IAAI,CAAC;AAE7D,QAAA,IAAI,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjD,QAAA,IAAI,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AAEjD,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClF,QAAA,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;;QAGlF,MAAM,QAAQ,GAAG,QAAQ,IAAI,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;AAC3C,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;AACjC,YAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,QAAQ,GAAG,GAAG,MAAM;QAChF;;AAGA,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;YACtB,GAAG,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1C;IAEQ,yBAAyB,GAAA;QAC/B,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,IAAI,CAAC,GAAG;gBAAE;YACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,qBAAqB,EAAE;YAC7D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,EAAE;YAC3E,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACvE,YAAA,IAAI,CAAC,MAAM;gBACT,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC;YACvF,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACd,YAAA,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACf,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,YAAY,CAAC,aAAiC,EAAA;AAC5C,QAAA,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAC9E,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE;YAC5D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;QAC/C;IACF;AAEA,IAAA,eAAe,CAAC,IAAe,EAAA;QAC7B,IAAI,CAAC,yBAAyB,EAAE;QAChC,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAQ;AAC5B,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAe;AAC1C,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAC7B,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAE7B,YAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,IAAI,CAAC;AAC3D,YAAA,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,IAAI,CAAC;;AAG7D,YAAA,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,UAAU;AACzD,YAAA,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,UAAU;;AAGzD,YAAA,MAAM,IAAI,GAAG,OAAO,GAAG,EAAE;AACzB,YAAA,MAAM,IAAI,GAAG,OAAO,GAAG,EAAE;AAEzB,YAAA,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC;AAC1C,YAAA,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;;YAG3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC;YACnC,MAAM,QAAQ,GAAG,QAAQ,IAAI,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;AAC3C,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;AACjC,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,QAAQ,GAAG,GAAG,MAAM;YAChF;AACF,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,KAAK,KAAI;uGAxJE,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,kBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,KAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvB7B,6tKA6JA,EAAA,MAAA,EAAA,CAAA,6gFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxIY,WAAW,ytDAAE,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,wBAAA,EAAA,aAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAEzB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,OAAA,EAGrB,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,6tKAAA,EAAA,MAAA,EAAA,CAAA,6gFAAA,CAAA,EAAA;;sBAepC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAClC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;sBAwBzC,YAAY;uBAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC;;sBAC3C,YAAY;uBAAC,mBAAmB,EAAE,CAAC,QAAQ,CAAC;;sBAK5C,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;sBACpC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;;;ME3B1B,YAAY,CAAA;IACJ,QAAQ,GAAG,KAAK,CAAC,EAAE;iFAAC;IACpB,YAAY,GAAG,MAAM,EAAU;AAElD,IAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC;sFAAC;IAE1B,OAAO,GAAG,MAAM,CAAc,EAAE;gFAAC;IAEjC,MAAM,GAAG,EAAE;AACQ,IAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;AACtB,IAAA,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC;AACpB,IAAA,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC;AAChC,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;IAEnD,UAAU,GAAY,KAAK;AAC3B,IAAA,QAAQ,GAAG,CAAC,CAAS,KAAI,EAAE,CAAC;AAC5B,IAAA,SAAS,GAAG,MAAK,EAAE,CAAC;AAEpB,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU;IAC9B;AACA,IAAA,WAAA,GAAA,EAAe;AACf,IAAA,QAAQ,KAAI;AACZ,IAAA,eAAe,KAAI;AACnB,IAAA,UAAU,CAAC,GAAW,EAAA;QACpB,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;YAChB;QACF;QACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;;;;IAIpD;AAEA,IAAA,SAAS,CAAC,SAAsB,EAAA;QAC9B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;AACzB,YAAA,GAAG,CAAC;AACJ,YAAA;AACE,gBAAA,OAAO,EAAE,CAAC;AACV,gBAAA,OAAO,EAAE,CAAC;AACV,gBAAA,UAAU,EAAE,EAAE;AACd,gBAAA,YAAY,EAAE,CAAC;AACf,gBAAA,KAAK,EAAE,oBAAoB;AAC3B,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACF,SAAA,CAAC;QACF,IAAI,CAAC,MAAM,EAAE;QACb,UAAU,CAAC,MAAK;AACd,YAAA,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY;QAC9C,CAAC,EAAE,GAAG,CAAC;IACT;AAEA,IAAA,SAAS,CAAC,EAAe,EAAE,IAAe,EAAE,KAAa,EAAA;AACvD,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AAChB,YAAA,SAAS,EAAE,gBAAgB;AAC3B,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,SAAS,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAI;AAC3B,gBAAA,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACvD,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,gBAAgB,EAAE,IAAI,CAAC;gBAClD,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI;oBACpC,IAAI,GAAG,CAAC;oBACR,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,KAAI;wBAC9B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,IAAI;AACpC,wBAAA,OAAO,OAAO;AAChB,oBAAA,CAAC,CAAC;AACF,oBAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;oBACxB,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,CAAC,CAAC;YACJ,CAAC;YACD,QAAQ,EAAE,MAAK;gBACb,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;AACF,SAAA,CAAC;IACJ;IAEA,YAAY,CAAC,EAAS,EAAE,KAAa,EAAA;QACnC,EAAE,CAAC,eAAe,EAAE;QAEpB,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,MAAM,EAAE;IACf;IAEQ,MAAM,GAAA;QACZ,IAAI,CAAC,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAClD,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACrC;uGApGW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EATZ;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,YAAY,CAAC;AAC3C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtCH,wgCAqBA,EAAA,MAAA,EAAA,CAAA,y6BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDUY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAUxB,YAAY,EAAA,UAAA,EAAA,CAAA;kBAfxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EAGd,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,WAAW,CAAC,EAAA,SAAA,EACzB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,kBAAkB,CAAC;AAC3C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wgCAAA,EAAA,MAAA,EAAA,CAAA,y6BAAA,CAAA,EAAA;;;AEvCjD;;AAEG;;;;"}
+{"version":3,"file":"ngx-kit-box-shadow.mjs","sources":["../../../projects/libs/box-shadow/utils/box-shadow-parser.ts","../../../projects/libs/box-shadow/components/shadow-control/shadow-control.ts","../../../projects/libs/box-shadow/components/shadow-control/shadow-control.html","../../../projects/libs/box-shadow/components/shadow-list/box-shadow.ts","../../../projects/libs/box-shadow/components/shadow-list/box-shadow.html","../../../projects/libs/box-shadow/ngx-kit-box-shadow.ts"],"sourcesContent":["import { extractCssColors } from 'ngx-kit/core';\nimport  { BoxShadow } from '../contracts/BoxShadowValue';\n\nexport function parseBoxShadow(cssValue: string): BoxShadow[] {\n  if (!cssValue || typeof cssValue !== 'string') {\n    return [];\n  }\n  // Split multiple shadows by comma\n  const shadows = cssValue\n    .split(/,(?![^\\(]*\\))/)\n    .map((shadow) => shadow.trim())\n    .filter((shadow) => shadow);\n\n  const boxShadows: BoxShadow[] = [];\n  const unitRegex = /(px|rem|em)/;\n  const numberRegex = /-?\\d*\\.?\\d*(?:px|rem|em)?/g;\n\n  for (const shadow of shadows) {\n    const boxShadow: BoxShadow = {\n      xOffset: 0,\n      yOffset: 0,\n      color: 'rgba(0, 0, 0, 0)', // Default color\n      unit: 'px', // Default unit\n      cssValue: '',\n    };\n\n    // Check for inset\n    boxShadow.inset = shadow.includes('inset');\n\n    // Extract color\n    const colorMatch = extractCssColors(shadow);\n    if (colorMatch) {\n      boxShadow.color = colorMatch[0];\n    }\n\n    // Remove inset and color to parse numbers\n    let numberString = shadow.replace('inset', '').replace(boxShadow.color, '').trim();\n\n    // Extract numbers\n    const numbers = (numberString.match(numberRegex) ?? [])\n      .map((shadow) => shadow.trim())\n      .filter((shadow) => shadow);\n    if (!numbers) continue;\n\n    // Parse numbers\n    for (let i = 0; i < numbers.length; i++) {\n      const num = parseFloat(numbers[i]);\n      const unit = numbers[i].match(unitRegex)?.[0] || 'px';\n      boxShadow.unit = unit; // Update unit based on first detected unit\n\n      if (i === 0) {\n        boxShadow.xOffset = isNaN(num) ? 0 : num;\n      } else if (i === 1) {\n        boxShadow.yOffset = isNaN(num) ? 0 : num;\n      } else if (i === 2) {\n        boxShadow.blurRadius = isNaN(num) ? 0 : Math.max(0, num); // Blur can't be negative\n      } else if (i === 3) {\n        boxShadow.spreadRadius = isNaN(num) ? 0 : num;\n      }\n    }\n    boxShadow.cssValue = shadow;\n    boxShadows.push(boxShadow);\n  }\n\n  return boxShadows;\n}\n\n// Utility to validate and format color\nexport function validateColor(color: string): string {\n  const hexRegex = /^#[0-9a-fA-F]{3,8}$/;\n  const rgbRegex = /^rgba?\\(\\s*\\d+\\s*,\\s*\\d+\\s*,\\s*\\d+\\s*(,\\s*[\\d.]+)?\\)$/;\n  const hslRegex = /^hsl\\(\\s*\\d+\\s*,\\s*\\d+%\\s*,\\s*\\d+%\\s*\\)$/;\n  const namedColors = [\n    'black',\n    'white',\n    'red',\n    'blue',\n    'green',\n    'yellow',\n    'purple',\n    'orange',\n    // Add more named colors as needed\n  ];\n\n  color = color.trim();\n  if (hexRegex.test(color) || rgbRegex.test(color) || hslRegex.test(color)) {\n    return color;\n  }\n  if (namedColors.includes(color.toLowerCase())) {\n    return color.toLowerCase();\n  }\n  return 'rgba(0, 0, 0, 0)'; // Fallback to transparent\n}\n\n// Utility to format BoxShadow back to CSS string\nexport function formatBoxShadowToCSS(shadows: BoxShadow[]): string {\n  return shadows\n    .map((shadow) => {\n      const parts: string[] = [];\n      if (shadow.inset) {\n        parts.push('inset');\n      }\n      parts.push(`${shadow.xOffset}${shadow.unit}`, `${shadow.yOffset}${shadow.unit}`);\n      if (shadow.blurRadius !== undefined) {\n        parts.push(`${shadow.blurRadius}${shadow.unit}`);\n      }\n      if (shadow.spreadRadius !== undefined) {\n        parts.push(`${shadow.spreadRadius}${shadow.unit}`);\n      }\n      parts.push(shadow.color);\n      return parts.join(' ');\n    })\n    .join(', ');\n}\n\n// Example usage:\n/*\nconst css = \"10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000\";\nconst parsed = parseBoxShadow(css);\nconsole.log(parsed);\n// Output: [\n//   { xOffset: 10, yOffset: 20, blurRadius: 5, spreadRadius: 0, color: \"rgba(0, 0, 0, 0.5)\", unit: \"px\" },\n//   { inset: true, xOffset: -10, yOffset: -20, blurRadius: 10, color: \"#ff0000\", unit: \"px\" }\n// ]\nconst cssString = formatBoxShadowToCSS(parsed);\nconsole.log(cssString);\n// Output: \"10px 20px 5px 0px rgba(0, 0, 0, 0.5), inset -10px -20px 10px #ff0000\"\n*/\n","import {\n  Component,\n  HostListener,\n  input,\n  model,\n  output,\n  signal,\n  ViewChild,\n  ElementRef,\n  OnInit,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BoxShadow } from '../../contracts/BoxShadowValue';\nimport { NgxInputColor } from 'ngx-kit/color-picker';\nimport { formatBoxShadowToCSS } from '../../utils/box-shadow-parser';\nimport { getOffsetPosition } from 'ngx-kit/core';\n\n@Component({\n  selector: 'ngx-shadow-control',\n  templateUrl: './shadow-control.html',\n  styleUrl: './shadow-control.scss',\n  imports: [FormsModule, NgxInputColor],\n})\nexport class NgxShadowControl implements OnInit {\n  protected readonly maxRange = input(25);\n  readonly selectedShadow = model.required<BoxShadow>();\n\n  private _previousCssValue?: string = '';\n  readonly shadowChange = output<BoxShadow>();\n\n  padRect?: DOMRect;\n  flashlightRect?: DOMRect;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  x = signal(0);\n  y = signal(0);\n  isDragging = false;\n  @ViewChild('pad', { static: false }) pad!: ElementRef<HTMLDivElement>;\n  @ViewChild('flashlight', { static: false }) flashlight!: ElementRef<SVGSVGElement>;\n\n  private radius: number = 0;\n\n  ngOnInit(): void {\n    this.setXyFromShadow(this.selectedShadow());\n    this._previousCssValue = this.selectedShadow().cssValue;\n  }\n\n  onPadClick(ev: MouseEvent | TouchEvent) {\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.isDragging = true;\n    this.updatePosition(position);\n  }\n\n  dragStart(ev: MouseEvent | TouchEvent) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    this.updateContainerDimensions();\n    this.isDragging = true;\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.updatePosition(position);\n  }\n\n  @HostListener('document:mouseup', ['$event'])\n  @HostListener('document:touchend', ['$event'])\n  onDragEnd(ev: MouseEvent | TouchEvent) {\n    this.isDragging = false;\n  }\n\n  @HostListener('mousemove', ['$event'])\n  @HostListener('touchmove', ['$event'])\n  onMouseMove(ev: MouseEvent | TouchEvent) {\n    if (!this.isDragging) return;\n    const position = getOffsetPosition(ev, this.pad.nativeElement);\n    this.updatePosition(position);\n  }\n\n  private updatePosition(position: { x: number; y: number }) {\n    const padRec = this.padRect!;\n    const flashlightRec = this.flashlightRect!;\n\n    const centerX = this.center.x;\n    const centerY = this.center.y;\n\n    const dx = position.x - centerX;\n    const dy = position.y - centerY;\n\n    // زاویه\n    const angleRad = Math.atan2(dy, dx);\n    const minX = flashlightRec.width / 2;\n    const maxX = padRec.width - flashlightRec.width / 2;\n    const minY = flashlightRec.height / 2;\n    const maxY = padRec.height - flashlightRec.height / 2;\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.set(clampedX - flashlightRec.width / 2);\n    this.y.set(clampedY - flashlightRec.height / 2);\n\n    // ✅ ولی مقدار واقعی shadow رو از موقعیت موس (dx, dy) بگیر\n    const halfRangeX = (padRec.width - flashlightRec.width) / 2;\n    const halfRangeY = (padRec.height - flashlightRec.height) / 2;\n\n    let valueX = (-dx / halfRangeX) * this.maxRange();\n    let valueY = (-dy / halfRangeY) * this.maxRange();\n\n    valueX = Math.round(Math.min(Math.max(valueX, -this.maxRange()), this.maxRange()));\n    valueY = Math.round(Math.min(Math.max(valueY, -this.maxRange()), this.maxRange()));\n\n    // چرخش چراغ قوه\n    const angleDeg = angleRad * (180 / Math.PI);\n    if (this.flashlight.nativeElement) {\n      this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;\n    }\n\n    // آپدیت shadow\n    this.selectedShadow.set({\n      ...this.selectedShadow(),\n      xOffset: valueX,\n      yOffset: valueY,\n    });\n    this.updateShadow(this.selectedShadow());\n  }\n\n  private updateContainerDimensions() {\n    setTimeout(() => {\n      if (!this.pad) return;\n      this.padRect = this.pad.nativeElement.getBoundingClientRect();\n      this.flashlightRect = this.flashlight.nativeElement.getBoundingClientRect();\n      this.center = { x: this.padRect.width / 2, y: this.padRect.height / 2 };\n      this.radius =\n        Math.min(this.padRect.width, this.padRect.height) / 2 - this.flashlightRect.width / 2;\n      this.x.set(0); // Reset to center\n      this.y.set(0);\n    });\n  }\n\n  updateShadow(updatedShadow: Partial<BoxShadow>) {\n    this.selectedShadow().cssValue = formatBoxShadowToCSS([this.selectedShadow()]);\n    this.setXyFromShadow(this.selectedShadow());\n    if (this._previousCssValue != this.selectedShadow().cssValue) {\n      this.shadowChange.emit(this.selectedShadow());\n    }\n  }\n\n  setXyFromShadow(item: BoxShadow) {\n    this.updateContainerDimensions();\n    setTimeout(() => {\n      const padRec = this.padRect!;\n      const flashlightRec = this.flashlightRect!;\n      const centerX = this.center.x;\n      const centerY = this.center.y;\n\n      const halfRangeX = (padRec.width - flashlightRec.width) / 2;\n      const halfRangeY = (padRec.height - flashlightRec.height) / 2;\n\n      // معکوس فرمول برای به‌دست آوردن dx , dy\n      const dx = -(item.xOffset / this.maxRange()) * halfRangeX;\n      const dy = -(item.yOffset / this.maxRange()) * halfRangeY;\n\n      // موقعیت واقعی چراغ‌قوه\n      const posX = centerX + dx;\n      const posY = centerY + dy;\n\n      this.x.set(posX - flashlightRec.width / 2);\n      this.y.set(posY - flashlightRec.height / 2);\n\n      // زاویه چراغ‌قوه\n      const angleRad = Math.atan2(dy, dx);\n      const angleDeg = angleRad * (180 / Math.PI);\n      if (this.flashlight.nativeElement) {\n        this.flashlight.nativeElement.style.transform = `rotate(${angleDeg + 180}deg)`;\n      }\n    });\n  }\n\n  close() {}\n}\n","<div class=\"ngx-shadow-control\">\n  <div\n    class=\"pad-container\"\n    #pad\n    (mousedown)=\"onPadClick($event)\"\n    (touchstart)=\"onPadClick($event)\">\n    <div class=\"card-sample\" [style.boxShadow]=\"selectedShadow().cssValue\"></div>\n    <svg\n      class=\"flashlight-svg\"\n      viewBox=\"0 0 640 512\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      #flashlight\n      [style.left.px]=\"x()\"\n      [style.top.px]=\"y()\"\n      (mousedown)=\"dragStart($event)\"\n      (touchstart)=\"dragStart($event)\">\n      <defs>\n        <style>\n          .fa-secondary {\n            opacity: 0.4;\n          }\n        </style>\n      </defs>\n      <path\n        class=\"fa-primary\"\n        d=\"M607.1 96h-32v320h32c17.62 0 32-14.38 32-32V128C639.1 110.4 625.6 96 607.1 96zM287.1 224h-32c-17.62 0-32 14.38-32 32s14.38 32 32 32h32c17.62 0 32-14.38 32-32S305.6 224 287.1 224z\" />\n      <path\n        class=\"fa-secondary\"\n        d=\"M400.1 149.2L383.1 160H31.1c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h352l16.12 10.75C443.2 391.5 511.1 416 575.1 416V96C511.1 96 443.2 120.5 400.1 149.2zM287.1 288h-32c-17.62 0-32-14.38-32-32s14.38-32 32-32h32c17.62 0 32 14.38 32 32S305.6 288 287.1 288z\" />\n    </svg>\n  </div>\n  <div class=\"pi-btn-group\" role=\"group\">\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHoutside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"false\" />\n    <label class=\"button\" for=\"SHoutside\" title=\"Outside\">Outside</label>\n    <input\n      type=\"radio\"\n      class=\"btn-check\"\n      name=\"showside\"\n      id=\"SHinside\"\n      autocomplete=\"off\"\n      [(ngModel)]=\"selectedShadow().inset\"\n      (ngModelChange)=\"updateShadow({ inset: selectedShadow().inset })\"\n      [value]=\"true\" />\n    <label class=\"button\" for=\"SHinside\" title=\"Inside\">Inside</label>\n  </div>\n  <div class=\"shadow-item\">\n    <table>\n      <tr>\n        <th>\n          <span>X</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().xOffset\"\n              (ngModelChange)=\"updateShadow({ xOffset: selectedShadow().xOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Y</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n            <input\n              type=\"number\"\n              [min]=\"-maxRange()\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().yOffset\"\n              (ngModelChange)=\"updateShadow({ yOffset: selectedShadow().yOffset })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Blur</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().blurRadius\"\n              min=\"0\"\n              (ngModelChange)=\"updateShadow({ blurRadius: selectedShadow().blurRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Spread</span>\n        </th>\n        <td>\n          <div class=\"d-flex\">\n            <input\n              type=\"range\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n            <input\n              type=\"number\"\n              [min]=\"0\"\n              [max]=\"maxRange()\"\n              [(ngModel)]=\"selectedShadow().spreadRadius\"\n              (ngModelChange)=\"updateShadow({ spreadRadius: selectedShadow().spreadRadius })\" />\n          </div>\n        </td>\n      </tr>\n      <tr>\n        <th>\n          <span>Color</span>\n        </th>\n        <td>\n          <input\n            type=\"text\"\n            [(ngModel)]=\"selectedShadow().color\"\n            (ngModelChange)=\"updateShadow({ color: selectedShadow().color })\"\n            ngxInputColor\n            [simpleMode]=\"true\" />\n        </td>\n      </tr>\n    </table>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DOCUMENT,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostListener,\n  inject,\n  input,\n  Input,\n  OnInit,\n  output,\n  Output,\n  signal,\n  ViewChild,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { formatBoxShadowToCSS, parseBoxShadow, validateColor } from '../../utils/box-shadow-parser';\nimport { getOffsetPosition, OverlayService, WINDOW } from 'ngx-kit/core';\nimport { BoxShadow } from '../../contracts/BoxShadowValue';\nimport { NgxShadowControl } from '../shadow-control/shadow-control';\n\n@Component({\n  selector: 'ngx-box-shadow',\n  templateUrl: './box-shadow.html',\n  styleUrls: ['./box-shadow.scss'],\n  standalone: true,\n  imports: [CommonModule, FormsModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxShadowBox),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxShadowBox implements OnInit, AfterViewInit {\n  protected readonly maxRange = input(25);\n  protected readonly shadowChange = output<string>();\n\n  selectedIndex = signal(-1);\n\n  shadows = signal<BoxShadow[]>([]);\n\n  result = '';\n  protected readonly doc = inject(DOCUMENT);\n  protected readonly win = inject(WINDOW);\n  protected readonly overlay = inject(OverlayService);\n  protected readonly chdr = inject(ChangeDetectorRef);\n\n  isDisabled: boolean = false;\n  onChange = (_: string) => {};\n  onTouched = () => {};\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(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n  constructor() {}\n  ngOnInit() {}\n  ngAfterViewInit() {}\n  writeValue(val: string): void {\n    if (!val) {\n      this.shadows.set([]);\n      this.result = '';\n      return;\n    }\n    this.shadows.set(parseBoxShadow(val));\n    this.result = formatBoxShadowToCSS(this.shadows());\n    // if (val !== this.result) {\n    //   this.update();\n    // }\n  }\n\n  addShadow(container: HTMLElement) {\n    this.shadows.update((u) => [\n      ...u,\n      {\n        xOffset: 0,\n        yOffset: 0,\n        blurRadius: 10,\n        spreadRadius: 0,\n        color: 'rgba(0, 0, 0, 0.5)',\n        unit: 'px',\n        inset: false,\n      },\n    ]);\n    this.update();\n    setTimeout(() => {\n      container.scrollTop = container.scrollHeight;\n    }, 100);\n  }\n\n  setShadow(el: HTMLElement, item: BoxShadow, index: number) {\n    this.selectedIndex.set(index);\n    this.overlay.open({\n      component: NgxShadowControl,\n      anchor: el,\n      configure: (instance, ref) => {\n        ref.componentRef?.setInput('maxRange', this.maxRange());\n        ref.componentRef?.setInput('selectedShadow', item);\n        instance.shadowChange.subscribe((v) => {\n          item = v;\n          this.shadows.update((shadows) => {\n            shadows[this.selectedIndex()] = item;\n            return shadows;\n          });\n          this.chdr.markForCheck();\n          this.update();\n        });\n      },\n      onClosed: () => {\n        this.selectedIndex.set(-1);\n      },\n    });\n  }\n\n  removeShadow(ev: Event, index: number) {\n    ev.stopPropagation();\n\n    this.shadows().splice(index, 1);\n    this.update();\n  }\n\n  private update() {\n    this.result = formatBoxShadowToCSS(this.shadows());\n    this.shadows().forEach((m) => (m.cssValue = formatBoxShadowToCSS([m])));\n    this.onChange(this.result);\n    this.shadowChange.emit(this.result);\n  }\n}\n","<div class=\"\">\n  <button (click)=\"addShadow(list)\" type=\"button\" class=\"action-btn add-btn\">Add</button>\n</div>\n<div class=\"list-box\" #list>\n  @for (item of shadows(); let i = $index; track i) {\n    <button\n      type=\"button\"\n      class=\"list-item\"\n      [class.active]=\"i == selectedIndex()\"\n      #el\n      (click)=\"setShadow(el, item, i)\">\n      <span>{{ item.cssValue }}</span>\n      <button (click)=\"removeShadow($event, i)\" type=\"button\" class=\"action-btn\">\n        <svg fill=\"currentColor\" viewBox=\"0 0 320 512\">\n          <path\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </button>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-kit-data-table.mjs

@@ -506,7 +506,7 @@ class NgxTable {
         return this.sorts().find((s) => s.field === column)?.direction ?? null;
     }
     onHeaderClick(field, event) {
-        if (!field.sortable)
+        if (field.sortable === false)
             return;
         const column = field.column;
         const current = this.sorts();
@@ -652,13 +652,13 @@ class NgxTable {
         return inputs;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxTable, isStandalone: true, selector: "ngx-table", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: true, transformFunction: null }, showRecordNumber: { classPropertyName: "showRecordNumber", publicName: "showRecordNumber", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null }, operationWidth: { classPropertyName: "operationWidth", publicName: "operationWidth", isSignal: true, isRequired: false, transformFunction: null }, numWidth: { classPropertyName: "numWidth", publicName: "numWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", lazyLoad: "lazyLoad", sortChange: "sortChange", columnResize: "columnResize" }, host: { classAttribute: "ngx-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: TableCell }], ngImport: i0, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable\"\n              [style.flex]=\"columnFlex(f)\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"columnFlex(f)\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;min-inline-size:0;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxPagination, selector: "ngx-pagination", inputs: ["total", "page", "pageSize", "pageSizeOptions", "siblingCount", "boundaryCount"], outputs: ["pageChange", "pageSizeChange", "paginate"] }, { kind: "directive", type: ColumnResize, selector: "[ngxColumnResize]", inputs: ["ngxColumnResizeWidth", "ngxColumnResizeMin", "ngxColumnResizeMax", "ngxColumnResizeDir"], outputs: ["resizing", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxTable, isStandalone: true, selector: "ngx-table", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: true, transformFunction: null }, showRecordNumber: { classPropertyName: "showRecordNumber", publicName: "showRecordNumber", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null }, operationWidth: { classPropertyName: "operationWidth", publicName: "operationWidth", isSignal: true, isRequired: false, transformFunction: null }, numWidth: { classPropertyName: "numWidth", publicName: "numWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", lazyLoad: "lazyLoad", sortChange: "sortChange", columnResize: "columnResize" }, host: { classAttribute: "ngx-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: TableCell }], ngImport: i0, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable !== false\"\n              [style.flex]=\"columnFlex(f)\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable !== false) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"columnFlex(f)\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;min-inline-size:0;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxPagination, selector: "ngx-pagination", inputs: ["total", "page", "pageSize", "pageSizeOptions", "siblingCount", "boundaryCount"], outputs: ["pageChange", "pageSizeChange", "paginate"] }, { kind: "directive", type: ColumnResize, selector: "[ngxColumnResize]", inputs: ["ngxColumnResizeWidth", "ngxColumnResizeMin", "ngxColumnResizeMax", "ngxColumnResizeDir"], outputs: ["resizing", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxTable, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-table', standalone: true, imports: [CommonModule, NgxPagination, ColumnResize], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-table-host',
-                    }, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable\"\n              [style.flex]=\"columnFlex(f)\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"columnFlex(f)\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;min-inline-size:0;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"] }]
+                    }, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable !== false\"\n              [style.flex]=\"columnFlex(f)\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable !== false) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"columnFlex(f)\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;min-inline-size:0;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: true }] }], showRecordNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRecordNumber", required: false }] }], operations: [{ type: i0.Input, args: [{ isSignal: true, alias: "operations", required: false }] }], operationWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationWidth", required: false }] }], numWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "numWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], cellTemplates: [{
                 type: ContentChildren,
                 args: [TableCell]