@frame-kit/ui-ng 0.1.6 → 0.1.7

package/fesm2022/frame-kit-ui-ng-ui-node-tree.mjs

@@ -1,8 +1,7 @@
 import { CdkDragHandle, CdkDropList, CdkDrag, CdkDragPreview, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, output, computed, HostListener, HostBinding, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ElementRef, contentChild, signal } from '@angular/core';
-import { IconComponent } from '@frame-kit/ui-ng/core/icon';
-import { NgTemplateOutlet } from '@angular/common';
 
 function isDescendantOf(nodeId, ancestorId, childrenMap) {
     const children = childrenMap.get(ancestorId);
@@ -76,6 +75,9 @@ class FkNodeTreeRowComponent {
     showDragHandle = input(false, ...(ngDevMode ? [{ debugName: "showDragHandle" }] : /* istanbul ignore next */ []));
     /** Optional custom template used to render the row content. */
     customTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "customTemplate" }] : /* istanbul ignore next */ []));
+    /** Optional template rendering the row's leading icon (the app owns the icon).
+     *  Receives the node as `$implicit`; render it from `node.icon`. */
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
     // ===== OUTPUTS =====
     /** Fires when the user clicks the expand/collapse chevron. */
     toggleNode = output();
@@ -133,12 +135,12 @@ class FkNodeTreeRowComponent {
         this.toggleNode.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkNodeTreeRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkNodeTreeRowComponent, isStandalone: true, selector: "fk-node-tree-row", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dropPosition: { classPropertyName: "dropPosition", publicName: "dropPosition", isSignal: true, isRequired: false, transformFunction: null }, isDragSource: { classPropertyName: "isDragSource", publicName: "isDragSource", isSignal: true, isRequired: false, transformFunction: null }, showDragHandle: { classPropertyName: "showDragHandle", publicName: "showDragHandle", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleNode: "toggleNode", selectNode: "selectNode" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "this.hostClass", "attr.data-node-id": "this.dataNodeId", "attr.role": "this.role", "attr.aria-level": "this.ariaLevel", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.tabindex": "this.tabindex", "style.padding-left": "this.paddingLeft" } }, ngImport: i0, template: "@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon) {\n      <fk-icon class=\"fk-node-tree-row__icon\" [name]=\"node().icon!\" size=\"sm\" />\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n", styles: [":host{display:block;cursor:pointer;outline:none}.fk-node-tree-row__content{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));transition:background-color .15s ease}.fk-node-tree-row__toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;padding:0;border:none;background:none;color:var(--fk-node-tree-row-toggle-color, var(--fk-color-muted, #8a98a8));cursor:pointer;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-row__toggle:hover{color:var(--fk-node-tree-row-toggle-color-hover, var(--fk-color-text, #1f2d3d));background-color:var(--fk-node-tree-row-toggle-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-node-tree-row__toggle:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-node-tree-row__toggle-spacer{display:inline-block;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0}.fk-node-tree-row__chevron{display:block;transition:transform .15s ease}.fk-node-tree-row__chevron--expanded{transform:rotate(90deg)}.fk-node-tree-row__icon{flex-shrink:0}.fk-node-tree-row__handle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;color:var(--fk-node-tree-row-handle-color, var(--fk-color-muted, #8a98a8));cursor:grab;border-radius:var(--fk-radius-sm, .25rem);transition:color .15s ease}.fk-node-tree-row__handle:hover{color:var(--fk-node-tree-row-handle-color-hover, var(--fk-color-text, #1f2d3d))}.fk-node-tree-row__handle:active{cursor:grabbing}.fk-node-tree-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem))}:host:hover .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-node-tree-row--selected .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-selected, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));color:var(--fk-node-tree-row-color-selected, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-row-font-weight-selected, var(--fk-font-weight-medium, 500))}:host:focus-visible .fk-node-tree-row__content{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host.fk-node-tree-row--drop-inside .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-drop-target, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));outline:2px solid var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));outline-offset:-2px}:host.fk-node-tree-row--drop-before{position:relative}:host.fk-node-tree-row--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--drop-after{position:relative}:host.fk-node-tree-row--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--disabled .fk-node-tree-row__content{opacity:.5}:host.fk-node-tree-row--disabled .fk-node-tree-row__label{font-style:italic}:host.fk-node-tree-row--drag-source{opacity:var(--fk-node-tree-row-drag-source-opacity, .4)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkNodeTreeRowComponent, isStandalone: true, selector: "fk-node-tree-row", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dropPosition: { classPropertyName: "dropPosition", publicName: "dropPosition", isSignal: true, isRequired: false, transformFunction: null }, isDragSource: { classPropertyName: "isDragSource", publicName: "isDragSource", isSignal: true, isRequired: false, transformFunction: null }, showDragHandle: { classPropertyName: "showDragHandle", publicName: "showDragHandle", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleNode: "toggleNode", selectNode: "selectNode" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "this.hostClass", "attr.data-node-id": "this.dataNodeId", "attr.role": "this.role", "attr.aria-level": "this.ariaLevel", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.tabindex": "this.tabindex", "style.padding-left": "this.paddingLeft" } }, ngImport: i0, template: "@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon && iconTemplate(); as tpl) {\n      <span class=\"fk-node-tree-row__icon\">\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: node() }\"\n        />\n      </span>\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n", styles: [":host{display:block;cursor:pointer;outline:none}.fk-node-tree-row__content{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));transition:background-color .15s ease}.fk-node-tree-row__toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;padding:0;border:none;background:none;color:var(--fk-node-tree-row-toggle-color, var(--fk-color-muted, #8a98a8));cursor:pointer;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-row__toggle:hover{color:var(--fk-node-tree-row-toggle-color-hover, var(--fk-color-text, #1f2d3d));background-color:var(--fk-node-tree-row-toggle-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-node-tree-row__toggle:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-node-tree-row__toggle-spacer{display:inline-block;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0}.fk-node-tree-row__chevron{display:block;transition:transform .15s ease}.fk-node-tree-row__chevron--expanded{transform:rotate(90deg)}.fk-node-tree-row__icon{flex-shrink:0}.fk-node-tree-row__handle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;color:var(--fk-node-tree-row-handle-color, var(--fk-color-muted, #8a98a8));cursor:grab;border-radius:var(--fk-radius-sm, .25rem);transition:color .15s ease}.fk-node-tree-row__handle:hover{color:var(--fk-node-tree-row-handle-color-hover, var(--fk-color-text, #1f2d3d))}.fk-node-tree-row__handle:active{cursor:grabbing}.fk-node-tree-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem))}:host:hover .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-node-tree-row--selected .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-selected, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));color:var(--fk-node-tree-row-color-selected, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-row-font-weight-selected, var(--fk-font-weight-medium, 500))}:host:focus-visible .fk-node-tree-row__content{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host.fk-node-tree-row--drop-inside .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-drop-target, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));outline:2px solid var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));outline-offset:-2px}:host.fk-node-tree-row--drop-before{position:relative}:host.fk-node-tree-row--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--drop-after{position:relative}:host.fk-node-tree-row--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--disabled .fk-node-tree-row__content{opacity:.5}:host.fk-node-tree-row--disabled .fk-node-tree-row__label{font-style:italic}:host.fk-node-tree-row--drag-source{opacity:var(--fk-node-tree-row-drag-source-opacity, .4)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkNodeTreeRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-node-tree-row', standalone: true, imports: [NgTemplateOutlet, IconComponent, CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon) {\n      <fk-icon class=\"fk-node-tree-row__icon\" [name]=\"node().icon!\" size=\"sm\" />\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n", styles: [":host{display:block;cursor:pointer;outline:none}.fk-node-tree-row__content{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));transition:background-color .15s ease}.fk-node-tree-row__toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;padding:0;border:none;background:none;color:var(--fk-node-tree-row-toggle-color, var(--fk-color-muted, #8a98a8));cursor:pointer;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-row__toggle:hover{color:var(--fk-node-tree-row-toggle-color-hover, var(--fk-color-text, #1f2d3d));background-color:var(--fk-node-tree-row-toggle-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-node-tree-row__toggle:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-node-tree-row__toggle-spacer{display:inline-block;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0}.fk-node-tree-row__chevron{display:block;transition:transform .15s ease}.fk-node-tree-row__chevron--expanded{transform:rotate(90deg)}.fk-node-tree-row__icon{flex-shrink:0}.fk-node-tree-row__handle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;color:var(--fk-node-tree-row-handle-color, var(--fk-color-muted, #8a98a8));cursor:grab;border-radius:var(--fk-radius-sm, .25rem);transition:color .15s ease}.fk-node-tree-row__handle:hover{color:var(--fk-node-tree-row-handle-color-hover, var(--fk-color-text, #1f2d3d))}.fk-node-tree-row__handle:active{cursor:grabbing}.fk-node-tree-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem))}:host:hover .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-node-tree-row--selected .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-selected, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));color:var(--fk-node-tree-row-color-selected, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-row-font-weight-selected, var(--fk-font-weight-medium, 500))}:host:focus-visible .fk-node-tree-row__content{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host.fk-node-tree-row--drop-inside .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-drop-target, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));outline:2px solid var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));outline-offset:-2px}:host.fk-node-tree-row--drop-before{position:relative}:host.fk-node-tree-row--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--drop-after{position:relative}:host.fk-node-tree-row--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--disabled .fk-node-tree-row__content{opacity:.5}:host.fk-node-tree-row--disabled .fk-node-tree-row__label{font-style:italic}:host.fk-node-tree-row--drag-source{opacity:var(--fk-node-tree-row-drag-source-opacity, .4)}\n"] }]
