verben-ng-ui 1.5.3 → 1.5.4

package/esm2022/src/lib/components/card-data-view/left-card-data/left-card-data.component.mjs

@@ -22,13 +22,24 @@ export class LeftCardDataComponent {
     dataId; //what to use to identify each data
     /**
      * Buttons revealed on hover / keyboard focus over each card (the #card
-     * template). When set, every card is wrapped in <verben-card-hover-actions>
-     * with its CardData; empty or unset renders exactly as before (no wrapper).
+     * template) and, unless cardChildActions says otherwise, each child card
+     * (#cardChild). When set, every card is wrapped in <verben-card-hover-actions>
+     * with its own CardData; empty or unset renders exactly as before (no wrapper).
      * Pass a stable array (a field, not an inline literal).
      */
     cardActions = [];
-    /** Where those buttons sit on each card. */
+    /**
+     * Different buttons for child cards (#cardChild). Unset (undefined): the
+     * children use cardActions. [] or null: no buttons on children.
+     * canView / onSelect receive the child's CardData.
+     */
+    cardChildActions = undefined;
+    /** Where those buttons sit on each card (and child card). */
     cardActionsPosition = 'top-right';
+    /** The actions for child cards: cardChildActions when set, else cardActions */
+    get childActions() {
+        return this.cardChildActions === undefined ? this.cardActions : this.cardChildActions;
+    }
     // currentItem:any={};
     showToggle(item) {
         // showToggle() && item.children.length>0
@@ -45,11 +56,11 @@ export class LeftCardDataComponent {
         item.isChildrenExpanded = !currToggleState;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: LeftCardDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: LeftCardDataComponent, selector: "verben-left-card-data", inputs: { pd: "pd", mg: "mg", height: "height", weight: "weight", activeCss: "activeCss", inActiveCss: "inActiveCss", cardDataList: "cardDataList", iconCollapse: "iconCollapse", iconExpanded: "iconExpanded", parent: "parent", useVirtualScroll: "useVirtualScroll", virtualScrollItemSize: "virtualScrollItemSize", dataId: "dataId", cardActions: "cardActions", cardActionsPosition: "cardActionsPosition" }, queries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true }, { propertyName: "cardChild", first: true, predicate: ["cardChild"], descendants: true }, { propertyName: "cardFooter", first: true, predicate: ["cardFooter"], descendants: true }], ngImport: i0, template: "@for (item of cardDataList; track $index) {\n<div class=\"flex\">\n  <div class=\"flex-col full-width\">\n    @if (cardActions?.length) {\n    <!-- [cardActions]: the card gets the hover buttons -->\n    <verben-card-hover-actions\n      [item]=\"item\"\n      [actions]=\"cardActions!\"\n      [position]=\"cardActionsPosition\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n      ></ng-container>\n    </verben-card-hover-actions>\n    } @else {\n    <ng-content\n      *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n    ></ng-content>\n    }\n    <!-- children -->\n    <ng-template #childrenList>\n      @for (child of item.children; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          cardChild;\n          context: { index: $index, $implicit: child }\n        \"\n      ></ng-container>\n      }\n    </ng-template>\n    <div\n      class=\"childrenPadding flex-col flex\"\n      *ngIf=\"item.children.length > 0 && item.isChildrenExpanded\"\n    >\n      @if (useVirtualScroll) {\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        class=\"virtual-scroll-viewport\"\n        [style.height.px]=\"virtualScrollItemSize * 50\"\n      >\n        <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      </cdk-virtual-scroll-viewport>\n      } @else {\n      <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      }\n    </div>\n    <div *ngIf=\"item.isChildrenExpanded\" class=\"false-padding\">\n      <ng-content\n        *ngTemplateOutlet=\"\n          cardFooter;\n          context: { index: $index, $implicit: item }\n        \"\n      ></ng-content>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(220px,(100% - 30px) / 3)),1fr));gap:15px;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{box-sizing:border-box;width:100%;padding:10px 10px 10px 15%;display:flex;gap:10px}.false-padding{padding-left:15%}::ng-deep .childrenPadding .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.CardHoverActionsComponent, selector: "verben-card-hover-actions", inputs: ["item", "actions", "position", "alwaysVisible", "disabled", "buttonClass"], outputs: ["action"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: LeftCardDataComponent, selector: "verben-left-card-data", inputs: { pd: "pd", mg: "mg", height: "height", weight: "weight", activeCss: "activeCss", inActiveCss: "inActiveCss", cardDataList: "cardDataList", iconCollapse: "iconCollapse", iconExpanded: "iconExpanded", parent: "parent", useVirtualScroll: "useVirtualScroll", virtualScrollItemSize: "virtualScrollItemSize", dataId: "dataId", cardActions: "cardActions", cardChildActions: "cardChildActions", cardActionsPosition: "cardActionsPosition" }, queries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true }, { propertyName: "cardChild", first: true, predicate: ["cardChild"], descendants: true }, { propertyName: "cardFooter", first: true, predicate: ["cardFooter"], descendants: true }], ngImport: i0, template: "@for (item of cardDataList; track $index) {\n<div class=\"flex\">\n  <div class=\"flex-col full-width\">\n    @if (cardActions?.length) {\n    <!-- [cardActions]: the card gets the hover buttons -->\n    <verben-card-hover-actions\n      [item]=\"item\"\n      [actions]=\"cardActions!\"\n      [position]=\"cardActionsPosition\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n      ></ng-container>\n    </verben-card-hover-actions>\n    } @else {\n    <ng-content\n      *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n    ></ng-content>\n    }\n    <!-- children -->\n    <ng-template #childrenList>\n      @for (child of item.children; track $index) {\n      @if (childActions?.length) {\n      <!-- child cards get the hover buttons too (cardChildActions, else cardActions) -->\n      <verben-card-hover-actions\n        [item]=\"child\"\n        [actions]=\"childActions!\"\n        [position]=\"cardActionsPosition\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            cardChild;\n            context: { index: $index, $implicit: child }\n          \"\n        ></ng-container>\n      </verben-card-hover-actions>\n      } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          cardChild;\n          context: { index: $index, $implicit: child }\n        \"\n      ></ng-container>\n      }\n      }\n    </ng-template>\n    <div\n      class=\"childrenPadding flex-col flex\"\n      *ngIf=\"item.children.length > 0 && item.isChildrenExpanded\"\n    >\n      @if (useVirtualScroll) {\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        class=\"virtual-scroll-viewport\"\n        [style.height.px]=\"virtualScrollItemSize * 50\"\n      >\n        <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      </cdk-virtual-scroll-viewport>\n      } @else {\n      <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      }\n    </div>\n    <div *ngIf=\"item.isChildrenExpanded\" class=\"false-padding\">\n      <ng-content\n        *ngTemplateOutlet=\"\n          cardFooter;\n          context: { index: $index, $implicit: item }\n        \"\n      ></ng-content>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(220px,(100% - 30px) / 3)),1fr));gap:15px;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{box-sizing:border-box;width:100%;padding:10px 10px 10px 15%;display:flex;gap:10px}.false-padding{padding-left:15%}::ng-deep .childrenPadding .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.CardHoverActionsComponent, selector: "verben-card-hover-actions", inputs: ["item", "actions", "position", "alwaysVisible", "disabled", "buttonClass"], outputs: ["action"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: LeftCardDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'verben-left-card-data', template: "@for (item of cardDataList; track $index) {\n<div class=\"flex\">\n  <div class=\"flex-col full-width\">\n    @if (cardActions?.length) {\n    <!-- [cardActions]: the card gets the hover buttons -->\n    <verben-card-hover-actions\n      [item]=\"item\"\n      [actions]=\"cardActions!\"\n      [position]=\"cardActionsPosition\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n      ></ng-container>\n    </verben-card-hover-actions>\n    } @else {\n    <ng-content\n      *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n    ></ng-content>\n    }\n    <!-- children -->\n    <ng-template #childrenList>\n      @for (child of item.children; track $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          cardChild;\n          context: { index: $index, $implicit: child }\n        \"\n      ></ng-container>\n      }\n    </ng-template>\n    <div\n      class=\"childrenPadding flex-col flex\"\n      *ngIf=\"item.children.length > 0 && item.isChildrenExpanded\"\n    >\n      @if (useVirtualScroll) {\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        class=\"virtual-scroll-viewport\"\n        [style.height.px]=\"virtualScrollItemSize * 50\"\n      >\n        <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      </cdk-virtual-scroll-viewport>\n      } @else {\n      <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      }\n    </div>\n    <div *ngIf=\"item.isChildrenExpanded\" class=\"false-padding\">\n      <ng-content\n        *ngTemplateOutlet=\"\n          cardFooter;\n          context: { index: $index, $implicit: item }\n        \"\n      ></ng-content>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(220px,(100% - 30px) / 3)),1fr));gap:15px;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{box-sizing:border-box;width:100%;padding:10px 10px 10px 15%;display:flex;gap:10px}.false-padding{padding-left:15%}::ng-deep .childrenPadding .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;gap:10px}\n"] }]