-        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dropPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropPosition", required: false }] }], isDragSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragSource", required: false }] }], showDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragHandle", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], toggleNode: [{ type: i0.Output, args: ["toggleNode"] }], selectNode: [{ type: i0.Output, args: ["selectNode"] }], hostClass: [{
+            args: [{ selector: 'fk-node-tree-row', standalone: true, imports: [NgTemplateOutlet, CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon && iconTemplate(); as tpl) {\n      <span class=\"fk-node-tree-row__icon\">\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: node() }\"\n        />\n      </span>\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n", styles: [":host{display:block;cursor:pointer;outline:none}.fk-node-tree-row__content{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));transition:background-color .15s ease}.fk-node-tree-row__toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;padding:0;border:none;background:none;color:var(--fk-node-tree-row-toggle-color, var(--fk-color-muted, #8a98a8));cursor:pointer;border-radius:var(--fk-radius-sm, .25rem)}.fk-node-tree-row__toggle:hover{color:var(--fk-node-tree-row-toggle-color-hover, var(--fk-color-text, #1f2d3d));background-color:var(--fk-node-tree-row-toggle-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}.fk-node-tree-row__toggle:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-node-tree-row__toggle-spacer{display:inline-block;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0}.fk-node-tree-row__chevron{display:block;transition:transform .15s ease}.fk-node-tree-row__chevron--expanded{transform:rotate(90deg)}.fk-node-tree-row__icon{flex-shrink:0}.fk-node-tree-row__handle{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-node-tree-row-toggle-size, 1.25rem);height:var(--fk-node-tree-row-toggle-size, 1.25rem);flex-shrink:0;color:var(--fk-node-tree-row-handle-color, var(--fk-color-muted, #8a98a8));cursor:grab;border-radius:var(--fk-radius-sm, .25rem);transition:color .15s ease}.fk-node-tree-row__handle:hover{color:var(--fk-node-tree-row-handle-color-hover, var(--fk-color-text, #1f2d3d))}.fk-node-tree-row__handle:active{cursor:grabbing}.fk-node-tree-row__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem))}:host:hover .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-node-tree-row--selected .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-selected, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));color:var(--fk-node-tree-row-color-selected, var(--fk-color-primary, #0a84ff));font-weight:var(--fk-node-tree-row-font-weight-selected, var(--fk-font-weight-medium, 500))}:host:focus-visible .fk-node-tree-row__content{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host.fk-node-tree-row--drop-inside .fk-node-tree-row__content{background-color:var(--fk-node-tree-row-bg-drop-target, var(--fk-overlay-brand, rgba(10, 132, 255, .18)));outline:2px solid var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));outline-offset:-2px}:host.fk-node-tree-row--drop-before{position:relative}:host.fk-node-tree-row--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--drop-after{position:relative}:host.fk-node-tree-row--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--fk-node-tree-row-border-drop-target, var(--fk-color-primary, #0a84ff));pointer-events:none}:host.fk-node-tree-row--disabled .fk-node-tree-row__content{opacity:.5}:host.fk-node-tree-row--disabled .fk-node-tree-row__label{font-style:italic}:host.fk-node-tree-row--drag-source{opacity:var(--fk-node-tree-row-drag-source-opacity, .4)}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dropPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropPosition", required: false }] }], isDragSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragSource", required: false }] }], showDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragHandle", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], toggleNode: [{ type: i0.Output, args: ["toggleNode"] }], selectNode: [{ type: i0.Output, args: ["selectNode"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], dataNodeId: [{
@@ -191,6 +193,9 @@ class FkNodeTreeComponent {
     selectedNodeId = input(undefined, ...(ngDevMode ? [{ debugName: "selectedNodeId" }] : /* istanbul ignore next */ []));
     /** Controlled set of expanded node IDs; when undefined the tree manages expansion internally. */
     expandedNodeIds = input(undefined, ...(ngDevMode ? [{ debugName: "expandedNodeIds" }] : /* istanbul ignore next */ []));
+    /** Optional template rendering each row's leading icon (the app owns the icon
+     *  system). Receives the node as `$implicit`; render it from `node.icon`. */
+    iconTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
     /** When true, rows can be dragged to reorder or reparent nodes. */
     draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
     /** Optional guard called during drag to determine whether a drop at a given position is allowed. */
@@ -415,19 +420,19 @@ class FkNodeTreeComponent {
         this.clearAutoExpand();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkNodeTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkNodeTreeComponent, isStandalone: true, selector: "fk-node-tree", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, expandedNodeIds: { classPropertyName: "expandedNodeIds", publicName: "expandedNodeIds", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand", nodeDrop: "nodeDrop" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClass" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: FkNodeTreeRowDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon) {\n            <fk-icon [name]=\"flatNode.icon\" size=\"sm\" />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n", styles: [":host{display:block}.fk-node-tree__drag-preview{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-node-tree-drag-preview-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-node-tree-drag-preview-shadow, 0 4px 12px rgba(0, 0, 0, .15));font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fk-node-tree__drag-placeholder{height:2px;background:var(--fk-node-tree-drag-placeholder-bg, var(--fk-color-primary, #0a84ff));border-radius:1px;margin:var(--fk-rhythm-1, .25rem) 0}\n"], dependencies: [{ kind: "component", type: FkNodeTreeRowComponent, selector: "fk-node-tree-row", inputs: ["className", "node", "selected", "dropPosition", "isDragSource", "showDragHandle", "customTemplate"], outputs: ["toggleNode", "selectNode"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkNodeTreeComponent, isStandalone: true, selector: "fk-node-tree", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, expandedNodeIds: { classPropertyName: "expandedNodeIds", publicName: "expandedNodeIds", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand", nodeDrop: "nodeDrop" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClass" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: FkNodeTreeRowDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      [iconTemplate]=\"iconTemplate()\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon && iconTemplate(); as tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: flatNode }\"\n            />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n", styles: [":host{display:block}.fk-node-tree__drag-preview{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-node-tree-drag-preview-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-node-tree-drag-preview-shadow, 0 4px 12px rgba(0, 0, 0, .15));font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fk-node-tree__drag-placeholder{height:2px;background:var(--fk-node-tree-drag-placeholder-bg, var(--fk-color-primary, #0a84ff));border-radius:1px;margin:var(--fk-rhythm-1, .25rem) 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FkNodeTreeRowComponent, selector: "fk-node-tree-row", inputs: ["className", "node", "selected", "dropPosition", "isDragSource", "showDragHandle", "customTemplate", "iconTemplate"], outputs: ["toggleNode", "selectNode"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkNodeTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fk-node-tree', standalone: true, imports: [
+                        NgTemplateOutlet,
                         FkNodeTreeRowComponent,
-                        IconComponent,
                         CdkDropList,
                         CdkDrag,
                         CdkDragPreview,
                         CdkDragPlaceholder,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon) {\n            <fk-icon [name]=\"flatNode.icon\" size=\"sm\" />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n", styles: [":host{display:block}.fk-node-tree__drag-preview{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-node-tree-drag-preview-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-node-tree-drag-preview-shadow, 0 4px 12px rgba(0, 0, 0, .15));font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fk-node-tree__drag-placeholder{height:2px;background:var(--fk-node-tree-drag-placeholder-bg, var(--fk-color-primary, #0a84ff));border-radius:1px;margin:var(--fk-rhythm-1, .25rem) 0}\n"] }]
-        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }], expandedNodeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedNodeIds", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FkNodeTreeRowDirective), { isSignal: true }] }], role: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      [iconTemplate]=\"iconTemplate()\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon && iconTemplate(); as tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: flatNode }\"\n            />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n", styles: [":host{display:block}.fk-node-tree__drag-preview{display:flex;align-items:center;gap:var(--fk-node-tree-row-gap, var(--fk-rhythm-2, .5rem));padding:var(--fk-node-tree-row-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));background:var(--fk-node-tree-drag-preview-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-node-tree-row-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-node-tree-drag-preview-shadow, 0 4px 12px rgba(0, 0, 0, .15));font-size:var(--fk-node-tree-row-font-size, var(--fk-typography-body-font-size, .9375rem));color:var(--fk-node-tree-row-color, var(--fk-color-text, #1f2d3d));max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fk-node-tree__drag-placeholder{height:2px;background:var(--fk-node-tree-drag-placeholder-bg, var(--fk-color-primary, #0a84ff));border-radius:1px;margin:var(--fk-rhythm-1, .25rem) 0}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }], expandedNodeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedNodeIds", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FkNodeTreeRowDirective), { isSignal: true }] }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], hostClass: [{

package/fesm2022/frame-kit-ui-ng-ui-node-tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng-ui-node-tree.mjs","sources":["../../../../packages/ui-ng/ui/node-tree/node-tree.utils.ts","../../../../packages/ui-ng/ui/node-tree/node-tree-row.component.ts","../../../../packages/ui-ng/ui/node-tree/node-tree-row.component.html","../../../../packages/ui-ng/ui/node-tree/node-tree-row.directive.ts","../../../../packages/ui-ng/ui/node-tree/node-tree.component.ts","../../../../packages/ui-ng/ui/node-tree/node-tree.component.html","../../../../packages/ui-ng/ui/node-tree/frame-kit-ui-ng-ui-node-tree.ts"],"sourcesContent":["import { FlatNode, TreeNode } from './node-tree.types';\n\nexport function isDescendantOf(\n  nodeId: string,\n  ancestorId: string,\n  childrenMap: Map<string | null, TreeNode[]>,\n): boolean {\n  const children = childrenMap.get(ancestorId);\n\n  if (!children) {\n    return false;\n  }\n\n  for (const child of children) {\n    if (child.id === nodeId) {\n      return true;\n    }\n\n    if (isDescendantOf(nodeId, child.id, childrenMap)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nexport function buildChildrenMap(\n  nodes: TreeNode[],\n): Map<string | null, TreeNode[]> {\n  const map = new Map<string | null, TreeNode[]>();\n\n  for (const node of nodes) {\n    const key = node.parentId ?? null;\n    const children = map.get(key);\n\n    if (children) {\n      children.push(node);\n    } else {\n      map.set(key, [node]);\n    }\n  }\n\n  return map;\n}\n\nexport function flattenTree(\n  childrenMap: Map<string | null, TreeNode[]>,\n  expandedIds: Set<string>,\n  parentId: string | null = null,\n  level = 0,\n): FlatNode[] {\n  const children = childrenMap.get(parentId);\n\n  if (!children) {\n    return [];\n  }\n\n  const result: FlatNode[] = [];\n\n  for (const node of children) {\n    const expandable = childrenMap.has(node.id);\n    const expanded = expandedIds.has(node.id);\n\n    result.push({\n      id: node.id,\n      label: node.label,\n      icon: node.icon,\n      level,\n      expandable,\n      expanded,\n      parentId: node.parentId,\n      draggable: node.draggable !== false,\n      disabled: node.disabled === true,\n    });\n\n    if (expandable && expanded) {\n      result.push(...flattenTree(childrenMap, expandedIds, node.id, level + 1));\n    }\n  }\n\n  return result;\n}\n","import { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  HostListener,\n  input,\n  output,\n  TemplateRef,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport { DropPosition, FlatNode, NodeTreeRowContext } from './node-tree.types';\n\n@Component({\n  selector: 'fk-node-tree-row',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, CdkDragHandle],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './node-tree-row.component.html',\n  styleUrl: './node-tree-row.component.scss',\n})\nexport class FkNodeTreeRowComponent {\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== INPUTS =====\n  /** Flattened node data including level, expandable state, and label. */\n  readonly node = input.required<FlatNode>();\n  /** Whether this row is the currently selected node. */\n  readonly selected = input(false);\n  /** Current drop position relative to this row during a drag operation. */\n  readonly dropPosition = input<DropPosition | null>(null);\n  /** When true, this row is the one being dragged (applies ghost styling). */\n  readonly isDragSource = input(false);\n  /** When true, renders the CDK drag handle affordance. */\n  readonly showDragHandle = input(false);\n  /** Optional custom template used to render the row content. */\n  readonly customTemplate = input<TemplateRef<NodeTreeRowContext> | undefined>(\n    undefined,\n  );\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks the expand/collapse chevron. */\n  readonly toggleNode = output<void>();\n  /** Fires when the user clicks the row body to select the node. */\n  readonly selectNode = output<void>();\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    const pos = this.dropPosition();\n\n    return [\n      'fk-node-tree-row',\n      this.selected() ? 'fk-node-tree-row--selected' : '',\n      this.node().disabled ? 'fk-node-tree-row--disabled' : '',\n      pos === 'inside' ? 'fk-node-tree-row--drop-inside' : '',\n      pos === 'before' ? 'fk-node-tree-row--drop-before' : '',\n      pos === 'after' ? 'fk-node-tree-row--drop-after' : '',\n      this.isDragSource() ? 'fk-node-tree-row--drag-source' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  readonly templateContext = computed<NodeTreeRowContext>(() => {\n    const n = this.node();\n\n    return { $implicit: n, node: n };\n  });\n\n  // ===== HOST BINDINGS =====\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.data-node-id')\n  get dataNodeId() {\n    return this.node().id;\n  }\n\n  @HostBinding('attr.role')\n  readonly role = 'treeitem';\n\n  @HostBinding('attr.aria-level')\n  get ariaLevel() {\n    return this.node().level + 1;\n  }\n\n  @HostBinding('attr.aria-expanded')\n  get ariaExpanded() {\n    const n = this.node();\n\n    return n.expandable ? n.expanded : null;\n  }\n\n  @HostBinding('attr.aria-selected')\n  get ariaSelected() {\n    return this.selected();\n  }\n\n  @HostBinding('attr.tabindex')\n  readonly tabindex = 0;\n\n  @HostBinding('style.padding-left')\n  get paddingLeft() {\n    return `${this.node().level * 1.5}rem`;\n  }\n\n  // ===== HOST LISTENERS =====\n\n  @HostListener('click')\n  onClick(): void {\n    this.selectNode.emit();\n  }\n\n  // ===== METHODS =====\n\n  onToggleClick(event: MouseEvent): void {\n    event.stopPropagation();\n\n    this.toggleNode.emit();\n  }\n}\n","@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon) {\n      <fk-icon class=\"fk-node-tree-row__icon\" [name]=\"node().icon!\" size=\"sm\" />\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { NodeTreeRowContext } from './node-tree.types';\n\n@Directive({\n  selector: '[fkNodeTreeRow]',\n  standalone: true,\n})\nexport class FkNodeTreeRowDirective {\n  readonly templateRef = inject(TemplateRef<NodeTreeRowContext>);\n}\n","import {\n  CdkDrag,\n  CdkDragMove,\n  CdkDragPlaceholder,\n  CdkDragPreview,\n  CdkDragStart,\n  CdkDropList,\n} from '@angular/cdk/drag-drop';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport {\n  CanDropFn,\n  DropPosition,\n  FlatNode,\n  NodeDropEvent,\n  NodeExpandEvent,\n  TreeNode,\n} from './node-tree.types';\nimport {\n  buildChildrenMap,\n  flattenTree,\n  isDescendantOf,\n} from './node-tree.utils';\nimport { FkNodeTreeRowComponent } from './node-tree-row.component';\nimport { FkNodeTreeRowDirective } from './node-tree-row.directive';\n\n@Component({\n  selector: 'fk-node-tree',\n  standalone: true,\n  imports: [\n    FkNodeTreeRowComponent,\n    IconComponent,\n    CdkDropList,\n    CdkDrag,\n    CdkDragPreview,\n    CdkDragPlaceholder,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './node-tree.component.html',\n  styleUrl: './node-tree.component.scss',\n})\nexport class FkNodeTreeComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== INPUTS =====\n  /** Flat array of `TreeNode` objects that define the hierarchy via `parentId`. */\n  readonly nodes = input.required<TreeNode[]>();\n  /** ID of the currently selected node; drives the selected row highlight. */\n  readonly selectedNodeId = input<string | undefined>(undefined);\n  /** Controlled set of expanded node IDs; when undefined the tree manages expansion internally. */\n  readonly expandedNodeIds = input<string[] | undefined>(undefined);\n  /** When true, rows can be dragged to reorder or reparent nodes. */\n  readonly draggable = input(false);\n  /** Optional guard called during drag to determine whether a drop at a given position is allowed. */\n  readonly canDrop = input<CanDropFn | undefined>(undefined);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks a node row, emitting the original `TreeNode`. */\n  readonly nodeSelect = output<TreeNode>();\n  /** Fires when a node's expanded state changes, emitting the node id and new expanded boolean. */\n  readonly nodeExpand = output<NodeExpandEvent>();\n  /** Fires when the user drops a dragged node onto a target, emitting the drop event. */\n  readonly nodeDrop = output<NodeDropEvent>();\n\n  // ===== CONTENT CHILDREN =====\n  readonly rowTemplate = contentChild(FkNodeTreeRowDirective);\n\n  // ===== INTERNAL STATE =====\n  private readonly internalExpandedIds = signal<Set<string>>(new Set());\n  private readonly dragState = signal<{\n    draggedNodeId: string | null;\n    dropTargetId: string | null;\n    dropPosition: DropPosition | null;\n  }>({ draggedNodeId: null, dropTargetId: null, dropPosition: null });\n  private autoExpandTimer: ReturnType<typeof setTimeout> | null = null;\n  private autoExpandNodeId: string | null = null;\n\n  // ===== COMPUTED =====\n  readonly childrenMap = computed(() => buildChildrenMap(this.nodes()));\n\n  readonly nodeMap = computed(() => {\n    const map = new Map<string, TreeNode>();\n\n    for (const node of this.nodes()) {\n      map.set(node.id, node);\n    }\n\n    return map;\n  });\n\n  readonly effectiveExpandedIds = computed(() => {\n    const controlled = this.expandedNodeIds();\n\n    if (controlled !== undefined) {\n      return new Set(controlled);\n    }\n\n    return this.internalExpandedIds();\n  });\n\n  readonly visibleNodes = computed(() =>\n    flattenTree(this.childrenMap(), this.effectiveExpandedIds()),\n  );\n\n  readonly draggedNodeId = computed(() => this.dragState().draggedNodeId);\n  readonly dropTargetId = computed(() => this.dragState().dropTargetId);\n  readonly dropPosition = computed(() => this.dragState().dropPosition);\n\n  readonly classes = computed(() =>\n    [\n      'fk-node-tree',\n      this.draggedNodeId() ? 'fk-node-tree--dragging' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  // ===== HOST BINDINGS =====\n\n  @HostBinding('attr.role')\n  readonly role = 'tree';\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  // ===== METHODS =====\n\n  onNodeSelect(flatNode: FlatNode): void {\n    const original = this.nodeMap().get(flatNode.id);\n\n    if (original) {\n      this.nodeSelect.emit(original);\n    }\n  }\n\n  onNodeToggle(flatNode: FlatNode): void {\n    const newExpanded = !flatNode.expanded;\n\n    this.nodeExpand.emit({ nodeId: flatNode.id, expanded: newExpanded });\n\n    // Only update internal state when uncontrolled\n    if (this.expandedNodeIds() === undefined) {\n      this.internalExpandedIds.update((prev) => {\n        const next = new Set(prev);\n\n        if (newExpanded) {\n          next.add(flatNode.id);\n        } else {\n          next.delete(flatNode.id);\n        }\n\n        return next;\n      });\n    }\n  }\n\n  onDragStarted(event: CdkDragStart, flatNode: FlatNode): void {\n    this.dragState.set({\n      draggedNodeId: flatNode.id,\n      dropTargetId: null,\n      dropPosition: null,\n    });\n  }\n\n  onDragMoved(event: CdkDragMove): void {\n    const result = this.resolveDropTarget(event.pointerPosition.y);\n    const currentState = this.dragState();\n\n    if (!result) {\n      if (currentState.dropTargetId !== null) {\n        this.dragState.set({\n          draggedNodeId: currentState.draggedNodeId,\n          dropTargetId: null,\n          dropPosition: null,\n        });\n      }\n\n      this.clearAutoExpand();\n\n      return;\n    }\n\n    const canDropFn = this.canDrop();\n\n    if (canDropFn) {\n      const draggedNode = this.visibleNodes().find(\n        (n) => n.id === currentState.draggedNodeId,\n      );\n\n      const targetNode = this.visibleNodes().find(\n        (n) => n.id === result.nodeId,\n      );\n\n      if (draggedNode && targetNode) {\n        const allowed = canDropFn(draggedNode, targetNode, result.position);\n\n        if (!allowed) {\n          if (currentState.dropTargetId !== null) {\n            this.dragState.set({\n              draggedNodeId: currentState.draggedNodeId,\n              dropTargetId: null,\n              dropPosition: null,\n            });\n          }\n\n          this.clearAutoExpand();\n\n          return;\n        }\n      }\n    }\n\n    if (\n      result.nodeId !== currentState.dropTargetId ||\n      result.position !== currentState.dropPosition\n    ) {\n      this.dragState.set({\n        draggedNodeId: currentState.draggedNodeId,\n        dropTargetId: result.nodeId,\n        dropPosition: result.position,\n      });\n    }\n\n    if (result.position === 'inside') {\n      this.startAutoExpand(result.nodeId);\n    } else {\n      this.clearAutoExpand();\n    }\n  }\n\n  onDragEnded(): void {\n    const { draggedNodeId, dropTargetId, dropPosition } = this.dragState();\n\n    if (!draggedNodeId || !dropTargetId || !dropPosition) {\n      this.resetDragState();\n\n      return;\n    }\n\n    // Prevent self-drop\n    if (draggedNodeId === dropTargetId) {\n      this.resetDragState();\n\n      return;\n    }\n\n    // Prevent dropping onto descendant\n    if (isDescendantOf(dropTargetId, draggedNodeId, this.childrenMap())) {\n      this.resetDragState();\n\n      return;\n    }\n\n    const draggedNode = this.nodeMap().get(draggedNodeId);\n    const targetNode = this.nodeMap().get(dropTargetId);\n    const previousParentId = draggedNode?.parentId ?? null;\n\n    let newParentId: string | null;\n\n    if (dropPosition === 'inside') {\n      newParentId = dropTargetId;\n    } else {\n      newParentId = targetNode?.parentId ?? null;\n    }\n\n    this.nodeDrop.emit({\n      nodeId: draggedNodeId,\n      newParentId,\n      previousParentId,\n      position: dropPosition,\n      referenceNodeId: dropTargetId,\n    });\n\n    this.resetDragState();\n  }\n\n  // ===== PRIVATE =====\n\n  private resolveDropTarget(\n    pointerY: number,\n  ): { nodeId: string; position: DropPosition } | null {\n    const rows =\n      this.elementRef.nativeElement.querySelectorAll('fk-node-tree-row');\n\n    const draggedId = this.dragState().draggedNodeId;\n\n    for (let i = 0; i < rows.length; i++) {\n      const rect = rows[i].getBoundingClientRect();\n\n      if (pointerY >= rect.top && pointerY <= rect.bottom) {\n        const nodeId = rows[i].getAttribute('data-node-id');\n\n        if (!nodeId || nodeId === draggedId) {\n          return null;\n        }\n\n        const relativeY = pointerY - rect.top;\n        const height = rect.height;\n\n        let position: DropPosition;\n\n        if (relativeY < height * 0.25) {\n          position = 'before';\n        } else if (relativeY > height * 0.75) {\n          position = 'after';\n        } else {\n          position = 'inside';\n        }\n\n        return { nodeId, position };\n      }\n    }\n\n    return null;\n  }\n\n  private startAutoExpand(nodeId: string): void {\n    if (this.autoExpandTimer && this.autoExpandNodeId === nodeId) {\n      return;\n    }\n\n    this.clearAutoExpand();\n\n    const flatNode = this.visibleNodes().find((n) => n.id === nodeId);\n\n    if (!flatNode || !flatNode.expandable || flatNode.expanded) {\n      return;\n    }\n\n    this.autoExpandNodeId = nodeId;\n\n    this.autoExpandTimer = setTimeout(() => {\n      this.onNodeToggle(flatNode);\n      this.autoExpandTimer = null;\n      this.autoExpandNodeId = null;\n    }, 800);\n  }\n\n  private clearAutoExpand(): void {\n    if (this.autoExpandTimer) {\n      clearTimeout(this.autoExpandTimer);\n\n      this.autoExpandTimer = null;\n    }\n\n    this.autoExpandNodeId = null;\n  }\n\n  private resetDragState(): void {\n    this.dragState.set({\n      draggedNodeId: null,\n      dropTargetId: null,\n      dropPosition: null,\n    });\n\n    this.clearAutoExpand();\n  }\n}\n","<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon) {\n            <fk-icon [name]=\"flatNode.icon\" size=\"sm\" />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame-kit-ui-ng-ui-node-tree.mjs","sources":["../../../../packages/ui-ng/ui/node-tree/node-tree.utils.ts","../../../../packages/ui-ng/ui/node-tree/node-tree-row.component.ts","../../../../packages/ui-ng/ui/node-tree/node-tree-row.component.html","../../../../packages/ui-ng/ui/node-tree/node-tree-row.directive.ts","../../../../packages/ui-ng/ui/node-tree/node-tree.component.ts","../../../../packages/ui-ng/ui/node-tree/node-tree.component.html","../../../../packages/ui-ng/ui/node-tree/frame-kit-ui-ng-ui-node-tree.ts"],"sourcesContent":["import { FlatNode, TreeNode } from './node-tree.types';\n\nexport function isDescendantOf(\n  nodeId: string,\n  ancestorId: string,\n  childrenMap: Map<string | null, TreeNode[]>,\n): boolean {\n  const children = childrenMap.get(ancestorId);\n\n  if (!children) {\n    return false;\n  }\n\n  for (const child of children) {\n    if (child.id === nodeId) {\n      return true;\n    }\n\n    if (isDescendantOf(nodeId, child.id, childrenMap)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nexport function buildChildrenMap(\n  nodes: TreeNode[],\n): Map<string | null, TreeNode[]> {\n  const map = new Map<string | null, TreeNode[]>();\n\n  for (const node of nodes) {\n    const key = node.parentId ?? null;\n    const children = map.get(key);\n\n    if (children) {\n      children.push(node);\n    } else {\n      map.set(key, [node]);\n    }\n  }\n\n  return map;\n}\n\nexport function flattenTree(\n  childrenMap: Map<string | null, TreeNode[]>,\n  expandedIds: Set<string>,\n  parentId: string | null = null,\n  level = 0,\n): FlatNode[] {\n  const children = childrenMap.get(parentId);\n\n  if (!children) {\n    return [];\n  }\n\n  const result: FlatNode[] = [];\n\n  for (const node of children) {\n    const expandable = childrenMap.has(node.id);\n    const expanded = expandedIds.has(node.id);\n\n    result.push({\n      id: node.id,\n      label: node.label,\n      icon: node.icon,\n      level,\n      expandable,\n      expanded,\n      parentId: node.parentId,\n      draggable: node.draggable !== false,\n      disabled: node.disabled === true,\n    });\n\n    if (expandable && expanded) {\n      result.push(...flattenTree(childrenMap, expandedIds, node.id, level + 1));\n    }\n  }\n\n  return result;\n}\n","import { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  HostListener,\n  input,\n  output,\n  TemplateRef,\n} from '@angular/core';\n\nimport { DropPosition, FlatNode, NodeTreeRowContext } from './node-tree.types';\n\n@Component({\n  selector: 'fk-node-tree-row',\n  standalone: true,\n  imports: [NgTemplateOutlet, CdkDragHandle],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './node-tree-row.component.html',\n  styleUrl: './node-tree-row.component.scss',\n})\nexport class FkNodeTreeRowComponent {\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== INPUTS =====\n  /** Flattened node data including level, expandable state, and label. */\n  readonly node = input.required<FlatNode>();\n  /** Whether this row is the currently selected node. */\n  readonly selected = input(false);\n  /** Current drop position relative to this row during a drag operation. */\n  readonly dropPosition = input<DropPosition | null>(null);\n  /** When true, this row is the one being dragged (applies ghost styling). */\n  readonly isDragSource = input(false);\n  /** When true, renders the CDK drag handle affordance. */\n  readonly showDragHandle = input(false);\n  /** Optional custom template used to render the row content. */\n  readonly customTemplate = input<TemplateRef<NodeTreeRowContext> | undefined>(\n    undefined,\n  );\n  /** Optional template rendering the row's leading icon (the app owns the icon).\n   *  Receives the node as `$implicit`; render it from `node.icon`. */\n  readonly iconTemplate = input<\n    TemplateRef<{ $implicit: FlatNode }> | undefined\n  >(undefined);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks the expand/collapse chevron. */\n  readonly toggleNode = output<void>();\n  /** Fires when the user clicks the row body to select the node. */\n  readonly selectNode = output<void>();\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    const pos = this.dropPosition();\n\n    return [\n      'fk-node-tree-row',\n      this.selected() ? 'fk-node-tree-row--selected' : '',\n      this.node().disabled ? 'fk-node-tree-row--disabled' : '',\n      pos === 'inside' ? 'fk-node-tree-row--drop-inside' : '',\n      pos === 'before' ? 'fk-node-tree-row--drop-before' : '',\n      pos === 'after' ? 'fk-node-tree-row--drop-after' : '',\n      this.isDragSource() ? 'fk-node-tree-row--drag-source' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  readonly templateContext = computed<NodeTreeRowContext>(() => {\n    const n = this.node();\n\n    return { $implicit: n, node: n };\n  });\n\n  // ===== HOST BINDINGS =====\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.data-node-id')\n  get dataNodeId() {\n    return this.node().id;\n  }\n\n  @HostBinding('attr.role')\n  readonly role = 'treeitem';\n\n  @HostBinding('attr.aria-level')\n  get ariaLevel() {\n    return this.node().level + 1;\n  }\n\n  @HostBinding('attr.aria-expanded')\n  get ariaExpanded() {\n    const n = this.node();\n\n    return n.expandable ? n.expanded : null;\n  }\n\n  @HostBinding('attr.aria-selected')\n  get ariaSelected() {\n    return this.selected();\n  }\n\n  @HostBinding('attr.tabindex')\n  readonly tabindex = 0;\n\n  @HostBinding('style.padding-left')\n  get paddingLeft() {\n    return `${this.node().level * 1.5}rem`;\n  }\n\n  // ===== HOST LISTENERS =====\n\n  @HostListener('click')\n  onClick(): void {\n    this.selectNode.emit();\n  }\n\n  // ===== METHODS =====\n\n  onToggleClick(event: MouseEvent): void {\n    event.stopPropagation();\n\n    this.toggleNode.emit();\n  }\n}\n","@if (customTemplate(); as tmpl) {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n    <ng-container\n      [ngTemplateOutlet]=\"tmpl\"\n      [ngTemplateOutletContext]=\"templateContext()\"\n    />\n  </div>\n} @else {\n  <div class=\"fk-node-tree-row__content\">\n    @if (showDragHandle()) {\n      <span class=\"fk-node-tree-row__handle\" cdkDragHandle>\n        <svg\n          width=\"10\"\n          height=\"14\"\n          viewBox=\"0 0 10 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"3\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"2\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"7\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"3\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n          <circle cx=\"7\" cy=\"12\" r=\"1.25\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    }\n    @if (node().expandable) {\n      <button\n        class=\"fk-node-tree-row__toggle\"\n        type=\"button\"\n        (click)=\"onToggleClick($event)\"\n        [attr.aria-label]=\"node().expanded ? 'Collapse' : 'Expand'\"\n      >\n        <svg\n          class=\"fk-node-tree-row__chevron\"\n          [class.fk-node-tree-row__chevron--expanded]=\"node().expanded\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 4l4 4-4 4\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    } @else {\n      <span class=\"fk-node-tree-row__toggle-spacer\"></span>\n    }\n\n    @if (node().icon && iconTemplate(); as tpl) {\n      <span class=\"fk-node-tree-row__icon\">\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: node() }\"\n        />\n      </span>\n    }\n\n    <span class=\"fk-node-tree-row__label\">{{ node().label }}</span>\n  </div>\n}\n\n<ng-content />\n","import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { NodeTreeRowContext } from './node-tree.types';\n\n@Directive({\n  selector: '[fkNodeTreeRow]',\n  standalone: true,\n})\nexport class FkNodeTreeRowDirective {\n  readonly templateRef = inject(TemplateRef<NodeTreeRowContext>);\n}\n","import {\n  CdkDrag,\n  CdkDragMove,\n  CdkDragPlaceholder,\n  CdkDragPreview,\n  CdkDragStart,\n  CdkDropList,\n} from '@angular/cdk/drag-drop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  output,\n  signal,\n  TemplateRef,\n} from '@angular/core';\n\nimport {\n  CanDropFn,\n  DropPosition,\n  FlatNode,\n  NodeDropEvent,\n  NodeExpandEvent,\n  TreeNode,\n} from './node-tree.types';\nimport {\n  buildChildrenMap,\n  flattenTree,\n  isDescendantOf,\n} from './node-tree.utils';\nimport { FkNodeTreeRowComponent } from './node-tree-row.component';\nimport { FkNodeTreeRowDirective } from './node-tree-row.directive';\n\n@Component({\n  selector: 'fk-node-tree',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    FkNodeTreeRowComponent,\n    CdkDropList,\n    CdkDrag,\n    CdkDragPreview,\n    CdkDragPlaceholder,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './node-tree.component.html',\n  styleUrl: './node-tree.component.scss',\n})\nexport class FkNodeTreeComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== INPUTS =====\n  /** Flat array of `TreeNode` objects that define the hierarchy via `parentId`. */\n  readonly nodes = input.required<TreeNode[]>();\n  /** ID of the currently selected node; drives the selected row highlight. */\n  readonly selectedNodeId = input<string | undefined>(undefined);\n  /** Controlled set of expanded node IDs; when undefined the tree manages expansion internally. */\n  readonly expandedNodeIds = input<string[] | undefined>(undefined);\n  /** Optional template rendering each row's leading icon (the app owns the icon\n   *  system). Receives the node as `$implicit`; render it from `node.icon`. */\n  readonly iconTemplate = input<\n    TemplateRef<{ $implicit: FlatNode }> | undefined\n  >(undefined);\n  /** When true, rows can be dragged to reorder or reparent nodes. */\n  readonly draggable = input(false);\n  /** Optional guard called during drag to determine whether a drop at a given position is allowed. */\n  readonly canDrop = input<CanDropFn | undefined>(undefined);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user clicks a node row, emitting the original `TreeNode`. */\n  readonly nodeSelect = output<TreeNode>();\n  /** Fires when a node's expanded state changes, emitting the node id and new expanded boolean. */\n  readonly nodeExpand = output<NodeExpandEvent>();\n  /** Fires when the user drops a dragged node onto a target, emitting the drop event. */\n  readonly nodeDrop = output<NodeDropEvent>();\n\n  // ===== CONTENT CHILDREN =====\n  readonly rowTemplate = contentChild(FkNodeTreeRowDirective);\n\n  // ===== INTERNAL STATE =====\n  private readonly internalExpandedIds = signal<Set<string>>(new Set());\n  private readonly dragState = signal<{\n    draggedNodeId: string | null;\n    dropTargetId: string | null;\n    dropPosition: DropPosition | null;\n  }>({ draggedNodeId: null, dropTargetId: null, dropPosition: null });\n  private autoExpandTimer: ReturnType<typeof setTimeout> | null = null;\n  private autoExpandNodeId: string | null = null;\n\n  // ===== COMPUTED =====\n  readonly childrenMap = computed(() => buildChildrenMap(this.nodes()));\n\n  readonly nodeMap = computed(() => {\n    const map = new Map<string, TreeNode>();\n\n    for (const node of this.nodes()) {\n      map.set(node.id, node);\n    }\n\n    return map;\n  });\n\n  readonly effectiveExpandedIds = computed(() => {\n    const controlled = this.expandedNodeIds();\n\n    if (controlled !== undefined) {\n      return new Set(controlled);\n    }\n\n    return this.internalExpandedIds();\n  });\n\n  readonly visibleNodes = computed(() =>\n    flattenTree(this.childrenMap(), this.effectiveExpandedIds()),\n  );\n\n  readonly draggedNodeId = computed(() => this.dragState().draggedNodeId);\n  readonly dropTargetId = computed(() => this.dragState().dropTargetId);\n  readonly dropPosition = computed(() => this.dragState().dropPosition);\n\n  readonly classes = computed(() =>\n    [\n      'fk-node-tree',\n      this.draggedNodeId() ? 'fk-node-tree--dragging' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  // ===== HOST BINDINGS =====\n\n  @HostBinding('attr.role')\n  readonly role = 'tree';\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  // ===== METHODS =====\n\n  onNodeSelect(flatNode: FlatNode): void {\n    const original = this.nodeMap().get(flatNode.id);\n\n    if (original) {\n      this.nodeSelect.emit(original);\n    }\n  }\n\n  onNodeToggle(flatNode: FlatNode): void {\n    const newExpanded = !flatNode.expanded;\n\n    this.nodeExpand.emit({ nodeId: flatNode.id, expanded: newExpanded });\n\n    // Only update internal state when uncontrolled\n    if (this.expandedNodeIds() === undefined) {\n      this.internalExpandedIds.update((prev) => {\n        const next = new Set(prev);\n\n        if (newExpanded) {\n          next.add(flatNode.id);\n        } else {\n          next.delete(flatNode.id);\n        }\n\n        return next;\n      });\n    }\n  }\n\n  onDragStarted(event: CdkDragStart, flatNode: FlatNode): void {\n    this.dragState.set({\n      draggedNodeId: flatNode.id,\n      dropTargetId: null,\n      dropPosition: null,\n    });\n  }\n\n  onDragMoved(event: CdkDragMove): void {\n    const result = this.resolveDropTarget(event.pointerPosition.y);\n    const currentState = this.dragState();\n\n    if (!result) {\n      if (currentState.dropTargetId !== null) {\n        this.dragState.set({\n          draggedNodeId: currentState.draggedNodeId,\n          dropTargetId: null,\n          dropPosition: null,\n        });\n      }\n\n      this.clearAutoExpand();\n\n      return;\n    }\n\n    const canDropFn = this.canDrop();\n\n    if (canDropFn) {\n      const draggedNode = this.visibleNodes().find(\n        (n) => n.id === currentState.draggedNodeId,\n      );\n\n      const targetNode = this.visibleNodes().find(\n        (n) => n.id === result.nodeId,\n      );\n\n      if (draggedNode && targetNode) {\n        const allowed = canDropFn(draggedNode, targetNode, result.position);\n\n        if (!allowed) {\n          if (currentState.dropTargetId !== null) {\n            this.dragState.set({\n              draggedNodeId: currentState.draggedNodeId,\n              dropTargetId: null,\n              dropPosition: null,\n            });\n          }\n\n          this.clearAutoExpand();\n\n          return;\n        }\n      }\n    }\n\n    if (\n      result.nodeId !== currentState.dropTargetId ||\n      result.position !== currentState.dropPosition\n    ) {\n      this.dragState.set({\n        draggedNodeId: currentState.draggedNodeId,\n        dropTargetId: result.nodeId,\n        dropPosition: result.position,\n      });\n    }\n\n    if (result.position === 'inside') {\n      this.startAutoExpand(result.nodeId);\n    } else {\n      this.clearAutoExpand();\n    }\n  }\n\n  onDragEnded(): void {\n    const { draggedNodeId, dropTargetId, dropPosition } = this.dragState();\n\n    if (!draggedNodeId || !dropTargetId || !dropPosition) {\n      this.resetDragState();\n\n      return;\n    }\n\n    // Prevent self-drop\n    if (draggedNodeId === dropTargetId) {\n      this.resetDragState();\n\n      return;\n    }\n\n    // Prevent dropping onto descendant\n    if (isDescendantOf(dropTargetId, draggedNodeId, this.childrenMap())) {\n      this.resetDragState();\n\n      return;\n    }\n\n    const draggedNode = this.nodeMap().get(draggedNodeId);\n    const targetNode = this.nodeMap().get(dropTargetId);\n    const previousParentId = draggedNode?.parentId ?? null;\n\n    let newParentId: string | null;\n\n    if (dropPosition === 'inside') {\n      newParentId = dropTargetId;\n    } else {\n      newParentId = targetNode?.parentId ?? null;\n    }\n\n    this.nodeDrop.emit({\n      nodeId: draggedNodeId,\n      newParentId,\n      previousParentId,\n      position: dropPosition,\n      referenceNodeId: dropTargetId,\n    });\n\n    this.resetDragState();\n  }\n\n  // ===== PRIVATE =====\n\n  private resolveDropTarget(\n    pointerY: number,\n  ): { nodeId: string; position: DropPosition } | null {\n    const rows =\n      this.elementRef.nativeElement.querySelectorAll('fk-node-tree-row');\n\n    const draggedId = this.dragState().draggedNodeId;\n\n    for (let i = 0; i < rows.length; i++) {\n      const rect = rows[i].getBoundingClientRect();\n\n      if (pointerY >= rect.top && pointerY <= rect.bottom) {\n        const nodeId = rows[i].getAttribute('data-node-id');\n\n        if (!nodeId || nodeId === draggedId) {\n          return null;\n        }\n\n        const relativeY = pointerY - rect.top;\n        const height = rect.height;\n\n        let position: DropPosition;\n\n        if (relativeY < height * 0.25) {\n          position = 'before';\n        } else if (relativeY > height * 0.75) {\n          position = 'after';\n        } else {\n          position = 'inside';\n        }\n\n        return { nodeId, position };\n      }\n    }\n\n    return null;\n  }\n\n  private startAutoExpand(nodeId: string): void {\n    if (this.autoExpandTimer && this.autoExpandNodeId === nodeId) {\n      return;\n    }\n\n    this.clearAutoExpand();\n\n    const flatNode = this.visibleNodes().find((n) => n.id === nodeId);\n\n    if (!flatNode || !flatNode.expandable || flatNode.expanded) {\n      return;\n    }\n\n    this.autoExpandNodeId = nodeId;\n\n    this.autoExpandTimer = setTimeout(() => {\n      this.onNodeToggle(flatNode);\n      this.autoExpandTimer = null;\n      this.autoExpandNodeId = null;\n    }, 800);\n  }\n\n  private clearAutoExpand(): void {\n    if (this.autoExpandTimer) {\n      clearTimeout(this.autoExpandTimer);\n\n      this.autoExpandTimer = null;\n    }\n\n    this.autoExpandNodeId = null;\n  }\n\n  private resetDragState(): void {\n    this.dragState.set({\n      draggedNodeId: null,\n      dropTargetId: null,\n      dropPosition: null,\n    });\n\n    this.clearAutoExpand();\n  }\n}\n","<div\n  cdkDropList\n  [cdkDropListDisabled]=\"!draggable()\"\n  [cdkDropListSortingDisabled]=\"true\"\n  [cdkDropListData]=\"visibleNodes()\"\n  class=\"fk-node-tree__list\"\n>\n  @for (flatNode of visibleNodes(); track flatNode.id) {\n    <fk-node-tree-row\n      cdkDrag\n      [cdkDragDisabled]=\"!draggable() || !flatNode.draggable\"\n      [cdkDragData]=\"flatNode\"\n      (cdkDragStarted)=\"onDragStarted($event, flatNode)\"\n      (cdkDragMoved)=\"onDragMoved($event)\"\n      (cdkDragEnded)=\"onDragEnded()\"\n      [node]=\"flatNode\"\n      [selected]=\"flatNode.id === selectedNodeId()\"\n      [dropPosition]=\"flatNode.id === dropTargetId() ? dropPosition() : null\"\n      [isDragSource]=\"flatNode.id === draggedNodeId()\"\n      [showDragHandle]=\"draggable() && flatNode.draggable\"\n      [customTemplate]=\"rowTemplate()?.templateRef\"\n      [iconTemplate]=\"iconTemplate()\"\n      (toggleNode)=\"onNodeToggle(flatNode)\"\n      (selectNode)=\"onNodeSelect(flatNode)\"\n    >\n      <ng-template cdkDragPreview>\n        <div class=\"fk-node-tree__drag-preview\">\n          @if (flatNode.icon && iconTemplate(); as tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: flatNode }\"\n            />\n          }\n          <span>{{ flatNode.label }}</span>\n        </div>\n      </ng-template>\n\n      <ng-template cdkDragPlaceholder>\n        <div class=\"fk-node-tree__drag-placeholder\"></div>\n      </ng-template>\n    </fk-node-tree-row>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;SAEgB,cAAc,CAC5B,MAAc,EACd,UAAkB,EAClB,WAA2C,EAAA;IAE3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC;IAE5C,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;AAC5B,QAAA,IAAI,KAAK,CAAC,EAAE,KAAK,MAAM,EAAE;AACvB,YAAA,OAAO,IAAI;QACb;QAEA,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE;AACjD,YAAA,OAAO,IAAI;QACb;IACF;AAEA,IAAA,OAAO,KAAK;AACd;AAEM,SAAU,gBAAgB,CAC9B,KAAiB,EAAA;AAEjB,IAAA,MAAM,GAAG,GAAG,IAAI,GAAG,EAA6B;AAEhD,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;AACxB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI;QACjC,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;QAE7B,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;QACrB;aAAO;YACL,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;QACtB;IACF;AAEA,IAAA,OAAO,GAAG;AACZ;AAEM,SAAU,WAAW,CACzB,WAA2C,EAC3C,WAAwB,EACxB,QAAA,GAA0B,IAAI,EAC9B,KAAK,GAAG,CAAC,EAAA;IAET,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC;IAE1C,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,EAAE;IACX;IAEA,MAAM,MAAM,GAAe,EAAE;AAE7B,IAAA,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;QAC3B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QAEzC,MAAM,CAAC,IAAI,CAAC;YACV,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK;YACL,UAAU;YACV,QAAQ;YACR,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACnC,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;AACjC,SAAA,CAAC;AAEF,QAAA,IAAI,UAAU,IAAI,QAAQ,EAAE;AAC1B,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QAC3E;IACF;AAEA,IAAA,OAAO,MAAM;AACf;;MC1Da,sBAAsB,CAAA;;AAExB,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;;AAI7B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAY;;AAEjC,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;;AAEvB,IAAA,YAAY,GAAG,KAAK,CAAsB,IAAI,mFAAC;;AAE/C,IAAA,YAAY,GAAG,KAAK,CAAC,KAAK,mFAAC;;AAE3B,IAAA,cAAc,GAAG,KAAK,CAAC,KAAK,qFAAC;;AAE7B,IAAA,cAAc,GAAG,KAAK,CAC7B,SAAS,qFACV;AACD;AACoE;AAC3D,IAAA,YAAY,GAAG,KAAK,CAE3B,SAAS,mFAAC;;;IAIH,UAAU,GAAG,MAAM,EAAQ;;IAE3B,UAAU,GAAG,MAAM,EAAQ;;AAG3B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE;QAE/B,OAAO;YACL,kBAAkB;YAClB,IAAI,CAAC,QAAQ,EAAE,GAAG,4BAA4B,GAAG,EAAE;AACnD,YAAA,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,GAAG,4BAA4B,GAAG,EAAE;YACxD,GAAG,KAAK,QAAQ,GAAG,+BAA+B,GAAG,EAAE;YACvD,GAAG,KAAK,QAAQ,GAAG,+BAA+B,GAAG,EAAE;YACvD,GAAG,KAAK,OAAO,GAAG,8BAA8B,GAAG,EAAE;YACrD,IAAI,CAAC,YAAY,EAAE,GAAG,+BAA+B,GAAG,EAAE;YAC1D,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEO,IAAA,eAAe,GAAG,QAAQ,CAAqB,MAAK;AAC3D,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QAErB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;AAClC,IAAA,CAAC,sFAAC;;AAIF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE;IACvB;IAGS,IAAI,GAAG,UAAU;AAE1B,IAAA,IACI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC;IAC9B;AAEA,IAAA,IACI,YAAY,GAAA;AACd,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;AAErB,QAAA,OAAO,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI;IACzC;AAEA,IAAA,IACI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE;IACxB;IAGS,QAAQ,GAAG,CAAC;AAErB,IAAA,IACI,WAAW,GAAA;QACb,OAAO,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GAAG,CAAA,GAAA,CAAK;IACxC;;IAKA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;IACxB;;AAIA,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC7B,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;IACxB;uGA5GW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,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,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBnC,21HAsHA,EAAA,MAAA,EAAA,CAAA,0xHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDpGY,gBAAgB,oJAAE,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK9B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAA,eAAA,EACzB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,21HAAA,EAAA,MAAA,EAAA,CAAA,0xHAAA,CAAA,EAAA;;sBA6D9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,mBAAmB;;sBAK/B,WAAW;uBAAC,WAAW;;sBAGvB,WAAW;uBAAC,iBAAiB;;sBAK7B,WAAW;uBAAC,oBAAoB;;sBAOhC,WAAW;uBAAC,oBAAoB;;sBAKhC,WAAW;uBAAC,eAAe;;sBAG3B,WAAW;uBAAC,oBAAoB;;sBAOhC,YAAY;uBAAC,OAAO;;;MEhHV,sBAAsB,CAAA;AACxB,IAAA,WAAW,GAAG,MAAM,EAAC,WAA+B,EAAC;uGADnD,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;MC+CY,mBAAmB,CAAA;AACb,IAAA,UAAU,GAAG,MAAM,EAAC,UAAuB,EAAC;;AAGpD,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;;AAI7B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAc;;AAEpC,IAAA,cAAc,GAAG,KAAK,CAAqB,SAAS,qFAAC;;AAErD,IAAA,eAAe,GAAG,KAAK,CAAuB,SAAS,sFAAC;AACjE;AAC6E;AACpE,IAAA,YAAY,GAAG,KAAK,CAE3B,SAAS,mFAAC;;AAEH,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,gFAAC;;AAExB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;;;IAIjD,UAAU,GAAG,MAAM,EAAY;;IAE/B,UAAU,GAAG,MAAM,EAAmB;;IAEtC,QAAQ,GAAG,MAAM,EAAiB;;AAGlC,IAAA,WAAW,GAAG,YAAY,CAAC,sBAAsB,kFAAC;;AAG1C,IAAA,mBAAmB,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,0FAAC;AACpD,IAAA,SAAS,GAAG,MAAM,CAIhC,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,gFAAC;IAC3D,eAAe,GAAyC,IAAI;IAC5D,gBAAgB,GAAkB,IAAI;;AAGrC,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,kFAAC;AAE5D,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,MAAM,GAAG,GAAG,IAAI,GAAG,EAAoB;QAEvC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;YAC/B,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC;QACxB;AAEA,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,8EAAC;AAEO,IAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE;AAEzC,QAAA,IAAI,UAAU,KAAK,SAAS,EAAE;AAC5B,YAAA,OAAO,IAAI,GAAG,CAAC,UAAU,CAAC;QAC5B;AAEA,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;AACnC,IAAA,CAAC,2FAAC;AAEO,IAAA,YAAY,GAAG,QAAQ,CAAC,MAC/B,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC,mFAC7D;AAEQ,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,oFAAC;AAC9D,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,YAAY,mFAAC;AAC5D,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,YAAY,mFAAC;AAE5D,IAAA,OAAO,GAAG,QAAQ,CAAC,MAC1B;QACE,cAAc;QACd,IAAI,CAAC,aAAa,EAAE,GAAG,wBAAwB,GAAG,EAAE;QACpD,IAAI,CAAC,SAAS,EAAE;AACjB;SACE,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACb;;IAKQ,IAAI,GAAG,MAAM;AAEtB,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;;AAIA,IAAA,YAAY,CAAC,QAAkB,EAAA;AAC7B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;QAEhD,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChC;IACF;AAEA,IAAA,YAAY,CAAC,QAAkB,EAAA;AAC7B,QAAA,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC,QAAQ;AAEtC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAGpE,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE,KAAK,SAAS,EAAE;YACxC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,IAAI,KAAI;AACvC,gBAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC;gBAE1B,IAAI,WAAW,EAAE;AACf,oBAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvB;qBAAO;AACL,oBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1B;AAEA,gBAAA,OAAO,IAAI;AACb,YAAA,CAAC,CAAC;QACJ;IACF;IAEA,aAAa,CAAC,KAAmB,EAAE,QAAkB,EAAA;AACnD,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;YACjB,aAAa,EAAE,QAAQ,CAAC,EAAE;AAC1B,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;AAC9D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE;QAErC,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,IAAI,YAAY,CAAC,YAAY,KAAK,IAAI,EAAE;AACtC,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;oBACjB,aAAa,EAAE,YAAY,CAAC,aAAa;AACzC,oBAAA,YAAY,EAAE,IAAI;AAClB,oBAAA,YAAY,EAAE,IAAI;AACnB,iBAAA,CAAC;YACJ;YAEA,IAAI,CAAC,eAAe,EAAE;YAEtB;QACF;AAEA,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE;QAEhC,IAAI,SAAS,EAAE;YACb,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAC1C,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,YAAY,CAAC,aAAa,CAC3C;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CACzC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,MAAM,CAC9B;AAED,YAAA,IAAI,WAAW,IAAI,UAAU,EAAE;AAC7B,gBAAA,MAAM,OAAO,GAAG,SAAS,CAAC,WAAW,EAAE,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC;gBAEnE,IAAI,CAAC,OAAO,EAAE;AACZ,oBAAA,IAAI,YAAY,CAAC,YAAY,KAAK,IAAI,EAAE;AACtC,wBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;4BACjB,aAAa,EAAE,YAAY,CAAC,aAAa;AACzC,4BAAA,YAAY,EAAE,IAAI;AAClB,4BAAA,YAAY,EAAE,IAAI;AACnB,yBAAA,CAAC;oBACJ;oBAEA,IAAI,CAAC,eAAe,EAAE;oBAEtB;gBACF;YACF;QACF;AAEA,QAAA,IACE,MAAM,CAAC,MAAM,KAAK,YAAY,CAAC,YAAY;AAC3C,YAAA,MAAM,CAAC,QAAQ,KAAK,YAAY,CAAC,YAAY,EAC7C;AACA,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;gBACjB,aAAa,EAAE,YAAY,CAAC,aAAa;gBACzC,YAAY,EAAE,MAAM,CAAC,MAAM;gBAC3B,YAAY,EAAE,MAAM,CAAC,QAAQ;AAC9B,aAAA,CAAC;QACJ;AAEA,QAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC;QACrC;aAAO;YACL,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;IAEA,WAAW,GAAA;AACT,QAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;QAEtE,IAAI,CAAC,aAAa,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,EAAE;YACpD,IAAI,CAAC,cAAc,EAAE;YAErB;QACF;;AAGA,QAAA,IAAI,aAAa,KAAK,YAAY,EAAE;YAClC,IAAI,CAAC,cAAc,EAAE;YAErB;QACF;;AAGA,QAAA,IAAI,cAAc,CAAC,YAAY,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE;YACnE,IAAI,CAAC,cAAc,EAAE;YAErB;QACF;QAEA,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,aAAa,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC;AACnD,QAAA,MAAM,gBAAgB,GAAG,WAAW,EAAE,QAAQ,IAAI,IAAI;AAEtD,QAAA,IAAI,WAA0B;AAE9B,QAAA,IAAI,YAAY,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG,YAAY;QAC5B;aAAO;AACL,YAAA,WAAW,GAAG,UAAU,EAAE,QAAQ,IAAI,IAAI;QAC5C;AAEA,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,MAAM,EAAE,aAAa;YACrB,WAAW;YACX,gBAAgB;AAChB,YAAA,QAAQ,EAAE,YAAY;AACtB,YAAA,eAAe,EAAE,YAAY;AAC9B,SAAA,CAAC;QAEF,IAAI,CAAC,cAAc,EAAE;IACvB;;AAIQ,IAAA,iBAAiB,CACvB,QAAgB,EAAA;AAEhB,QAAA,MAAM,IAAI,GACR,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;QAEpE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa;AAEhD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACpC,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE;AAE5C,YAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;gBACnD,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC;AAEnD,gBAAA,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,SAAS,EAAE;AACnC,oBAAA,OAAO,IAAI;gBACb;AAEA,gBAAA,MAAM,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG;AACrC,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;AAE1B,gBAAA,IAAI,QAAsB;AAE1B,gBAAA,IAAI,SAAS,GAAG,MAAM,GAAG,IAAI,EAAE;oBAC7B,QAAQ,GAAG,QAAQ;gBACrB;AAAO,qBAAA,IAAI,SAAS,GAAG,MAAM,GAAG,IAAI,EAAE;oBACpC,QAAQ,GAAG,OAAO;gBACpB;qBAAO;oBACL,QAAQ,GAAG,QAAQ;gBACrB;AAEA,gBAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE;YAC7B;QACF;AAEA,QAAA,OAAO,IAAI;IACb;AAEQ,IAAA,eAAe,CAAC,MAAc,EAAA;QACpC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,KAAK,MAAM,EAAE;YAC5D;QACF;QAEA,IAAI,CAAC,eAAe,EAAE;QAEtB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC;AAEjE,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,QAAQ,CAAC,QAAQ,EAAE;YAC1D;QACF;AAEA,QAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM;AAE9B,QAAA,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,MAAK;AACrC,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;AAC3B,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;QAC9B,CAAC,EAAE,GAAG,CAAC;IACT;IAEQ,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;AAElC,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;QAC7B;AAEA,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;IAC9B;IAEQ,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;AACjB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE;IACxB;uGAtUW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,WAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAgCM,sBAAsB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtF5D,2hDA2CA,i7BDAI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,sBAAsB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,WAAW,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,4BAAA,EAAA,2BAAA,EAAA,0BAAA,EAAA,+BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,sBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,cAAc,uGACd,kBAAkB,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMT,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAf/B,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP;wBACP,gBAAgB;wBAChB,sBAAsB;wBACtB,WAAW;wBACX,OAAO;wBACP,cAAc;wBACd,kBAAkB;qBACnB,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2hDAAA,EAAA,MAAA,EAAA,CAAA,y3BAAA,CAAA,EAAA;o8BAoCX,sBAAsB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA;sBAuDzD,WAAW;uBAAC,WAAW;;sBAGvB,WAAW;uBAAC,OAAO;;;AEhJtB;;AAEG;;;;"}

package/fesm2022/frame-kit-ui-ng-ui-pagination.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { input, output, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import { IconComponent } from '@frame-kit/ui-ng/core/icon';
 
 let nextPaginationId = 0;
 class PaginationComponent {
@@ -86,11 +85,11 @@ class PaginationComponent {
         this.pageChange.emit({ page: 1, take: newTake });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginationComponent, isStandalone: true, selector: "fk-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, take: { classPropertyName: "take", publicName: "take", isSignal: true, isRequired: true, transformFunction: null }, itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PaginationComponent, isStandalone: true, selector: "fk-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, take: { classPropertyName: "take", publicName: "take", isSignal: true, isRequired: true, transformFunction: null }, itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M5.5 2L2.5 5L5.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M8.5 2L5.5 5L8.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4.5 2L7.5 5L4.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M1.5 2L4.5 5L1.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-pagination', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\n"] }]
+            args: [{ selector: 'fk-pagination', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} \u2013 {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M5.5 2L2.5 5L5.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M8.5 2L5.5 5L8.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4.5 2L7.5 5L4.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M1.5 2L4.5 5L1.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-pagination-gap, var(--fk-rhythm-4, 1rem));padding:var(--fk-pagination-padding, var(--fk-rhythm-3, .75rem)) var(--fk-pagination-padding-inline, var(--fk-rhythm-4, 1rem));font-family:var(--fk-pagination-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial));font-size:var(--fk-pagination-font-size, var(--fk-typography-small-font-size, .8125rem));color:var(--fk-pagination-color, var(--fk-color-muted, #8a98a8));border-top:var(--fk-pagination-border-width, 0) solid var(--fk-pagination-border-color, var(--fk-color-border, #d9e2ee))}.fk-pagination__summary{white-space:nowrap}.fk-pagination__controls{display:flex;align-items:center;gap:var(--fk-pagination-controls-gap, var(--fk-rhythm-4, 1rem))}.fk-pagination__page-size{display:flex;align-items:center;gap:var(--fk-rhythm-2, .5rem)}.fk-pagination__page-size-label{white-space:nowrap;color:var(--fk-pagination-label-color, var(--fk-color-muted, #8a98a8))}.fk-pagination__page-size-select{padding:var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-right, 1.25rem) var(--fk-pagination-select-padding-block, var(--fk-rhythm-1, .25rem)) var(--fk-pagination-select-padding-left, var(--fk-rhythm-2, .5rem));font-size:inherit;font-family:inherit;color:var(--fk-pagination-select-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-select-bg, var(--fk-color-surface, #ffffff)) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat right var(--fk-pagination-select-chevron-offset, .375rem) center;appearance:none;border:1px solid var(--fk-pagination-select-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-select-border-radius, var(--fk-radius-md, .375rem));cursor:pointer}.fk-pagination__page-size-select:focus{outline:none;border-color:var(--fk-pagination-select-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-select-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__nav{display:flex;align-items:center;gap:var(--fk-pagination-nav-gap, var(--fk-rhythm-1, .25rem))}.fk-pagination__page-info{min-width:var(--fk-pagination-page-info-min-width, 3rem);text-align:center;white-space:nowrap;color:var(--fk-pagination-page-info-color, var(--fk-color-text, #1f2d3d))}.fk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--fk-pagination-btn-size, 2rem);height:var(--fk-pagination-btn-size, 2rem);padding:0;color:var(--fk-pagination-btn-color, var(--fk-color-text, #1f2d3d));background:var(--fk-pagination-btn-bg, none);border:1px solid var(--fk-pagination-btn-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-pagination-btn-border-radius, var(--fk-radius-md, .375rem));cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.fk-pagination__btn:hover:not(:disabled){background-color:var(--fk-pagination-btn-bg-hover, var(--fk-color-surface-hover, #f5f7fa));border-color:var(--fk-pagination-btn-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-pagination__btn:disabled{opacity:var(--fk-pagination-btn-disabled-opacity, var(--fk-input-disabled-opacity, .4));cursor:not-allowed}.fk-pagination__btn:focus-visible{outline:none;border-color:var(--fk-pagination-btn-focus-border-color, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-pagination-btn-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-pagination__arrow{width:var(--fk-pagination-arrow-size, .625rem);height:var(--fk-pagination-arrow-size, .625rem)}\n"] }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], take: [{ type: i0.Input, args: [{ isSignal: true, alias: "take", required: true }] }], itemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCount", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/frame-kit-ui-ng-ui-pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-kit-ui-ng-ui-pagination.mjs","sources":["../../../../packages/ui-ng/ui/pagination/pagination.component.ts","../../../../packages/ui-ng/ui/pagination/pagination.component.html","../../../../packages/ui-ng/ui/pagination/frame-kit-ui-ng-ui-pagination.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\n\nimport { IconComponent } from '@frame-kit/ui-ng/core/icon';\nimport type { PageChangeEvent } from './pagination.types';\n\nlet nextPaginationId = 0;\n\n@Component({\n  selector: 'fk-pagination',\n  standalone: true,\n  imports: [IconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n  // ===== INPUTS =====\n  /** Current 1-based page number. */\n  readonly page = input.required<number>();\n  /** Number of items shown per page (the page size). */\n  readonly take = input.required<number>();\n  /** Total count of items across all pages used to compute `pageCount`. */\n  readonly itemCount = input.required<number>();\n  /** Available page-size values shown in the per-page selector. */\n  readonly pageSizeOptions = input<number[]>([10, 20, 50, 100]);\n  /** When true, renders first-page and last-page navigation buttons. */\n  readonly showFirstLast = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user navigates to a new page or changes the page size, emitting the new page and take. */\n  readonly pageChange = output<PageChangeEvent>();\n\n  // ===== INTERNAL =====\n  readonly selectId = `fk-pagination-take-${nextPaginationId++}`;\n\n  // ===== COMPUTED =====\n  /** Always >= 1. Empty datasets show \"1 / 1\" rather than \"1 / 0\". */\n  readonly pageCount = computed(() => {\n    const count = this.itemCount();\n    const size = this.take();\n\n    return Math.ceil(count / size) || 1;\n  });\n\n  readonly hasPreviousPage = computed(() => this.page() > 1);\n\n  readonly hasNextPage = computed(() => this.page() < this.pageCount());\n\n  readonly rangeStart = computed(() => {\n    const count = this.itemCount();\n\n    if (count === 0) {\n      return 0;\n    }\n\n    return (this.page() - 1) * this.take() + 1;\n  });\n\n  readonly rangeEnd = computed(() => {\n    return Math.min(this.page() * this.take(), this.itemCount());\n  });\n\n  readonly classes = computed(() => {\n    return ['fk-pagination', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n\n  // ===== ACTIONS =====\n\n  /** Navigates to the first page if the current page is not already the first. */\n  goToFirst(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the previous page if one exists. */\n  goToPrevious(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: this.page() - 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the next page if one exists. */\n  goToNext(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.page() + 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the last page if the current page is not already the last. */\n  goToLast(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.pageCount(), take: this.take() });\n    }\n  }\n\n  onPageSizeChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    const newTake = Number(select.value);\n\n    this.pageChange.emit({ page: 1, take: newTake });\n  }\n}\n","<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} – {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <fk-icon name=\"circleHalfArrowLeftFill\" size=\"sm\" />\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <fk-icon name=\"circleHalfArrowRightFill\" size=\"sm\" />\n      </button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame-kit-ui-ng-ui-pagination.mjs","sources":["../../../../packages/ui-ng/ui/pagination/pagination.component.ts","../../../../packages/ui-ng/ui/pagination/pagination.component.html","../../../../packages/ui-ng/ui/pagination/frame-kit-ui-ng-ui-pagination.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\n\nimport type { PageChangeEvent } from './pagination.types';\n\nlet nextPaginationId = 0;\n\n@Component({\n  selector: 'fk-pagination',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n  // ===== INPUTS =====\n  /** Current 1-based page number. */\n  readonly page = input.required<number>();\n  /** Number of items shown per page (the page size). */\n  readonly take = input.required<number>();\n  /** Total count of items across all pages used to compute `pageCount`. */\n  readonly itemCount = input.required<number>();\n  /** Available page-size values shown in the per-page selector. */\n  readonly pageSizeOptions = input<number[]>([10, 20, 50, 100]);\n  /** When true, renders first-page and last-page navigation buttons. */\n  readonly showFirstLast = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires when the user navigates to a new page or changes the page size, emitting the new page and take. */\n  readonly pageChange = output<PageChangeEvent>();\n\n  // ===== INTERNAL =====\n  readonly selectId = `fk-pagination-take-${nextPaginationId++}`;\n\n  // ===== COMPUTED =====\n  /** Always >= 1. Empty datasets show \"1 / 1\" rather than \"1 / 0\". */\n  readonly pageCount = computed(() => {\n    const count = this.itemCount();\n    const size = this.take();\n\n    return Math.ceil(count / size) || 1;\n  });\n\n  readonly hasPreviousPage = computed(() => this.page() > 1);\n\n  readonly hasNextPage = computed(() => this.page() < this.pageCount());\n\n  readonly rangeStart = computed(() => {\n    const count = this.itemCount();\n\n    if (count === 0) {\n      return 0;\n    }\n\n    return (this.page() - 1) * this.take() + 1;\n  });\n\n  readonly rangeEnd = computed(() => {\n    return Math.min(this.page() * this.take(), this.itemCount());\n  });\n\n  readonly classes = computed(() => {\n    return ['fk-pagination', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n\n  // ===== ACTIONS =====\n\n  /** Navigates to the first page if the current page is not already the first. */\n  goToFirst(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the previous page if one exists. */\n  goToPrevious(): void {\n    if (this.hasPreviousPage()) {\n      this.pageChange.emit({ page: this.page() - 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the next page if one exists. */\n  goToNext(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.page() + 1, take: this.take() });\n    }\n  }\n\n  /** Navigates to the last page if the current page is not already the last. */\n  goToLast(): void {\n    if (this.hasNextPage()) {\n      this.pageChange.emit({ page: this.pageCount(), take: this.take() });\n    }\n  }\n\n  onPageSizeChange(event: Event): void {\n    const select = event.target as HTMLSelectElement;\n    const newTake = Number(select.value);\n\n    this.pageChange.emit({ page: 1, take: newTake });\n  }\n}\n","<div class=\"fk-pagination__summary\">\n  {{ rangeStart() }} – {{ rangeEnd() }} of {{ itemCount() }}\n</div>\n\n<div class=\"fk-pagination__controls\">\n  <div class=\"fk-pagination__page-size\">\n    <label class=\"fk-pagination__page-size-label\" [attr.for]=\"selectId\">\n      Rows per page:\n    </label>\n\n    <select\n      class=\"fk-pagination__page-size-select\"\n      [id]=\"selectId\"\n      [value]=\"take()\"\n      (change)=\"onPageSizeChange($event)\"\n    >\n      @for (option of pageSizeOptions(); track option) {\n        <option [value]=\"option\" [selected]=\"option === take()\">\n          {{ option }}\n        </option>\n      }\n    </select>\n  </div>\n\n  <div class=\"fk-pagination__nav\" role=\"navigation\" aria-label=\"Pagination\">\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasPreviousPage()\"\n        aria-label=\"First page\"\n        (click)=\"goToFirst()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M5.5 2L2.5 5L5.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M8.5 2L5.5 5L8.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasPreviousPage()\"\n      aria-label=\"Previous page\"\n      (click)=\"goToPrevious()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.5 2L3.5 5L6.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    <span class=\"fk-pagination__page-info\">\n      {{ page() }} / {{ pageCount() }}\n    </span>\n\n    <button\n      class=\"fk-pagination__btn\"\n      type=\"button\"\n      [disabled]=\"!hasNextPage()\"\n      aria-label=\"Next page\"\n      (click)=\"goToNext()\"\n    >\n      <svg\n        class=\"fk-pagination__arrow\"\n        viewBox=\"0 0 10 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M3.5 2L6.5 5L3.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n\n    @if (showFirstLast()) {\n      <button\n        class=\"fk-pagination__btn\"\n        type=\"button\"\n        [disabled]=\"!hasNextPage()\"\n        aria-label=\"Last page\"\n        (click)=\"goToLast()\"\n      >\n        <svg\n          class=\"fk-pagination__arrow\"\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4.5 2L7.5 5L4.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M1.5 2L4.5 5L1.5 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAWA,IAAI,gBAAgB,GAAG,CAAC;MAUX,mBAAmB,CAAA;;;AAGrB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAU;;AAE/B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAU;;AAE/B,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,+EAAU;;AAEpC,IAAA,eAAe,GAAG,KAAK,CAAW,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,sFAAC;;AAEpD,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,oFAAC;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;;IAItC,UAAU,GAAG,MAAM,EAAmB;;AAGtC,IAAA,QAAQ,GAAG,CAAA,mBAAA,EAAsB,gBAAgB,EAAE,EAAE;;;AAIrD,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AACjC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QAExB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;AACrC,IAAA,CAAC,gFAAC;AAEO,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,sFAAC;AAEjD,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,kFAAC;AAE5D,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAE9B,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,YAAA,OAAO,CAAC;QACV;AAEA,QAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC;AAC5C,IAAA,CAAC,iFAAC;AAEO,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAC9D,IAAA,CAAC,+EAAC;AAEO,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACtE,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,MAAM,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;IAClB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;;;IAKA,SAAS,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;AAC1B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;QACtD;IACF;;IAGA,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;QACpE;IACF;;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;QACpE;IACF;;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;QACrE;IACF;AAEA,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;QAChD,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;AAEpC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;IAClD;uGA1GW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,4vCCrBhC,k1HAgJA,EAAA,MAAA,EAAA,CAAA,yzHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD3Ha,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAR/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,cACb,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,k1HAAA,EAAA,MAAA,EAAA,CAAA,yzHAAA,CAAA,EAAA;;sBA4D9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,SAAS;;sBAKrB,WAAW;uBAAC,iBAAiB;;;AEvFhC;;AAEG;;;;"}