+            args: [{ selector: 'verben-left-card-data', template: "@for (item of cardDataList; track $index) {\n<div class=\"flex\">\n  <div class=\"flex-col full-width\">\n    @if (cardActions?.length) {\n    <!-- [cardActions]: the card gets the hover buttons -->\n    <verben-card-hover-actions\n      [item]=\"item\"\n      [actions]=\"cardActions!\"\n      [position]=\"cardActionsPosition\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n      ></ng-container>\n    </verben-card-hover-actions>\n    } @else {\n    <ng-content\n      *ngTemplateOutlet=\"card; context: { $implicit: item }\"\n    ></ng-content>\n    }\n    <!-- children -->\n    <ng-template #childrenList>\n      @for (child of item.children; track $index) {\n      @if (childActions?.length) {\n      <!-- child cards get the hover buttons too (cardChildActions, else cardActions) -->\n      <verben-card-hover-actions\n        [item]=\"child\"\n        [actions]=\"childActions!\"\n        [position]=\"cardActionsPosition\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            cardChild;\n            context: { index: $index, $implicit: child }\n          \"\n        ></ng-container>\n      </verben-card-hover-actions>\n      } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          cardChild;\n          context: { index: $index, $implicit: child }\n        \"\n      ></ng-container>\n      }\n      }\n    </ng-template>\n    <div\n      class=\"childrenPadding flex-col flex\"\n      *ngIf=\"item.children.length > 0 && item.isChildrenExpanded\"\n    >\n      @if (useVirtualScroll) {\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        class=\"virtual-scroll-viewport\"\n        [style.height.px]=\"virtualScrollItemSize * 50\"\n      >\n        <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      </cdk-virtual-scroll-viewport>\n      } @else {\n      <ng-container *ngTemplateOutlet=\"childrenList\"></ng-container>\n      }\n    </div>\n    <div *ngIf=\"item.isChildrenExpanded\" class=\"false-padding\">\n      <ng-content\n        *ngTemplateOutlet=\"\n          cardFooter;\n          context: { index: $index, $implicit: item }\n        \"\n      ></ng-content>\n    </div>\n  </div>\n</div>\n\n}\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(220px,(100% - 30px) / 3)),1fr));gap:15px;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{box-sizing:border-box;width:100%;padding:10px 10px 10px 15%;display:flex;gap:10px}.false-padding{padding-left:15%}::ng-deep .childrenPadding .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;gap:10px}\n"] }]
         }], propDecorators: { pd: [{
                 type: Input
             }], mg: [{
@@ -87,7 +98,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
                 type: Input
             }], cardActions: [{
                 type: Input
+            }], cardChildActions: [{
+                type: Input
             }], cardActionsPosition: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVmdC1jYXJkLWRhdGEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9sZWZ0LWNhcmQtZGF0YS9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L2xlZnQtY2FyZC1kYXRhL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFhNUUsTUFBTSxPQUFPLHFCQUFxQjtJQUN2QixFQUFFLEdBQUcsTUFBTSxDQUFDO0lBQ1osRUFBRSxHQUFHLEtBQUssQ0FBQztJQUNYLE1BQU0sR0FBWSxNQUFNLENBQUM7SUFDekIsTUFBTSxHQUFZLE1BQU0sQ0FBQztJQUN6QixTQUFTLENBQVU7SUFDbkIsV0FBVyxDQUFVO0lBQ3JCLFlBQVksR0FBZSxFQUFFLENBQUM7SUFDOUIsWUFBWSxHQUFXLE1BQU0sQ0FBQztJQUM5QixZQUFZLEdBQVcsT0FBTyxDQUFDO0lBQy9CLE1BQU0sQ0FBeUI7SUFDL0IsZ0JBQWdCLEdBQVksS0FBSyxDQUFDO0lBQ2xDLHFCQUFxQixHQUFXLENBQUMsQ0FBQztJQUNyQixJQUFJLENBQW9CO0lBQ25CLFNBQVMsQ0FBb0I7SUFDNUIsVUFBVSxDQUFvQjtJQUNqRCxNQUFNLENBQVUsQ0FBQyxtQ0FBbUM7SUFDN0Q7Ozs7O09BS0c7SUFDTSxXQUFXLEdBQXlDLEVBQUUsQ0FBQztJQUNoRSw0Q0FBNEM7SUFDbkMsbUJBQW1CLEdBQTZCLFdBQVcsQ0FBQztJQUNyRSxzQkFBc0I7SUFDdEIsVUFBVSxDQUFDLElBQWM7UUFDdkIseUNBQXlDO1FBQ3pDLE9BQU8sQ0FDTCxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sR0FBRyxDQUFDO1lBQ3RELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FDekIsQ0FBQztJQUNKLENBQUM7SUFDRCxZQUFZLENBQUMsSUFBYztRQUN6QixJQUFJLGVBQWUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUM5QixDQUFDLENBQUMsa0JBQWtCLEdBQUcsS0FBSyxDQUFDO1lBQzdCLENBQUMsQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLENBQUMsZUFBZSxDQUFDO0lBQzdDLENBQUM7d0dBMUNVLHFCQUFxQjs0RkFBckIscUJBQXFCLCt0QkNibEMsMnREQTBEQTs7NEZEN0NhLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSx1QkFBdUI7OEJBS3hCLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxxQkFBcUI7c0JBQTdCLEtBQUs7Z0JBQ2dCLElBQUk7c0JBQXpCLFlBQVk7dUJBQUMsTUFBTTtnQkFDTyxTQUFTO3NCQUFuQyxZQUFZO3VCQUFDLFdBQVc7Z0JBQ0csVUFBVTtzQkFBckMsWUFBWTt1QkFBQyxZQUFZO2dCQUNqQixNQUFNO3NCQUFkLEtBQUs7Z0JBT0csV0FBVztzQkFBbkIsS0FBSztnQkFFRyxtQkFBbUI7c0JBQTNCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDYXJkRGF0YSB9IGZyb20gJy4uL2NhcmQtZGF0YSc7XG5pbXBvcnQgeyBDYXJkRGF0YVZpZXdDb21wb25lbnQgfSBmcm9tICcuLi9jYXJkLWRhdGEtdmlldy5jb21wb25lbnQnO1xuaW1wb3J0IHtcbiAgQ2FyZEhvdmVyQWN0aW9uLFxuICBDYXJkSG92ZXJBY3Rpb25zUG9zaXRpb24sXG59IGZyb20gJy4uL2NhcmQtaG92ZXItYWN0aW9ucy9jYXJkLWhvdmVyLWFjdGlvbnMuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLWxlZnQtY2FyZC1kYXRhJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5jc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBMZWZ0Q2FyZERhdGFDb21wb25lbnQge1xuICBASW5wdXQoKSBwZCA9ICcxMHB4JztcbiAgQElucHV0KCkgbWcgPSAnMHB4JztcbiAgQElucHV0KCkgaGVpZ2h0Pzogc3RyaW5nID0gJzEwMCUnO1xuICBASW5wdXQoKSB3ZWlnaHQ/OiBzdHJpbmcgPSAnMTAwJSc7XG4gIEBJbnB1dCgpIGFjdGl2ZUNzcz86IHN0cmluZztcbiAgQElucHV0KCkgaW5BY3RpdmVDc3M/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNhcmREYXRhTGlzdDogQ2FyZERhdGFbXSA9IFtdO1xuICBASW5wdXQoKSBpY29uQ29sbGFwc2U6IHN0cmluZyA9ICdwbHVzJztcbiAgQElucHV0KCkgaWNvbkV4cGFuZGVkOiBzdHJpbmcgPSAnbWludXMnO1xuICBASW5wdXQoKSBwYXJlbnQhOiBDYXJkRGF0YVZpZXdDb21wb25lbnQ7XG4gIEBJbnB1dCgpIHVzZVZpcnR1YWxTY3JvbGw6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgdmlydHVhbFNjcm9sbEl0ZW1TaXplOiBudW1iZXIgPSA1O1xuICBAQ29udGVudENoaWxkKCdjYXJkJykgY2FyZCE6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBDb250ZW50Q2hpbGQoJ2NhcmRDaGlsZCcpIGNhcmRDaGlsZCE6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBDb250ZW50Q2hpbGQoJ2NhcmRGb290ZXInKSBjYXJkRm9vdGVyITogVGVtcGxhdGVSZWY8YW55PjtcbiAgQElucHV0KCkgZGF0YUlkITogc3RyaW5nOyAvL3doYXQgdG8gdXNlIHRvIGlkZW50aWZ5IGVhY2ggZGF0YVxuICAvKipcbiAgICogQnV0dG9ucyByZXZlYWxlZCBvbiBob3ZlciAvIGtleWJvYXJkIGZvY3VzIG92ZXIgZWFjaCBjYXJkICh0aGUgI2NhcmRcbiAgICogdGVtcGxhdGUpLiBXaGVuIHNldCwgZXZlcnkgY2FyZCBpcyB3cmFwcGVkIGluIDx2ZXJiZW4tY2FyZC1ob3Zlci1hY3Rpb25zPlxuICAgKiB3aXRoIGl0cyBDYXJkRGF0YTsgZW1wdHkgb3IgdW5zZXQgcmVuZGVycyBleGFjdGx5IGFzIGJlZm9yZSAobm8gd3JhcHBlcikuXG4gICAqIFBhc3MgYSBzdGFibGUgYXJyYXkgKGEgZmllbGQsIG5vdCBhbiBpbmxpbmUgbGl0ZXJhbCkuXG4gICAqL1xuICBASW5wdXQoKSBjYXJkQWN0aW9uczogQ2FyZEhvdmVyQWN0aW9uW10gfCBudWxsIHwgdW5kZWZpbmVkID0gW107XG4gIC8qKiBXaGVyZSB0aG9zZSBidXR0b25zIHNpdCBvbiBlYWNoIGNhcmQuICovXG4gIEBJbnB1dCgpIGNhcmRBY3Rpb25zUG9zaXRpb246IENhcmRIb3ZlckFjdGlvbnNQb3NpdGlvbiA9ICd0b3AtcmlnaHQnO1xuICAvLyBjdXJyZW50SXRlbTphbnk9e307XG4gIHNob3dUb2dnbGUoaXRlbTogQ2FyZERhdGEpIHtcbiAgICAvLyBzaG93VG9nZ2xlKCkgJiYgaXRlbS5jaGlsZHJlbi5sZW5ndGg+MFxuICAgIHJldHVybiAoXG4gICAgICB0aGlzLmNhcmREYXRhTGlzdC5maWx0ZXIoKF8pID0+IF8uc2VsZWN0ZWQpLmxlbmd0aCA+IDAgJiZcbiAgICAgIGl0ZW0uY2hpbGRyZW4ubGVuZ3RoID4gMFxuICAgICk7XG4gIH1cbiAgc2hvd0NoaWxkcmVuKGl0ZW06IENhcmREYXRhKSB7XG4gICAgdmFyIGN1cnJUb2dnbGVTdGF0ZSA9IGl0ZW0uaXNDaGlsZHJlbkV4cGFuZGVkO1xuICAgIHRoaXMuY2FyZERhdGFMaXN0LmZvckVhY2goKF8pID0+IHtcbiAgICAgIF8uaXNDaGlsZHJlbkV4cGFuZGVkID0gZmFsc2U7XG4gICAgICBfLnNlbGVjdGVkID0gZmFsc2U7XG4gICAgfSk7XG4gICAgdGhpcy5wYXJlbnQub25JdGVtQ2xpY2soaXRlbSk7XG4gICAgaXRlbS5pc0NoaWxkcmVuRXhwYW5kZWQgPSAhY3VyclRvZ2dsZVN0YXRlO1xuICB9XG59XG4iLCJAZm9yIChpdGVtIG9mIGNhcmREYXRhTGlzdDsgdHJhY2sgJGluZGV4KSB7XG48ZGl2IGNsYXNzPVwiZmxleFwiPlxuICA8ZGl2IGNsYXNzPVwiZmxleC1jb2wgZnVsbC13aWR0aFwiPlxuICAgIEBpZiAoY2FyZEFjdGlvbnM/Lmxlbmd0aCkge1xuICAgIDwhLS0gW2NhcmRBY3Rpb25zXTogdGhlIGNhcmQgZ2V0cyB0aGUgaG92ZXIgYnV0dG9ucyAtLT5cbiAgICA8dmVyYmVuLWNhcmQtaG92ZXItYWN0aW9uc1xuICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICBbYWN0aW9uc109XCJjYXJkQWN0aW9ucyFcIlxuICAgICAgW3Bvc2l0aW9uXT1cImNhcmRBY3Rpb25zUG9zaXRpb25cIlxuICAgID5cbiAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjYXJkOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogaXRlbSB9XCJcbiAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICA8L3ZlcmJlbi1jYXJkLWhvdmVyLWFjdGlvbnM+XG4gICAgfSBAZWxzZSB7XG4gICAgPG5nLWNvbnRlbnRcbiAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZDsgY29udGV4dDogeyAkaW1wbGljaXQ6IGl0ZW0gfVwiXG4gICAgPjwvbmctY29udGVudD5cbiAgICB9XG4gICAgPCEtLSBjaGlsZHJlbiAtLT5cbiAgICA8bmctdGVtcGxhdGUgI2NoaWxkcmVuTGlzdD5cbiAgICAgIEBmb3IgKGNoaWxkIG9mIGl0ZW0uY2hpbGRyZW47IHRyYWNrICRpbmRleCkge1xuICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgICAgICAgIGNhcmRDaGlsZDtcbiAgICAgICAgICBjb250ZXh0OiB7IGluZGV4OiAkaW5kZXgsICRpbXBsaWNpdDogY2hpbGQgfVxuICAgICAgICBcIlxuICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgfVxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjaGlsZHJlblBhZGRpbmcgZmxleC1jb2wgZmxleFwiXG4gICAgICAqbmdJZj1cIml0ZW0uY2hpbGRyZW4ubGVuZ3RoID4gMCAmJiBpdGVtLmlzQ2hpbGRyZW5FeHBhbmRlZFwiXG4gICAgPlxuICAgICAgQGlmICh1c2VWaXJ0dWFsU2Nyb2xsKSB7XG4gICAgICA8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0XG4gICAgICAgIFtpdGVtU2l6ZV09XCJ2aXJ0dWFsU2Nyb2xsSXRlbVNpemVcIlxuICAgICAgICBjbGFzcz1cInZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0XCJcbiAgICAgICAgW3N0eWxlLmhlaWdodC5weF09XCJ2aXJ0dWFsU2Nyb2xsSXRlbVNpemUgKiA1MFwiXG4gICAgICA+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjaGlsZHJlbkxpc3RcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvY2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0PlxuICAgICAgfSBAZWxzZSB7XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2hpbGRyZW5MaXN0XCI+PC9uZy1jb250YWluZXI+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIml0ZW0uaXNDaGlsZHJlbkV4cGFuZGVkXCIgY2xhc3M9XCJmYWxzZS1wYWRkaW5nXCI+XG4gICAgICA8bmctY29udGVudFxuICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgICAgICAgIGNhcmRGb290ZXI7XG4gICAgICAgICAgY29udGV4dDogeyBpbmRleDogJGluZGV4LCAkaW1wbGljaXQ6IGl0ZW0gfVxuICAgICAgICBcIlxuICAgICAgPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cblxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVmdC1jYXJkLWRhdGEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9sZWZ0LWNhcmQtZGF0YS9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L2xlZnQtY2FyZC1kYXRhL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFhNUUsTUFBTSxPQUFPLHFCQUFxQjtJQUN2QixFQUFFLEdBQUcsTUFBTSxDQUFDO0lBQ1osRUFBRSxHQUFHLEtBQUssQ0FBQztJQUNYLE1BQU0sR0FBWSxNQUFNLENBQUM7SUFDekIsTUFBTSxHQUFZLE1BQU0sQ0FBQztJQUN6QixTQUFTLENBQVU7SUFDbkIsV0FBVyxDQUFVO0lBQ3JCLFlBQVksR0FBZSxFQUFFLENBQUM7SUFDOUIsWUFBWSxHQUFXLE1BQU0sQ0FBQztJQUM5QixZQUFZLEdBQVcsT0FBTyxDQUFDO0lBQy9CLE1BQU0sQ0FBeUI7SUFDL0IsZ0JBQWdCLEdBQVksS0FBSyxDQUFDO0lBQ2xDLHFCQUFxQixHQUFXLENBQUMsQ0FBQztJQUNyQixJQUFJLENBQW9CO0lBQ25CLFNBQVMsQ0FBb0I7SUFDNUIsVUFBVSxDQUFvQjtJQUNqRCxNQUFNLENBQVUsQ0FBQyxtQ0FBbUM7SUFDN0Q7Ozs7OztPQU1HO0lBQ00sV0FBVyxHQUF5QyxFQUFFLENBQUM7SUFDaEU7Ozs7T0FJRztJQUNNLGdCQUFnQixHQUF5QyxTQUFTLENBQUM7SUFDNUUsNkRBQTZEO0lBQ3BELG1CQUFtQixHQUE2QixXQUFXLENBQUM7SUFFckUsK0VBQStFO0lBQy9FLElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQ3hGLENBQUM7SUFDRCxzQkFBc0I7SUFDdEIsVUFBVSxDQUFDLElBQWM7UUFDdkIseUNBQXlDO1FBQ3pDLE9BQU8sQ0FDTCxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sR0FBRyxDQUFDO1lBQ3RELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FDekIsQ0FBQztJQUNKLENBQUM7SUFDRCxZQUFZLENBQUMsSUFBYztRQUN6QixJQUFJLGVBQWUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUM5QixDQUFDLENBQUMsa0JBQWtCLEdBQUcsS0FBSyxDQUFDO1lBQzdCLENBQUMsQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLENBQUMsZUFBZSxDQUFDO0lBQzdDLENBQUM7d0dBdERVLHFCQUFxQjs0RkFBckIscUJBQXFCLHF3QkNibEMsK3RFQTBFQTs7NEZEN0RhLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSx1QkFBdUI7OEJBS3hCLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxxQkFBcUI7c0JBQTdCLEtBQUs7Z0JBQ2dCLElBQUk7c0JBQXpCLFlBQVk7dUJBQUMsTUFBTTtnQkFDTyxTQUFTO3NCQUFuQyxZQUFZO3VCQUFDLFdBQVc7Z0JBQ0csVUFBVTtzQkFBckMsWUFBWTt1QkFBQyxZQUFZO2dCQUNqQixNQUFNO3NCQUFkLEtBQUs7Z0JBUUcsV0FBVztzQkFBbkIsS0FBSztnQkFNRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRUcsbUJBQW1CO3NCQUEzQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZERhdGEgfSBmcm9tICcuLi9jYXJkLWRhdGEnO1xuaW1wb3J0IHsgQ2FyZERhdGFWaWV3Q29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC1kYXRhLXZpZXcuY29tcG9uZW50JztcbmltcG9ydCB7XG4gIENhcmRIb3ZlckFjdGlvbixcbiAgQ2FyZEhvdmVyQWN0aW9uc1Bvc2l0aW9uLFxufSBmcm9tICcuLi9jYXJkLWhvdmVyLWFjdGlvbnMvY2FyZC1ob3Zlci1hY3Rpb25zLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZlcmJlbi1sZWZ0LWNhcmQtZGF0YScsXG4gIHRlbXBsYXRlVXJsOiAnLi9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQuY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgTGVmdENhcmREYXRhQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcGQgPSAnMTBweCc7XG4gIEBJbnB1dCgpIG1nID0gJzBweCc7XG4gIEBJbnB1dCgpIGhlaWdodD86IHN0cmluZyA9ICcxMDAlJztcbiAgQElucHV0KCkgd2VpZ2h0Pzogc3RyaW5nID0gJzEwMCUnO1xuICBASW5wdXQoKSBhY3RpdmVDc3M/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGluQWN0aXZlQ3NzPzogc3RyaW5nO1xuICBASW5wdXQoKSBjYXJkRGF0YUxpc3Q6IENhcmREYXRhW10gPSBbXTtcbiAgQElucHV0KCkgaWNvbkNvbGxhcHNlOiBzdHJpbmcgPSAncGx1cyc7XG4gIEBJbnB1dCgpIGljb25FeHBhbmRlZDogc3RyaW5nID0gJ21pbnVzJztcbiAgQElucHV0KCkgcGFyZW50ITogQ2FyZERhdGFWaWV3Q29tcG9uZW50O1xuICBASW5wdXQoKSB1c2VWaXJ0dWFsU2Nyb2xsOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHZpcnR1YWxTY3JvbGxJdGVtU2l6ZTogbnVtYmVyID0gNTtcbiAgQENvbnRlbnRDaGlsZCgnY2FyZCcpIGNhcmQhOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBAQ29udGVudENoaWxkKCdjYXJkQ2hpbGQnKSBjYXJkQ2hpbGQhOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBAQ29udGVudENoaWxkKCdjYXJkRm9vdGVyJykgY2FyZEZvb3RlciE6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBJbnB1dCgpIGRhdGFJZCE6IHN0cmluZzsgLy93aGF0IHRvIHVzZSB0byBpZGVudGlmeSBlYWNoIGRhdGFcbiAgLyoqXG4gICAqIEJ1dHRvbnMgcmV2ZWFsZWQgb24gaG92ZXIgLyBrZXlib2FyZCBmb2N1cyBvdmVyIGVhY2ggY2FyZCAodGhlICNjYXJkXG4gICAqIHRlbXBsYXRlKSBhbmQsIHVubGVzcyBjYXJkQ2hpbGRBY3Rpb25zIHNheXMgb3RoZXJ3aXNlLCBlYWNoIGNoaWxkIGNhcmRcbiAgICogKCNjYXJkQ2hpbGQpLiBXaGVuIHNldCwgZXZlcnkgY2FyZCBpcyB3cmFwcGVkIGluIDx2ZXJiZW4tY2FyZC1ob3Zlci1hY3Rpb25zPlxuICAgKiB3aXRoIGl0cyBvd24gQ2FyZERhdGE7IGVtcHR5IG9yIHVuc2V0IHJlbmRlcnMgZXhhY3RseSBhcyBiZWZvcmUgKG5vIHdyYXBwZXIpLlxuICAgKiBQYXNzIGEgc3RhYmxlIGFycmF5IChhIGZpZWxkLCBub3QgYW4gaW5saW5lIGxpdGVyYWwpLlxuICAgKi9cbiAgQElucHV0KCkgY2FyZEFjdGlvbnM6IENhcmRIb3ZlckFjdGlvbltdIHwgbnVsbCB8IHVuZGVmaW5lZCA9IFtdO1xuICAvKipcbiAgICogRGlmZmVyZW50IGJ1dHRvbnMgZm9yIGNoaWxkIGNhcmRzICgjY2FyZENoaWxkKS4gVW5zZXQgKHVuZGVmaW5lZCk6IHRoZVxuICAgKiBjaGlsZHJlbiB1c2UgY2FyZEFjdGlvbnMuIFtdIG9yIG51bGw6IG5vIGJ1dHRvbnMgb24gY2hpbGRyZW4uXG4gICAqIGNhblZpZXcgLyBvblNlbGVjdCByZWNlaXZlIHRoZSBjaGlsZCdzIENhcmREYXRhLlxuICAgKi9cbiAgQElucHV0KCkgY2FyZENoaWxkQWN0aW9uczogQ2FyZEhvdmVyQWN0aW9uW10gfCBudWxsIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xuICAvKiogV2hlcmUgdGhvc2UgYnV0dG9ucyBzaXQgb24gZWFjaCBjYXJkIChhbmQgY2hpbGQgY2FyZCkuICovXG4gIEBJbnB1dCgpIGNhcmRBY3Rpb25zUG9zaXRpb246IENhcmRIb3ZlckFjdGlvbnNQb3NpdGlvbiA9ICd0b3AtcmlnaHQnO1xuXG4gIC8qKiBUaGUgYWN0aW9ucyBmb3IgY2hpbGQgY2FyZHM6IGNhcmRDaGlsZEFjdGlvbnMgd2hlbiBzZXQsIGVsc2UgY2FyZEFjdGlvbnMgKi9cbiAgZ2V0IGNoaWxkQWN0aW9ucygpOiBDYXJkSG92ZXJBY3Rpb25bXSB8IG51bGwgfCB1bmRlZmluZWQge1xuICAgIHJldHVybiB0aGlzLmNhcmRDaGlsZEFjdGlvbnMgPT09IHVuZGVmaW5lZCA/IHRoaXMuY2FyZEFjdGlvbnMgOiB0aGlzLmNhcmRDaGlsZEFjdGlvbnM7XG4gIH1cbiAgLy8gY3VycmVudEl0ZW06YW55PXt9O1xuICBzaG93VG9nZ2xlKGl0ZW06IENhcmREYXRhKSB7XG4gICAgLy8gc2hvd1RvZ2dsZSgpICYmIGl0ZW0uY2hpbGRyZW4ubGVuZ3RoPjBcbiAgICByZXR1cm4gKFxuICAgICAgdGhpcy5jYXJkRGF0YUxpc3QuZmlsdGVyKChfKSA9PiBfLnNlbGVjdGVkKS5sZW5ndGggPiAwICYmXG4gICAgICBpdGVtLmNoaWxkcmVuLmxlbmd0aCA+IDBcbiAgICApO1xuICB9XG4gIHNob3dDaGlsZHJlbihpdGVtOiBDYXJkRGF0YSkge1xuICAgIHZhciBjdXJyVG9nZ2xlU3RhdGUgPSBpdGVtLmlzQ2hpbGRyZW5FeHBhbmRlZDtcbiAgICB0aGlzLmNhcmREYXRhTGlzdC5mb3JFYWNoKChfKSA9PiB7XG4gICAgICBfLmlzQ2hpbGRyZW5FeHBhbmRlZCA9IGZhbHNlO1xuICAgICAgXy5zZWxlY3RlZCA9IGZhbHNlO1xuICAgIH0pO1xuICAgIHRoaXMucGFyZW50Lm9uSXRlbUNsaWNrKGl0ZW0pO1xuICAgIGl0ZW0uaXNDaGlsZHJlbkV4cGFuZGVkID0gIWN1cnJUb2dnbGVTdGF0ZTtcbiAgfVxufVxuIiwiQGZvciAoaXRlbSBvZiBjYXJkRGF0YUxpc3Q7IHRyYWNrICRpbmRleCkge1xuPGRpdiBjbGFzcz1cImZsZXhcIj5cbiAgPGRpdiBjbGFzcz1cImZsZXgtY29sIGZ1bGwtd2lkdGhcIj5cbiAgICBAaWYgKGNhcmRBY3Rpb25zPy5sZW5ndGgpIHtcbiAgICA8IS0tIFtjYXJkQWN0aW9uc106IHRoZSBjYXJkIGdldHMgdGhlIGhvdmVyIGJ1dHRvbnMgLS0+XG4gICAgPHZlcmJlbi1jYXJkLWhvdmVyLWFjdGlvbnNcbiAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgW2FjdGlvbnNdPVwiY2FyZEFjdGlvbnMhXCJcbiAgICAgIFtwb3NpdGlvbl09XCJjYXJkQWN0aW9uc1Bvc2l0aW9uXCJcbiAgICA+XG4gICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZDsgY29udGV4dDogeyAkaW1wbGljaXQ6IGl0ZW0gfVwiXG4gICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgPC92ZXJiZW4tY2FyZC1ob3Zlci1hY3Rpb25zPlxuICAgIH0gQGVsc2Uge1xuICAgIDxuZy1jb250ZW50XG4gICAgICAqbmdUZW1wbGF0ZU91dGxldD1cImNhcmQ7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBpdGVtIH1cIlxuICAgID48L25nLWNvbnRlbnQ+XG4gICAgfVxuICAgIDwhLS0gY2hpbGRyZW4gLS0+XG4gICAgPG5nLXRlbXBsYXRlICNjaGlsZHJlbkxpc3Q+XG4gICAgICBAZm9yIChjaGlsZCBvZiBpdGVtLmNoaWxkcmVuOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgIEBpZiAoY2hpbGRBY3Rpb25zPy5sZW5ndGgpIHtcbiAgICAgIDwhLS0gY2hpbGQgY2FyZHMgZ2V0IHRoZSBob3ZlciBidXR0b25zIHRvbyAoY2FyZENoaWxkQWN0aW9ucywgZWxzZSBjYXJkQWN0aW9ucykgLS0+XG4gICAgICA8dmVyYmVuLWNhcmQtaG92ZXItYWN0aW9uc1xuICAgICAgICBbaXRlbV09XCJjaGlsZFwiXG4gICAgICAgIFthY3Rpb25zXT1cImNoaWxkQWN0aW9ucyFcIlxuICAgICAgICBbcG9zaXRpb25dPVwiY2FyZEFjdGlvbnNQb3NpdGlvblwiXG4gICAgICA+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgICAgICAgICAgY2FyZENoaWxkO1xuICAgICAgICAgICAgY29udGV4dDogeyBpbmRleDogJGluZGV4LCAkaW1wbGljaXQ6IGNoaWxkIH1cbiAgICAgICAgICBcIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICA8L3ZlcmJlbi1jYXJkLWhvdmVyLWFjdGlvbnM+XG4gICAgICB9IEBlbHNlIHtcbiAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJcbiAgICAgICAgICBjYXJkQ2hpbGQ7XG4gICAgICAgICAgY29udGV4dDogeyBpbmRleDogJGluZGV4LCAkaW1wbGljaXQ6IGNoaWxkIH1cbiAgICAgICAgXCJcbiAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgIH1cbiAgICAgIH1cbiAgICA8L25nLXRlbXBsYXRlPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY2hpbGRyZW5QYWRkaW5nIGZsZXgtY29sIGZsZXhcIlxuICAgICAgKm5nSWY9XCJpdGVtLmNoaWxkcmVuLmxlbmd0aCA+IDAgJiYgaXRlbS5pc0NoaWxkcmVuRXhwYW5kZWRcIlxuICAgID5cbiAgICAgIEBpZiAodXNlVmlydHVhbFNjcm9sbCkge1xuICAgICAgPGNkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydFxuICAgICAgICBbaXRlbVNpemVdPVwidmlydHVhbFNjcm9sbEl0ZW1TaXplXCJcbiAgICAgICAgY2xhc3M9XCJ2aXJ0dWFsLXNjcm9sbC12aWV3cG9ydFwiXG4gICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwidmlydHVhbFNjcm9sbEl0ZW1TaXplICogNTBcIlxuICAgICAgPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2hpbGRyZW5MaXN0XCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8L2Nkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydD5cbiAgICAgIH0gQGVsc2Uge1xuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNoaWxkcmVuTGlzdFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJpdGVtLmlzQ2hpbGRyZW5FeHBhbmRlZFwiIGNsYXNzPVwiZmFsc2UtcGFkZGluZ1wiPlxuICAgICAgPG5nLWNvbnRlbnRcbiAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJcbiAgICAgICAgICBjYXJkRm9vdGVyO1xuICAgICAgICAgIGNvbnRleHQ6IHsgaW5kZXg6ICRpbmRleCwgJGltcGxpY2l0OiBpdGVtIH1cbiAgICAgICAgXCJcbiAgICAgID48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbn1cbiJdfQ==

package/esm2022/src/lib/components/data-view/data-view.component.mjs

@@ -177,11 +177,11 @@ export class DataViewComponent {
         this.searchValue = val;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DataViewComponent, selector: "verben-data-view", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", activeIconClass: "activeIconClass", columnCustomClass: "columnCustomClass", filterCustomClass: "filterCustomClass", sortCustomClass: "sortCustomClass", extendCustomClass: "extendCustomClass", exportCustomClass: "exportCustomClass", selectCustomClass: "selectCustomClass", importCustomClass: "importCustomClass", zIndex: "zIndex", createCustomClass: "createCustomClass", tableIcon: "tableIcon", cardIcon: "cardIcon", cardClass: "cardClass", tableClass: "tableClass", searchKey: "searchKey", searchValue: "searchValue", viewState: "viewState", searchTemplate: "searchTemplate", importTemplate: "importTemplate", columnTemplate: "columnTemplate", extendTemplate: "extendTemplate", filterTemplate: "filterTemplate", sortTemplate: "sortTemplate", children: "children", exportTemplate: "exportTemplate", createTemplate: "createTemplate", selectedColumnCount: "selectedColumnCount", selectedSortCount: "selectedSortCount", selectedFilterTableCount: "selectedFilterTableCount", inputWidth: "inputWidth", milliseconds: "milliseconds", showColumnChild: "showColumnChild", showSortChild: "showSortChild", showFilterChild: "showFilterChild", showImportChild: "showImportChild", showExportChild: "showExportChild", showExtendChild: "showExtendChild", create: "create", showSelected: "showSelected", useTwoWayBinding: "useTwoWayBinding", isTableView: "isTableView" }, outputs: { viewChange: "viewChange", stateChange: "stateChange", onSearchChange: "onSearchChange" }, viewQueries: [{ propertyName: "filterContentWrapper", first: true, predicate: ["filterContentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div class=\"dv-search-group\">\n    <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n      <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n        <verben-svg\n          [icon]=\"tableIcon\"\n          [class.active]=\"!isTableView\"\n          [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n        ></verben-svg>\n        <verben-svg\n          [icon]=\"cardIcon\"\n          [class.active]=\"isTableView\"\n          [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n          [width]=\"25\"\n          [height]=\"25\"\n        ></verben-svg>\n      </button>\n    </div>\n    <!-- Search Input -->\n    <div\n      [style.width]=\"inputWidth\"\n      class=\"search-input\"\n      *ngIf=\"viewState.isSearch\"\n    >\n      <verben-svg [icon]=\"'search2'\" [width]=\"20\" [height]=\"20\"></verben-svg>\n      <input\n        *ngIf=\"!useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [value]=\"searchValue\"\n      />\n      <input\n        *ngIf=\"useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [(ngModel)]=\"searchValue\"\n      />\n      <verben-svg\n        *ngIf=\"searchValue.length > 0\"\n        [icon]=\"'close'\"\n        [width]=\"15\"\n        (click)=\"onClearSearch()\"\n        class=\"close-icon-class\"\n        [height]=\"15\"\n      ></verben-svg>\n    </div>\n  </div>\n  <div class=\"relative dv-actions\">\n    <!-- Column Section -->\n    <ng-container\n      [appOutSideClick]=\"showColumnChild\"\n      (outSideClick)=\"resetChildViewsExcept('column')\"\n      *ngIf=\"viewState.isColumn && isTableView\"\n    >\n      <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n      <ng-template #defaultColumn>\n        <span\n          [ngClass]=\"['dv-action', columnCustomClass ? columnCustomClass : '']\"\n          [class.is-open]=\"showColumnChild\"\n          (click)=\"toggleChildView('column')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n          <span>Columns</span\n          ><span class=\"dv-count\">{{ selectedColumnCount }}</span>\n        </span>\n        <div\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showColumnChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n              projected panel stays change-detected and reflects host state\n              updates (e.g. restored column arrangement) even while collapsed. -->\n          <ng-content select=\"[column-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Filter Section -->\n    <ng-container\n      [appOutSideClick]=\"showFilterChild\"\n      (outSideClick)=\"resetChildViewsExcept('filter')\"\n      *ngIf=\"viewState.isFilter\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n      <ng-template #defaultFilter>\n        <span\n          [ngClass]=\"['dv-action', filterCustomClass ? filterCustomClass : '']\"\n          [class.is-open]=\"showFilterChild\"\n          (click)=\"toggleChildView('filter')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n          <span>Filter</span\n          ><span class=\"dv-count\">{{ selectedFilterTableCount }}</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showFilterChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n               projected panel stays change-detected and reflects host state\n               updates (e.g. restored filters) even while collapsed. -->\n          <ng-content select=\"[filter-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--import Section-->\n    <ng-container\n      [appOutSideClick]=\"showImportChild\"\n      (outSideClick)=\"resetChildViewsExcept('import')\"\n      *ngIf=\"viewState.isImport\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"importTemplate; else defaultImport\"></ng-container>\n      <ng-template #defaultImport>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? importCustomClass : '']\"\n          [class.is-open]=\"showImportChild\"\n          (click)=\"toggleChildView('import')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'file'\"></verben-svg>\n          <span>Import</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[import-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Sort Section -->\n    <ng-container\n      [appOutSideClick]=\"showSortChild\"\n      (outSideClick)=\"resetChildViewsExcept('sort')\"\n      *ngIf=\"viewState.isSort\"\n    >\n      <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n      <ng-template #defaultSort>\n        <span\n          [ngClass]=\"['dv-action', sortCustomClass ? sortCustomClass : '']\"\n          [class.is-open]=\"showSortChild\"\n          (click)=\"toggleChildView('sort')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n          <span>Sort</span><span class=\"dv-count\">{{ selectedSortCount }}</span>\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showSortChild\"\n            select=\"[sort-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--Extend Section-->\n    <ng-container\n      [appOutSideClick]=\"showExtendChild\"\n      (outSideClick)=\"resetChildViewsExcept('extend')\"\n      *ngIf=\"viewState.isExtend\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"extendTemplate; else defaultExtend\"></ng-container>\n      <ng-template #defaultExtend>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? extendCustomClass : '']\"\n          [class.is-open]=\"showExtendChild\"\n          (click)=\"toggleChildView('extend')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'extend'\"></verben-svg>\n          <span>Extend</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[extend-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Export Section -->\n    <ng-container\n      [appOutSideClick]=\"showExportChild\"\n      (outSideClick)=\"resetChildViewsExcept('export')\"\n      *ngIf=\"viewState.isExport\"\n    >\n      <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n      <ng-template #defaultExport>\n        <span\n          [ngClass]=\"['dv-action', exportCustomClass ? exportCustomClass : '']\"\n          [class.is-open]=\"showExportChild\"\n          (click)=\"toggleChildView('export')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n          Export\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showExportChild\"\n            select=\"[export-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Select Section -->\n    <!-- <div *ngIf=\"viewState.isSelect\">\n     <span\n       [ngClass]=\"[\n         'flex gap text-xs items-center pd rounded cursor-pointer',\n         selectCustomClass ? selectCustomClass : ''\n       ]\"\n       [style.background-color]=\"'var(--vbn-color-surface-alt)'\"\n       (click)=\"toggleChildView('select')\"\n     >\n       <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n       <span>Select</span>\n       <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n     </span>\n   </div> -->\n\n    <!-- Create Button jj-->\n\n    <div\n      [appOutSideClick]=\"create\"\n      (outSideClick)=\"resetChildViewsExcept('create')\"\n      *ngIf=\"viewState.isCreate\"\n    >\n      <verbena-button\n        [bgColor]=\"'var(--vbn-color-primary)'\"\n        [buttonClass]=\"createCustomClass\"\n        [textColor]=\"'var(--vbn-color-on-primary)'\"\n        [svg]=\"'add'\"\n        [svgPosition]=\"'right'\"\n        [text]=\"'Create New'\"\n        (click)=\"toggleChildView('create')\"\n      >\n      </verbena-button>\n      <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n      <ng-template #defaultCreate>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content *ngIf=\"create\" select=\"[create-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"children\">\n    <ng-container *ngIf=\"children; else defaultChildren\"></ng-container>\n    <ng-template #defaultChildren>\n      <div>\n        <ng-content select=\"[children]\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n  <div [style.overflow]=\"'auto'\" [class]=\"tableClass\">\n    <ng-content select=\"[table-content]\"></ng-content>\n  </div>\n</div>\n<ng-template #listViewTemplate>\n  <div [class]=\"cardClass\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);cursor:pointer}.toggle-button-container button:focus-visible{outline:2px solid var(--vbn-color-border-focus);outline-offset:1px}.input-class{border:none;min-width:100%;display:block}.toggle-button-container verben-svg{display:inline-grid;place-items:center;width:28px;height:28px;box-sizing:border-box;padding:4px;border-radius:6px;transition:background-color .15s ease}.toggle-button-container verben-svg.active{background-color:var(--vbn-color-surface-alt);box-shadow:0 1px 2px #0000001a}.justify-end{justify-self:end}.flex{display:flex}.flex-1{flex:1}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:85px;max-width:100%;height:36px;box-sizing:border-box;padding:0 32px 0 10px;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus-within{border-color:var(--vbn-color-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--vbn-color-border-focus) 18%,transparent)}.search-input input{display:block;width:100%;min-width:0;padding:0;outline:0;background-color:transparent;color:var(--vbn-color-text);font:inherit;font-size:14px}.search-input input::placeholder{color:var(--vbn-color-text-muted);font-size:14px}sup{color:var(--vbn-color-border-focus);font-weight:500}.data-view-element{position:absolute;top:calc(100% + 6px);right:0;max-width:100%;text-align:left}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;top:50%;right:8px;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;transform:translateY(-50%);cursor:pointer}.close-icon-class:hover{background-color:var(--vbn-color-surface-alt)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dv-search-group{display:flex;align-items:center;gap:8px;flex:1 1 150px;min-width:0}.dv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.dv-action{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease}.dv-action:hover{background-color:var(--vbn-color-surface-alt)}.dv-action.is-open{border-color:var(--vbn-color-text-muted);background-color:var(--vbn-color-surface-alt)}.dv-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background-color:var(--vbn-color-surface-alt);box-shadow:inset 0 0 0 1px var(--vbn-color-border);color:var(--vbn-color-text-muted);font-size:11px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "styleType", "size", "block", "disable", "disabled", "isLoading", "spinnerSize", "spinnerColor", "svg", "svgPosition", "svgWidth", "svgHeight", "svgSize", "svgColor", "icon", "useIcon", "iconPosition", "iconColor", "variant", "weight", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i4.OutSideClickDirective, selector: "[appOutSideClick]", inputs: ["appOutSideClick"], outputs: ["outSideClick"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DataViewComponent, selector: "verben-data-view", inputs: { buttonClass: "buttonClass", iconClass: "iconClass", activeIconClass: "activeIconClass", columnCustomClass: "columnCustomClass", filterCustomClass: "filterCustomClass", sortCustomClass: "sortCustomClass", extendCustomClass: "extendCustomClass", exportCustomClass: "exportCustomClass", selectCustomClass: "selectCustomClass", importCustomClass: "importCustomClass", zIndex: "zIndex", createCustomClass: "createCustomClass", tableIcon: "tableIcon", cardIcon: "cardIcon", cardClass: "cardClass", tableClass: "tableClass", searchKey: "searchKey", searchValue: "searchValue", viewState: "viewState", searchTemplate: "searchTemplate", importTemplate: "importTemplate", columnTemplate: "columnTemplate", extendTemplate: "extendTemplate", filterTemplate: "filterTemplate", sortTemplate: "sortTemplate", children: "children", exportTemplate: "exportTemplate", createTemplate: "createTemplate", selectedColumnCount: "selectedColumnCount", selectedSortCount: "selectedSortCount", selectedFilterTableCount: "selectedFilterTableCount", inputWidth: "inputWidth", milliseconds: "milliseconds", showColumnChild: "showColumnChild", showSortChild: "showSortChild", showFilterChild: "showFilterChild", showImportChild: "showImportChild", showExportChild: "showExportChild", showExtendChild: "showExtendChild", create: "create", showSelected: "showSelected", useTwoWayBinding: "useTwoWayBinding", isTableView: "isTableView" }, outputs: { viewChange: "viewChange", stateChange: "stateChange", onSearchChange: "onSearchChange" }, viewQueries: [{ propertyName: "filterContentWrapper", first: true, predicate: ["filterContentWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div class=\"dv-search-group\">\n    <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n      <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n        <verben-svg\n          [icon]=\"tableIcon\"\n          [class.active]=\"!isTableView\"\n          [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n        ></verben-svg>\n        <verben-svg\n          [icon]=\"cardIcon\"\n          [class.active]=\"isTableView\"\n          [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n          [width]=\"25\"\n          [height]=\"25\"\n        ></verben-svg>\n      </button>\n    </div>\n    <!-- Search Input -->\n    <div\n      [style.width]=\"inputWidth\"\n      class=\"search-input\"\n      *ngIf=\"viewState.isSearch\"\n    >\n      <verben-svg [icon]=\"'search2'\" [width]=\"20\" [height]=\"20\"></verben-svg>\n      <input\n        *ngIf=\"!useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [value]=\"searchValue\"\n      />\n      <input\n        *ngIf=\"useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [(ngModel)]=\"searchValue\"\n      />\n      <verben-svg\n        *ngIf=\"searchValue.length > 0\"\n        [icon]=\"'close'\"\n        [width]=\"15\"\n        (click)=\"onClearSearch()\"\n        class=\"close-icon-class\"\n        [height]=\"15\"\n      ></verben-svg>\n    </div>\n  </div>\n  <div class=\"relative dv-actions\">\n    <!-- Column Section -->\n    <ng-container\n      [appOutSideClick]=\"showColumnChild\"\n      (outSideClick)=\"resetChildViewsExcept('column')\"\n      *ngIf=\"viewState.isColumn && isTableView\"\n    >\n      <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n      <ng-template #defaultColumn>\n        <span\n          [ngClass]=\"['dv-action', columnCustomClass ? columnCustomClass : '']\"\n          [class.is-open]=\"showColumnChild\"\n          (click)=\"toggleChildView('column')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n          <span>Columns</span\n          ><span class=\"dv-count\">{{ selectedColumnCount }}</span>\n        </span>\n        <div\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showColumnChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n              projected panel stays change-detected and reflects host state\n              updates (e.g. restored column arrangement) even while collapsed. -->\n          <ng-content select=\"[column-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Filter Section -->\n    <ng-container\n      [appOutSideClick]=\"showFilterChild\"\n      (outSideClick)=\"resetChildViewsExcept('filter')\"\n      *ngIf=\"viewState.isFilter\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n      <ng-template #defaultFilter>\n        <span\n          [ngClass]=\"['dv-action', filterCustomClass ? filterCustomClass : '']\"\n          [class.is-open]=\"showFilterChild\"\n          (click)=\"toggleChildView('filter')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n          <span>Filter</span\n          ><span class=\"dv-count\">{{ selectedFilterTableCount }}</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showFilterChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n               projected panel stays change-detected and reflects host state\n               updates (e.g. restored filters) even while collapsed. -->\n          <ng-content select=\"[filter-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--import Section-->\n    <ng-container\n      [appOutSideClick]=\"showImportChild\"\n      (outSideClick)=\"resetChildViewsExcept('import')\"\n      *ngIf=\"viewState.isImport\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"importTemplate; else defaultImport\"></ng-container>\n      <ng-template #defaultImport>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? importCustomClass : '']\"\n          [class.is-open]=\"showImportChild\"\n          (click)=\"toggleChildView('import')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'file'\"></verben-svg>\n          <span>Import</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[import-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Sort Section -->\n    <ng-container\n      [appOutSideClick]=\"showSortChild\"\n      (outSideClick)=\"resetChildViewsExcept('sort')\"\n      *ngIf=\"viewState.isSort\"\n    >\n      <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n      <ng-template #defaultSort>\n        <span\n          [ngClass]=\"['dv-action', sortCustomClass ? sortCustomClass : '']\"\n          [class.is-open]=\"showSortChild\"\n          (click)=\"toggleChildView('sort')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n          <span>Sort</span><span class=\"dv-count\">{{ selectedSortCount }}</span>\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showSortChild\"\n            select=\"[sort-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--Extend Section-->\n    <ng-container\n      [appOutSideClick]=\"showExtendChild\"\n      (outSideClick)=\"resetChildViewsExcept('extend')\"\n      *ngIf=\"viewState.isExtend\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"extendTemplate; else defaultExtend\"></ng-container>\n      <ng-template #defaultExtend>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? extendCustomClass : '']\"\n          [class.is-open]=\"showExtendChild\"\n          (click)=\"toggleChildView('extend')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'extend'\"></verben-svg>\n          <span>Extend</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[extend-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Export Section -->\n    <ng-container\n      [appOutSideClick]=\"showExportChild\"\n      (outSideClick)=\"resetChildViewsExcept('export')\"\n      *ngIf=\"viewState.isExport\"\n    >\n      <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n      <ng-template #defaultExport>\n        <span\n          [ngClass]=\"['dv-action', exportCustomClass ? exportCustomClass : '']\"\n          [class.is-open]=\"showExportChild\"\n          (click)=\"toggleChildView('export')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n          Export\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showExportChild\"\n            select=\"[export-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Select Section -->\n    <!-- <div *ngIf=\"viewState.isSelect\">\n     <span\n       [ngClass]=\"[\n         'flex gap text-xs items-center pd rounded cursor-pointer',\n         selectCustomClass ? selectCustomClass : ''\n       ]\"\n       [style.background-color]=\"'var(--vbn-color-surface-alt)'\"\n       (click)=\"toggleChildView('select')\"\n     >\n       <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n       <span>Select</span>\n       <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n     </span>\n   </div> -->\n\n    <!-- Create Button jj-->\n\n    <div\n      [appOutSideClick]=\"create\"\n      (outSideClick)=\"resetChildViewsExcept('create')\"\n      *ngIf=\"viewState.isCreate\"\n    >\n      <verbena-button\n        [bgColor]=\"'var(--vbn-color-primary)'\"\n        [buttonClass]=\"createCustomClass\"\n        [textColor]=\"'var(--vbn-color-on-primary)'\"\n        [svg]=\"'add'\"\n        [svgPosition]=\"'right'\"\n        [text]=\"'Create New'\"\n        (click)=\"toggleChildView('create')\"\n      >\n      </verbena-button>\n      <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n      <ng-template #defaultCreate>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content *ngIf=\"create\" select=\"[create-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"children\">\n    <ng-container *ngIf=\"children; else defaultChildren\"></ng-container>\n    <ng-template #defaultChildren>\n      <div>\n        <ng-content select=\"[children]\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n  <div [style.overflow]=\"'auto'\" [class]=\"tableClass\">\n    <ng-content select=\"[table-content]\"></ng-content>\n  </div>\n</div>\n<ng-template #listViewTemplate>\n  <div [class]=\"cardClass\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);cursor:pointer}.toggle-button-container button:focus-visible{outline:2px solid var(--vbn-color-border-focus);outline-offset:1px}.input-class{border:none;min-width:100%;display:block}.toggle-button-container verben-svg{display:inline-grid;place-items:center;width:28px;height:28px;box-sizing:border-box;padding:4px;border-radius:6px;transition:background-color .15s ease}.toggle-button-container verben-svg.active{background-color:var(--vbn-color-surface-alt);box-shadow:0 1px 2px #0000001a}.justify-end{justify-self:end}.flex{display:flex}.flex-1{flex:1}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:85px;max-width:100%;height:36px;box-sizing:border-box;padding:0 32px 0 10px;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus-within{border-color:var(--vbn-color-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--vbn-color-border-focus) 18%,transparent)}.search-input input{display:block;width:100%;min-width:0;padding:0;outline:0;background-color:transparent;color:var(--vbn-color-text);font:inherit;font-size:14px}.search-input input::placeholder{color:var(--vbn-color-text-muted);font-size:14px}sup{color:var(--vbn-color-border-focus);font-weight:500}.data-view-element{position:absolute;top:calc(100% + 6px);right:0;max-width:100%;text-align:left}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;top:50%;right:8px;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;transform:translateY(-50%);cursor:pointer}.close-icon-class:hover{background-color:var(--vbn-color-surface-alt)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dv-search-group{display:flex;align-items:center;gap:8px;flex:1 1 155px;min-width:0}.dv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.dv-action{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease}.dv-action:hover{background-color:var(--vbn-color-surface-alt)}.dv-action.is-open{border-color:var(--vbn-color-text-muted);background-color:var(--vbn-color-surface-alt)}.dv-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background-color:var(--vbn-color-surface-alt);box-shadow:inset 0 0 0 1px var(--vbn-color-border);color:var(--vbn-color-text-muted);font-size:11px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "styleType", "size", "block", "disable", "disabled", "isLoading", "spinnerSize", "spinnerColor", "svg", "svgPosition", "svgWidth", "svgHeight", "svgSize", "svgColor", "icon", "useIcon", "iconPosition", "iconColor", "variant", "weight", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i4.OutSideClickDirective, selector: "[appOutSideClick]", inputs: ["appOutSideClick"], outputs: ["outSideClick"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'verben-data-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\">\n  <div class=\"dv-search-group\">\n    <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n      <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n        <verben-svg\n          [icon]=\"tableIcon\"\n          [class.active]=\"!isTableView\"\n          [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n        ></verben-svg>\n        <verben-svg\n          [icon]=\"cardIcon\"\n          [class.active]=\"isTableView\"\n          [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n          [width]=\"25\"\n          [height]=\"25\"\n        ></verben-svg>\n      </button>\n    </div>\n    <!-- Search Input -->\n    <div\n      [style.width]=\"inputWidth\"\n      class=\"search-input\"\n      *ngIf=\"viewState.isSearch\"\n    >\n      <verben-svg [icon]=\"'search2'\" [width]=\"20\" [height]=\"20\"></verben-svg>\n      <input\n        *ngIf=\"!useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [value]=\"searchValue\"\n      />\n      <input\n        *ngIf=\"useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [(ngModel)]=\"searchValue\"\n      />\n      <verben-svg\n        *ngIf=\"searchValue.length > 0\"\n        [icon]=\"'close'\"\n        [width]=\"15\"\n        (click)=\"onClearSearch()\"\n        class=\"close-icon-class\"\n        [height]=\"15\"\n      ></verben-svg>\n    </div>\n  </div>\n  <div class=\"relative dv-actions\">\n    <!-- Column Section -->\n    <ng-container\n      [appOutSideClick]=\"showColumnChild\"\n      (outSideClick)=\"resetChildViewsExcept('column')\"\n      *ngIf=\"viewState.isColumn && isTableView\"\n    >\n      <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n      <ng-template #defaultColumn>\n        <span\n          [ngClass]=\"['dv-action', columnCustomClass ? columnCustomClass : '']\"\n          [class.is-open]=\"showColumnChild\"\n          (click)=\"toggleChildView('column')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n          <span>Columns</span\n          ><span class=\"dv-count\">{{ selectedColumnCount }}</span>\n        </span>\n        <div\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showColumnChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n              projected panel stays change-detected and reflects host state\n              updates (e.g. restored column arrangement) even while collapsed. -->\n          <ng-content select=\"[column-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Filter Section -->\n    <ng-container\n      [appOutSideClick]=\"showFilterChild\"\n      (outSideClick)=\"resetChildViewsExcept('filter')\"\n      *ngIf=\"viewState.isFilter\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n      <ng-template #defaultFilter>\n        <span\n          [ngClass]=\"['dv-action', filterCustomClass ? filterCustomClass : '']\"\n          [class.is-open]=\"showFilterChild\"\n          (click)=\"toggleChildView('filter')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n          <span>Filter</span\n          ><span class=\"dv-count\">{{ selectedFilterTableCount }}</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showFilterChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n               projected panel stays change-detected and reflects host state\n               updates (e.g. restored filters) even while collapsed. -->\n          <ng-content select=\"[filter-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--import Section-->\n    <ng-container\n      [appOutSideClick]=\"showImportChild\"\n      (outSideClick)=\"resetChildViewsExcept('import')\"\n      *ngIf=\"viewState.isImport\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"importTemplate; else defaultImport\"></ng-container>\n      <ng-template #defaultImport>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? importCustomClass : '']\"\n          [class.is-open]=\"showImportChild\"\n          (click)=\"toggleChildView('import')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'file'\"></verben-svg>\n          <span>Import</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[import-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Sort Section -->\n    <ng-container\n      [appOutSideClick]=\"showSortChild\"\n      (outSideClick)=\"resetChildViewsExcept('sort')\"\n      *ngIf=\"viewState.isSort\"\n    >\n      <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n      <ng-template #defaultSort>\n        <span\n          [ngClass]=\"['dv-action', sortCustomClass ? sortCustomClass : '']\"\n          [class.is-open]=\"showSortChild\"\n          (click)=\"toggleChildView('sort')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n          <span>Sort</span><span class=\"dv-count\">{{ selectedSortCount }}</span>\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showSortChild\"\n            select=\"[sort-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--Extend Section-->\n    <ng-container\n      [appOutSideClick]=\"showExtendChild\"\n      (outSideClick)=\"resetChildViewsExcept('extend')\"\n      *ngIf=\"viewState.isExtend\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"extendTemplate; else defaultExtend\"></ng-container>\n      <ng-template #defaultExtend>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? extendCustomClass : '']\"\n          [class.is-open]=\"showExtendChild\"\n          (click)=\"toggleChildView('extend')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'extend'\"></verben-svg>\n          <span>Extend</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[extend-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Export Section -->\n    <ng-container\n      [appOutSideClick]=\"showExportChild\"\n      (outSideClick)=\"resetChildViewsExcept('export')\"\n      *ngIf=\"viewState.isExport\"\n    >\n      <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n      <ng-template #defaultExport>\n        <span\n          [ngClass]=\"['dv-action', exportCustomClass ? exportCustomClass : '']\"\n          [class.is-open]=\"showExportChild\"\n          (click)=\"toggleChildView('export')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n          Export\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showExportChild\"\n            select=\"[export-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Select Section -->\n    <!-- <div *ngIf=\"viewState.isSelect\">\n     <span\n       [ngClass]=\"[\n         'flex gap text-xs items-center pd rounded cursor-pointer',\n         selectCustomClass ? selectCustomClass : ''\n       ]\"\n       [style.background-color]=\"'var(--vbn-color-surface-alt)'\"\n       (click)=\"toggleChildView('select')\"\n     >\n       <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n       <span>Select</span>\n       <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n     </span>\n   </div> -->\n\n    <!-- Create Button jj-->\n\n    <div\n      [appOutSideClick]=\"create\"\n      (outSideClick)=\"resetChildViewsExcept('create')\"\n      *ngIf=\"viewState.isCreate\"\n    >\n      <verbena-button\n        [bgColor]=\"'var(--vbn-color-primary)'\"\n        [buttonClass]=\"createCustomClass\"\n        [textColor]=\"'var(--vbn-color-on-primary)'\"\n        [svg]=\"'add'\"\n        [svgPosition]=\"'right'\"\n        [text]=\"'Create New'\"\n        (click)=\"toggleChildView('create')\"\n      >\n      </verbena-button>\n      <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n      <ng-template #defaultCreate>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content *ngIf=\"create\" select=\"[create-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"children\">\n    <ng-container *ngIf=\"children; else defaultChildren\"></ng-container>\n    <ng-template #defaultChildren>\n      <div>\n        <ng-content select=\"[children]\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n  <div [style.overflow]=\"'auto'\" [class]=\"tableClass\">\n    <ng-content select=\"[table-content]\"></ng-content>\n  </div>\n</div>\n<ng-template #listViewTemplate>\n  <div [class]=\"cardClass\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);cursor:pointer}.toggle-button-container button:focus-visible{outline:2px solid var(--vbn-color-border-focus);outline-offset:1px}.input-class{border:none;min-width:100%;display:block}.toggle-button-container verben-svg{display:inline-grid;place-items:center;width:28px;height:28px;box-sizing:border-box;padding:4px;border-radius:6px;transition:background-color .15s ease}.toggle-button-container verben-svg.active{background-color:var(--vbn-color-surface-alt);box-shadow:0 1px 2px #0000001a}.justify-end{justify-self:end}.flex{display:flex}.flex-1{flex:1}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:85px;max-width:100%;height:36px;box-sizing:border-box;padding:0 32px 0 10px;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus-within{border-color:var(--vbn-color-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--vbn-color-border-focus) 18%,transparent)}.search-input input{display:block;width:100%;min-width:0;padding:0;outline:0;background-color:transparent;color:var(--vbn-color-text);font:inherit;font-size:14px}.search-input input::placeholder{color:var(--vbn-color-text-muted);font-size:14px}sup{color:var(--vbn-color-border-focus);font-weight:500}.data-view-element{position:absolute;top:calc(100% + 6px);right:0;max-width:100%;text-align:left}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;top:50%;right:8px;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;transform:translateY(-50%);cursor:pointer}.close-icon-class:hover{background-color:var(--vbn-color-surface-alt)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dv-search-group{display:flex;align-items:center;gap:8px;flex:1 1 150px;min-width:0}.dv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.dv-action{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease}.dv-action:hover{background-color:var(--vbn-color-surface-alt)}.dv-action.is-open{border-color:var(--vbn-color-text-muted);background-color:var(--vbn-color-surface-alt)}.dv-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background-color:var(--vbn-color-surface-alt);box-shadow:inset 0 0 0 1px var(--vbn-color-border);color:var(--vbn-color-text-muted);font-size:11px;font-weight:600}\n"] }]
+            args: [{ selector: 'verben-data-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\">\n  <div class=\"dv-search-group\">\n    <div *ngIf=\"viewState.isToggle\" class=\"toggle-button-container\">\n      <button type=\"button\" (click)=\"toggleView()\" [ngClass]=\"buttonClass\">\n        <verben-svg\n          [icon]=\"tableIcon\"\n          [class.active]=\"!isTableView\"\n          [ngClass]=\"!isTableView ? activeIconClass : iconClass\"\n        ></verben-svg>\n        <verben-svg\n          [icon]=\"cardIcon\"\n          [class.active]=\"isTableView\"\n          [ngClass]=\"isTableView ? activeIconClass : iconClass\"\n          [width]=\"25\"\n          [height]=\"25\"\n        ></verben-svg>\n      </button>\n    </div>\n    <!-- Search Input -->\n    <div\n      [style.width]=\"inputWidth\"\n      class=\"search-input\"\n      *ngIf=\"viewState.isSearch\"\n    >\n      <verben-svg [icon]=\"'search2'\" [width]=\"20\" [height]=\"20\"></verben-svg>\n      <input\n        *ngIf=\"!useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [value]=\"searchValue\"\n      />\n      <input\n        *ngIf=\"useTwoWayBinding\"\n        [type]=\"'text'\"\n        [placeholder]=\"'Search'\"\n        (input)=\"onSearch($event)\"\n        [style.border]=\"'0'\"\n        [(ngModel)]=\"searchValue\"\n      />\n      <verben-svg\n        *ngIf=\"searchValue.length > 0\"\n        [icon]=\"'close'\"\n        [width]=\"15\"\n        (click)=\"onClearSearch()\"\n        class=\"close-icon-class\"\n        [height]=\"15\"\n      ></verben-svg>\n    </div>\n  </div>\n  <div class=\"relative dv-actions\">\n    <!-- Column Section -->\n    <ng-container\n      [appOutSideClick]=\"showColumnChild\"\n      (outSideClick)=\"resetChildViewsExcept('column')\"\n      *ngIf=\"viewState.isColumn && isTableView\"\n    >\n      <ng-container *ngIf=\"columnTemplate; else defaultColumn\"></ng-container>\n      <ng-template #defaultColumn>\n        <span\n          [ngClass]=\"['dv-action', columnCustomClass ? columnCustomClass : '']\"\n          [class.is-open]=\"showColumnChild\"\n          (click)=\"toggleChildView('column')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'column'\"></verben-svg>\n          <span>Columns</span\n          ><span class=\"dv-count\">{{ selectedColumnCount }}</span>\n        </span>\n        <div\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showColumnChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n              projected panel stays change-detected and reflects host state\n              updates (e.g. restored column arrangement) even while collapsed. -->\n          <ng-content select=\"[column-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Filter Section -->\n    <ng-container\n      [appOutSideClick]=\"showFilterChild\"\n      (outSideClick)=\"resetChildViewsExcept('filter')\"\n      *ngIf=\"viewState.isFilter\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"filterTemplate; else defaultFilter\"></ng-container>\n      <ng-template #defaultFilter>\n        <span\n          [ngClass]=\"['dv-action', filterCustomClass ? filterCustomClass : '']\"\n          [class.is-open]=\"showFilterChild\"\n          (click)=\"toggleChildView('filter')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'filter'\"></verben-svg>\n          <span>Filter</span\n          ><span class=\"dv-count\">{{ selectedFilterTableCount }}</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n          [style.display]=\"showFilterChild ? 'block' : 'none'\"\n        >\n          <!-- Kept in the DOM (hidden via display) rather than *ngIf so the\n               projected panel stays change-detected and reflects host state\n               updates (e.g. restored filters) even while collapsed. -->\n          <ng-content select=\"[filter-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--import Section-->\n    <ng-container\n      [appOutSideClick]=\"showImportChild\"\n      (outSideClick)=\"resetChildViewsExcept('import')\"\n      *ngIf=\"viewState.isImport\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"importTemplate; else defaultImport\"></ng-container>\n      <ng-template #defaultImport>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? importCustomClass : '']\"\n          [class.is-open]=\"showImportChild\"\n          (click)=\"toggleChildView('import')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'file'\"></verben-svg>\n          <span>Import</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[import-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Sort Section -->\n    <ng-container\n      [appOutSideClick]=\"showSortChild\"\n      (outSideClick)=\"resetChildViewsExcept('sort')\"\n      *ngIf=\"viewState.isSort\"\n    >\n      <ng-container *ngIf=\"sortTemplate; else defaultSort\"></ng-container>\n      <ng-template #defaultSort>\n        <span\n          [ngClass]=\"['dv-action', sortCustomClass ? sortCustomClass : '']\"\n          [class.is-open]=\"showSortChild\"\n          (click)=\"toggleChildView('sort')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'sort'\"></verben-svg>\n          <span>Sort</span><span class=\"dv-count\">{{ selectedSortCount }}</span>\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showSortChild\"\n            select=\"[sort-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!--Extend Section-->\n    <ng-container\n      [appOutSideClick]=\"showExtendChild\"\n      (outSideClick)=\"resetChildViewsExcept('extend')\"\n      *ngIf=\"viewState.isExtend\"\n      (click)=\"stopPropagation($event)\"\n    >\n      <ng-container *ngIf=\"extendTemplate; else defaultExtend\"></ng-container>\n      <ng-template #defaultExtend>\n        <span\n          [ngClass]=\"['dv-action', importCustomClass ? extendCustomClass : '']\"\n          [class.is-open]=\"showExtendChild\"\n          (click)=\"toggleChildView('extend')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'extend'\"></verben-svg>\n          <span>Extend</span>\n        </span>\n        <div\n          (click)=\"stopPropagation($event)\"\n          [style.z-index]=\"zIndex\"\n          class=\"data-view-element\"\n        >\n          <ng-content\n            *ngIf=\"showImportChild\"\n            select=\"[extend-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n    <!-- Export Section -->\n    <ng-container\n      [appOutSideClick]=\"showExportChild\"\n      (outSideClick)=\"resetChildViewsExcept('export')\"\n      *ngIf=\"viewState.isExport\"\n    >\n      <ng-container *ngIf=\"exportTemplate; else defaultExport\"></ng-container>\n      <ng-template #defaultExport>\n        <span\n          [ngClass]=\"['dv-action', exportCustomClass ? exportCustomClass : '']\"\n          [class.is-open]=\"showExportChild\"\n          (click)=\"toggleChildView('export')\"\n        >\n          <verben-svg [width]=\"15\" [icon]=\"'export'\"></verben-svg>\n          Export\n        </span>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content\n            *ngIf=\"showExportChild\"\n            select=\"[export-content]\"\n          ></ng-content>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <!-- Select Section -->\n    <!-- <div *ngIf=\"viewState.isSelect\">\n     <span\n       [ngClass]=\"[\n         'flex gap text-xs items-center pd rounded cursor-pointer',\n         selectCustomClass ? selectCustomClass : ''\n       ]\"\n       [style.background-color]=\"'var(--vbn-color-surface-alt)'\"\n       (click)=\"toggleChildView('select')\"\n     >\n       <verben-svg [width]=\"15\" [icon]=\"'select'\"></verben-svg>\n       <span>Select</span>\n       <verben-svg [width]=\"6\" [icon]=\"'chevron-down'\"></verben-svg>\n     </span>\n   </div> -->\n\n    <!-- Create Button jj-->\n\n    <div\n      [appOutSideClick]=\"create\"\n      (outSideClick)=\"resetChildViewsExcept('create')\"\n      *ngIf=\"viewState.isCreate\"\n    >\n      <verbena-button\n        [bgColor]=\"'var(--vbn-color-primary)'\"\n        [buttonClass]=\"createCustomClass\"\n        [textColor]=\"'var(--vbn-color-on-primary)'\"\n        [svg]=\"'add'\"\n        [svgPosition]=\"'right'\"\n        [text]=\"'Create New'\"\n        (click)=\"toggleChildView('create')\"\n      >\n      </verbena-button>\n      <ng-container *ngIf=\"createTemplate; else defaultCreate\"></ng-container>\n      <ng-template #defaultCreate>\n        <div [style.z-index]=\"zIndex\" class=\"data-view-element\">\n          <ng-content *ngIf=\"create\" select=\"[create-content]\"></ng-content>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n\n  <div *ngIf=\"children\">\n    <ng-container *ngIf=\"children; else defaultChildren\"></ng-container>\n    <ng-template #defaultChildren>\n      <div>\n        <ng-content select=\"[children]\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</div>\n\n<!-- Grid and List View Handling -->\n<div *ngIf=\"isTableView; else listViewTemplate\">\n  <div [style.overflow]=\"'auto'\" [class]=\"tableClass\">\n    <ng-content select=\"[table-content]\"></ng-content>\n  </div>\n</div>\n<ng-template #listViewTemplate>\n  <div [class]=\"cardClass\">\n    <ng-content select=\"[card-content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".toggle-button-container button{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);cursor:pointer}.toggle-button-container button:focus-visible{outline:2px solid var(--vbn-color-border-focus);outline-offset:1px}.input-class{border:none;min-width:100%;display:block}.toggle-button-container verben-svg{display:inline-grid;place-items:center;width:28px;height:28px;box-sizing:border-box;padding:4px;border-radius:6px;transition:background-color .15s ease}.toggle-button-container verben-svg.active{background-color:var(--vbn-color-surface-alt);box-shadow:0 1px 2px #0000001a}.justify-end{justify-self:end}.flex{display:flex}.flex-1{flex:1}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.text-xs{font-size:12px}.gap{gap:7px}.pd{padding:5px 8px}.rounded-sm{border-radius:10px}.cursor-pointer{cursor:pointer}.search-input{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:85px;max-width:100%;height:36px;box-sizing:border-box;padding:0 32px 0 10px;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text-muted);transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus-within{border-color:var(--vbn-color-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--vbn-color-border-focus) 18%,transparent)}.search-input input{display:block;width:100%;min-width:0;padding:0;outline:0;background-color:transparent;color:var(--vbn-color-text);font:inherit;font-size:14px}.search-input input::placeholder{color:var(--vbn-color-text-muted);font-size:14px}sup{color:var(--vbn-color-border-focus);font-weight:500}.data-view-element{position:absolute;top:calc(100% + 6px);right:0;max-width:100%;text-align:left}.relative{position:relative}.z-10{z-index:100000000000}.close-icon-class{position:absolute;top:50%;right:8px;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;transform:translateY(-50%);cursor:pointer}.close-icon-class:hover{background-color:var(--vbn-color-surface-alt)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dv-search-group{display:flex;align-items:center;gap:8px;flex:1 1 155px;min-width:0}.dv-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.dv-action{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;box-sizing:border-box;border:1px solid var(--vbn-color-border);border-radius:8px;background-color:var(--vbn-color-surface);color:var(--vbn-color-text);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease}.dv-action:hover{background-color:var(--vbn-color-surface-alt)}.dv-action.is-open{border-color:var(--vbn-color-text-muted);background-color:var(--vbn-color-surface-alt)}.dv-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background-color:var(--vbn-color-surface-alt);box-shadow:inset 0 0 0 1px var(--vbn-color-border);color:var(--vbn-color-text-muted);font-size:11px;font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { buttonClass: [{
                 type: Input
             }], iconClass: [{