verben-ng-ui 0.0.2 → 0.0.4

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

@@ -9,13 +9,32 @@ export class LeftCardDataComponent {
     activeCss;
     inActiveCss;
     cardDataList = [];
+    iconCollapse = "plus";
+    iconExpanded = "minus";
+    parent;
     card;
+    cardChild;
+    dataId; //what to use to identify each data
+    // currentItem:any={};
+    showToggle(item) {
+        // showToggle() && item.children.length>0
+        return this.cardDataList.filter(_ => _.selected).length > 0 && item.children.length > 0;
+    }
+    showChildren(item) {
+        var currToggleState = item.isChildrenExpanded;
+        this.cardDataList.forEach(_ => {
+            _.isChildrenExpanded = false;
+            _.selected = false;
+        });
+        this.parent.onItemClick(item);
+        item.isChildrenExpanded = !currToggleState;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LeftCardDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: LeftCardDataComponent, selector: "verben-left-card-data", inputs: { pd: "pd", mg: "mg", height: "height", weight: "weight", activeCss: "activeCss", inActiveCss: "inActiveCss", cardDataList: "cardDataList" }, queries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true }], ngImport: i0, template: "            @for (item of cardDataList; track item.title) {\n                <ng-content  *ngTemplateOutlet=\"card;context: {$implicit: item}\"></ng-content>\n            }\n\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;justify-content:center;padding:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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", dataId: "dataId" }, queries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true }, { propertyName: "cardChild", first: true, predicate: ["cardChild"], descendants: true }], ngImport: i0, template: "            @for (item of cardDataList; track  $index) {\n                <div class=\"flex\">\n                    <div class=\"flex-col full-width\">\n                        <ng-content  *ngTemplateOutlet=\"card;context: {$implicit: item}\"></ng-content>\n                        <!-- children -->\n                        <div class=\"childrenPadding flex-col flex\" *ngIf=\"item.children.length>0 && item.isChildrenExpanded\"> \n                           @for (child of item.children; track  $index) {\n                            <ng-content  *ngTemplateOutlet=\"cardChild;context: {index:$index, $implicit: child}\"></ng-content>\n                           }\n                        </div>\n                    </div>\n                </div>\n                \n            }\n\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;justify-content:center;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{width:100%;padding:10px 10px 10px 15%;display:flex;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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LeftCardDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'verben-left-card-data', template: "            @for (item of cardDataList; track item.title) {\n                <ng-content  *ngTemplateOutlet=\"card;context: {$implicit: item}\"></ng-content>\n            }\n\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;justify-content:center;padding:15px}\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                        <ng-content  *ngTemplateOutlet=\"card;context: {$implicit: item}\"></ng-content>\n                        <!-- children -->\n                        <div class=\"childrenPadding flex-col flex\" *ngIf=\"item.children.length>0 && item.isChildrenExpanded\"> \n                           @for (child of item.children; track  $index) {\n                            <ng-content  *ngTemplateOutlet=\"cardChild;context: {index:$index, $implicit: child}\"></ng-content>\n                           }\n                        </div>\n                    </div>\n                </div>\n                \n            }\n\n", styles: [":host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;justify-content:center;padding:15px}.pad15{padding:5px}.center-icon{align-items:center}.full-width{width:100%}.childrenPadding{width:100%;padding:10px 10px 10px 15%;display:flex;gap:10px}\n"] }]
         }], propDecorators: { pd: [{
                 type: Input
             }], mg: [{
@@ -30,8 +49,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 type: Input
             }], cardDataList: [{
                 type: Input
+            }], iconCollapse: [{
+                type: Input
+            }], iconExpanded: [{
+                type: Input
+            }], parent: [{
+                type: Input
             }], card: [{
                 type: ContentChild,
                 args: ['card']
+            }], cardChild: [{
+                type: ContentChild,
+                args: ['cardChild']
+            }], dataId: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVmdC1jYXJkLWRhdGEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9sZWZ0LWNhcmQtZGF0YS9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L2xlZnQtY2FyZC1kYXRhL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQzs7O0FBUTVFLE1BQU0sT0FBTyxxQkFBcUI7SUFDdkIsRUFBRSxHQUFHLE1BQU0sQ0FBQztJQUNaLEVBQUUsR0FBRyxLQUFLLENBQUM7SUFDWCxNQUFNLEdBQVMsTUFBTSxDQUFDO0lBQ3RCLE1BQU0sR0FBUyxNQUFNLENBQUM7SUFDdEIsU0FBUyxDQUFVO0lBQ25CLFdBQVcsQ0FBVTtJQUNyQixZQUFZLEdBQVksRUFBRSxDQUFDO0lBQ2QsSUFBSSxDQUFvQjt1R0FSbkMscUJBQXFCOzJGQUFyQixxQkFBcUIsNlNDUmxDLGtMQUlBOzsyRkRJYSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsdUJBQXVCOzhCQUt4QixFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ2dCLElBQUk7c0JBQXpCLFlBQVk7dUJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmREYXRhIH0gZnJvbSAnLi4vY2FyZC1kYXRhJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLWxlZnQtY2FyZC1kYXRhJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIExlZnRDYXJkRGF0YUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHBkID0gJzEwcHgnO1xuICBASW5wdXQoKSBtZyA9ICcwcHgnO1xuICBASW5wdXQoKSBoZWlnaHQ/OnN0cmluZz1cIjEwMCVcIjtcbiAgQElucHV0KCkgd2VpZ2h0PzpzdHJpbmc9XCIxMDAlXCI7XG4gIEBJbnB1dCgpIGFjdGl2ZUNzcz86c3RyaW5nIDtcbiAgQElucHV0KCkgaW5BY3RpdmVDc3M/OnN0cmluZyA7XG4gIEBJbnB1dCgpIGNhcmREYXRhTGlzdDpDYXJkRGF0YVtdPVtdO1xuICBAQ29udGVudENoaWxkKCdjYXJkJykgY2FyZCE6IFRlbXBsYXRlUmVmPGFueT47XG5cbn1cbiIsIiAgICAgICAgICAgIEBmb3IgKGl0ZW0gb2YgY2FyZERhdGFMaXN0OyB0cmFjayBpdGVtLnRpdGxlKSB7XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZDtjb250ZXh0OiB7JGltcGxpY2l0OiBpdGVtfVwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgIH1cblxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVmdC1jYXJkLWRhdGEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9sZWZ0LWNhcmQtZGF0YS9sZWZ0LWNhcmQtZGF0YS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L2xlZnQtY2FyZC1kYXRhL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQzs7O0FBUzVFLE1BQU0sT0FBTyxxQkFBcUI7SUFDdkIsRUFBRSxHQUFHLE1BQU0sQ0FBQztJQUNaLEVBQUUsR0FBRyxLQUFLLENBQUM7SUFDWCxNQUFNLEdBQVMsTUFBTSxDQUFDO0lBQ3RCLE1BQU0sR0FBUyxNQUFNLENBQUM7SUFDdEIsU0FBUyxDQUFVO0lBQ25CLFdBQVcsQ0FBVTtJQUNyQixZQUFZLEdBQVksRUFBRSxDQUFDO0lBQzNCLFlBQVksR0FBUSxNQUFNLENBQUM7SUFDM0IsWUFBWSxHQUFRLE9BQU8sQ0FBQztJQUM1QixNQUFNLENBQXdCO0lBQ2pCLElBQUksQ0FBb0I7SUFDbkIsU0FBUyxDQUFvQjtJQUMvQyxNQUFNLENBQVMsQ0FBQyxtQ0FBbUM7SUFDNUQsc0JBQXNCO0lBQ3RCLFVBQVUsQ0FBQyxJQUFhO1FBRXRCLHlDQUF5QztRQUMxQyxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQSxFQUFFLENBQUEsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sR0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUMsQ0FBQyxDQUFBO0lBQ2xGLENBQUM7SUFDRCxZQUFZLENBQUMsSUFBYTtRQUV4QixJQUFJLGVBQWUsR0FBRSxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDN0MsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFBLEVBQUU7WUFDM0IsQ0FBQyxDQUFDLGtCQUFrQixHQUFDLEtBQUssQ0FBQTtZQUMxQixDQUFDLENBQUMsUUFBUSxHQUFDLEtBQUssQ0FBQztRQUNuQixDQUFDLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzlCLElBQUksQ0FBQyxrQkFBa0IsR0FBQyxDQUFDLGVBQWUsQ0FBQTtJQUMxQyxDQUFDO3VHQTdCVSxxQkFBcUI7MkZBQXJCLHFCQUFxQixzZUNUbEMsc3hCQWVBOzsyRkROYSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsdUJBQXVCOzhCQUt4QixFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDZ0IsSUFBSTtzQkFBekIsWUFBWTt1QkFBQyxNQUFNO2dCQUNPLFNBQVM7c0JBQW5DLFlBQVk7dUJBQUMsV0FBVztnQkFDaEIsTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZERhdGEgfSBmcm9tICcuLi9jYXJkLWRhdGEnO1xuaW1wb3J0IHsgQ2FyZERhdGFWaWV3Q29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC1kYXRhLXZpZXcuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLWxlZnQtY2FyZC1kYXRhJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2xlZnQtY2FyZC1kYXRhLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIExlZnRDYXJkRGF0YUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHBkID0gJzEwcHgnO1xuICBASW5wdXQoKSBtZyA9ICcwcHgnO1xuICBASW5wdXQoKSBoZWlnaHQ/OnN0cmluZz1cIjEwMCVcIjtcbiAgQElucHV0KCkgd2VpZ2h0PzpzdHJpbmc9XCIxMDAlXCI7XG4gIEBJbnB1dCgpIGFjdGl2ZUNzcz86c3RyaW5nIDtcbiAgQElucHV0KCkgaW5BY3RpdmVDc3M/OnN0cmluZyA7XG4gIEBJbnB1dCgpIGNhcmREYXRhTGlzdDpDYXJkRGF0YVtdPVtdO1xuICBASW5wdXQoKSBpY29uQ29sbGFwc2U6c3RyaW5nPVwicGx1c1wiO1xuICBASW5wdXQoKSBpY29uRXhwYW5kZWQ6c3RyaW5nPVwibWludXNcIjtcbiAgQElucHV0KCkgcGFyZW50ITpDYXJkRGF0YVZpZXdDb21wb25lbnQ7XG4gIEBDb250ZW50Q2hpbGQoJ2NhcmQnKSBjYXJkITogVGVtcGxhdGVSZWY8YW55PjtcbiAgQENvbnRlbnRDaGlsZCgnY2FyZENoaWxkJykgY2FyZENoaWxkITogVGVtcGxhdGVSZWY8YW55PjtcbiAgQElucHV0KCkgZGF0YUlkITpzdHJpbmc7IC8vd2hhdCB0byB1c2UgdG8gaWRlbnRpZnkgZWFjaCBkYXRhXG4gIC8vIGN1cnJlbnRJdGVtOmFueT17fTtcbiAgc2hvd1RvZ2dsZShpdGVtOkNhcmREYXRhKVxuICB7XG4gICAgLy8gc2hvd1RvZ2dsZSgpICYmIGl0ZW0uY2hpbGRyZW4ubGVuZ3RoPjBcbiAgIHJldHVybiB0aGlzLmNhcmREYXRhTGlzdC5maWx0ZXIoXz0+Xy5zZWxlY3RlZCkubGVuZ3RoPjAgJiYgaXRlbS5jaGlsZHJlbi5sZW5ndGg+MFxuICB9XG4gIHNob3dDaGlsZHJlbihpdGVtOkNhcmREYXRhKVxuICB7XG4gICAgdmFyIGN1cnJUb2dnbGVTdGF0ZT0gaXRlbS5pc0NoaWxkcmVuRXhwYW5kZWQ7XG4gICAgdGhpcy5jYXJkRGF0YUxpc3QuZm9yRWFjaChfPT57XG4gICAgICBfLmlzQ2hpbGRyZW5FeHBhbmRlZD1mYWxzZVxuICAgICAgXy5zZWxlY3RlZD1mYWxzZTtcbiAgICB9KTtcbiAgICB0aGlzLnBhcmVudC5vbkl0ZW1DbGljayhpdGVtKTtcbiAgICBpdGVtLmlzQ2hpbGRyZW5FeHBhbmRlZD0hY3VyclRvZ2dsZVN0YXRlXG4gIH1cblxufVxuIiwiICAgICAgICAgICAgQGZvciAoaXRlbSBvZiBjYXJkRGF0YUxpc3Q7IHRyYWNrICAkaW5kZXgpIHtcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleFwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleC1jb2wgZnVsbC13aWR0aFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZDtjb250ZXh0OiB7JGltcGxpY2l0OiBpdGVtfVwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwhLS0gY2hpbGRyZW4gLS0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hpbGRyZW5QYWRkaW5nIGZsZXgtY29sIGZsZXhcIiAqbmdJZj1cIml0ZW0uY2hpbGRyZW4ubGVuZ3RoPjAgJiYgaXRlbS5pc0NoaWxkcmVuRXhwYW5kZWRcIj4gXG4gICAgICAgICAgICAgICAgICAgICAgICAgICBAZm9yIChjaGlsZCBvZiBpdGVtLmNoaWxkcmVuOyB0cmFjayAgJGluZGV4KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2FyZENoaWxkO2NvbnRleHQ6IHtpbmRleDokaW5kZXgsICRpbXBsaWNpdDogY2hpbGR9XCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIFxuICAgICAgICAgICAgfVxuXG4iXX0=

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

@@ -1,11 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, ContentChild, Input } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
 export class RightCardDataViewComponent {
+    parent;
+    child;
+    parentData;
+    chilData;
+    meth(d) {
+        console.log(this.parent);
+        console.log(this.chilData);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RightCardDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: RightCardDataViewComponent, selector: "verben-right-card-data-view", ngImport: i0, template: "  <ng-content></ng-content>  \n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: { parentData: "parentData", chilData: "chilData", meth: "meth" }, queries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: true }, { propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, template: "     <ng-container *ngIf=\"parentData && !chilData\">\n        <ng-content *ngTemplateOutlet=\"parent\"></ng-content>\n     </ng-container>\n     <ng-container *ngIf=\"chilData\">\n        <ng-content *ngTemplateOutlet=\"child\"></ng-content>  \n     </ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RightCardDataViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'verben-right-card-data-view', template: "  <ng-content></ng-content>  \n" }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmlnaHQtY2FyZC1kYXRhLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9yaWdodC1jYXJkLWRhdGEtdmlldy9yaWdodC1jYXJkLWRhdGEtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L3JpZ2h0LWNhcmQtZGF0YS12aWV3L3JpZ2h0LWNhcmQtZGF0YS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVMsTUFBTSxlQUFlLENBQUM7O0FBT2pELE1BQU0sT0FBTywwQkFBMEI7dUdBQTFCLDBCQUEwQjsyRkFBMUIsMEJBQTBCLG1FQ1B2QyxpQ0FDQTs7MkZETWEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNFLDZCQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmVyYmVuLXJpZ2h0LWNhcmQtZGF0YS12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3JpZ2h0LWNhcmQtZGF0YS12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3JpZ2h0LWNhcmQtZGF0YS12aWV3LmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIFJpZ2h0Q2FyZERhdGFWaWV3Q29tcG9uZW50IHtcblxufVxuIiwiICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+ICBcbiJdfQ==
+            args: [{ selector: 'verben-right-card-data-view', template: "     <ng-container *ngIf=\"parentData && !chilData\">\n        <ng-content *ngTemplateOutlet=\"parent\"></ng-content>\n     </ng-container>\n     <ng-container *ngIf=\"chilData\">\n        <ng-content *ngTemplateOutlet=\"child\"></ng-content>  \n     </ng-container>\n" }]
+        }], propDecorators: { parent: [{
+                type: ContentChild,
+                args: ['parent']
+            }], child: [{
+                type: ContentChild,
+                args: ['child']
+            }], parentData: [{
+                type: Input
+            }], chilData: [{
+                type: Input
+            }], meth: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmlnaHQtY2FyZC1kYXRhLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXJkLWRhdGEtdmlldy9yaWdodC1jYXJkLWRhdGEtdmlldy9yaWdodC1jYXJkLWRhdGEtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcmQtZGF0YS12aWV3L3JpZ2h0LWNhcmQtZGF0YS12aWV3L3JpZ2h0LWNhcmQtZGF0YS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQzs7O0FBUTVFLE1BQU0sT0FBTywwQkFBMEI7SUFDWixNQUFNLENBQW9CO0lBQzNCLEtBQUssQ0FBb0I7SUFDdkMsVUFBVSxDQUFXO0lBQ3JCLFFBQVEsQ0FBVztJQUNuQixJQUFJLENBQUMsQ0FBSztRQUVoQixPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUN4QixPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQTtJQUM3QixDQUFDO3VHQVRTLDBCQUEwQjsyRkFBMUIsMEJBQTBCLDRUQ1J2Qyw4UUFNQTs7MkZERWEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNFLDZCQUE2Qjs4QkFLZCxNQUFNO3NCQUE3QixZQUFZO3VCQUFDLFFBQVE7Z0JBQ0MsS0FBSztzQkFBM0IsWUFBWTt1QkFBQyxPQUFPO2dCQUNaLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDYXJkRGF0YSB9IGZyb20gJy4uL2NhcmQtZGF0YSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZlcmJlbi1yaWdodC1jYXJkLWRhdGEtdmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9yaWdodC1jYXJkLWRhdGEtdmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9yaWdodC1jYXJkLWRhdGEtdmlldy5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBSaWdodENhcmREYXRhVmlld0NvbXBvbmVudCB7XG4gICBAQ29udGVudENoaWxkKCdwYXJlbnQnKSBwYXJlbnQhOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAgQENvbnRlbnRDaGlsZCgnY2hpbGQnKSBjaGlsZCE6IFRlbXBsYXRlUmVmPGFueT47XG4gICBASW5wdXQoKSBwYXJlbnREYXRhISA6Q2FyZERhdGFcbiAgIEBJbnB1dCgpIGNoaWxEYXRhISA6Q2FyZERhdGFcbiAgIEBJbnB1dCgpIG1ldGgoZDphbnkpXG4gICB7XG4gICAgICBjb25zb2xlLmxvZyh0aGlzLnBhcmVudClcbiAgICAgIGNvbnNvbGUubG9nKHRoaXMuY2hpbERhdGEpXG4gICB9XG4gIC8vICBjdXJyZW50RGF0YSAmJiBjdXJyZW50RGF0YS50aXRsZVxuXG59XG4iLCIgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwYXJlbnREYXRhICYmICFjaGlsRGF0YVwiPlxuICAgICAgICA8bmctY29udGVudCAqbmdUZW1wbGF0ZU91dGxldD1cInBhcmVudFwiPjwvbmctY29udGVudD5cbiAgICAgPC9uZy1jb250YWluZXI+XG4gICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjaGlsRGF0YVwiPlxuICAgICAgICA8bmctY29udGVudCAqbmdUZW1wbGF0ZU91dGxldD1cImNoaWxkXCI+PC9uZy1jb250ZW50PiAgXG4gICAgIDwvbmctY29udGFpbmVyPlxuIl19

package/esm2022/lib/components/chip/chip.component.mjs

@@ -160,7 +160,7 @@ export class ChipComponent {
         return this.chips && this.chips.length == 0 ? this.placeholder : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ChipComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ChipComponent, isStandalone: true, selector: "verben-chip", inputs: { width: "width", placeholder: "placeholder", max: "max", styleClass: "styleClass", separator: "separator", disabled: "disabled", required: "required", invalidMessage: "invalidMessage", errorPosition: "errorPosition" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div [ngClass]=\"styleClass\" [style.width]=\"width\"\n  [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n  class=\"chip\">\n  <div [class.focused]=\"isFocused\" [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" tabindex=\"0\" class=\"chip-content-input verben-input flex\">\n    <div class=\"chip-main-content\">\n      <div class=\"default-item flex\">\n        <!-- <div class=\"dropdown-label place-holder\" *ngIf=\"this.chips.length == 0\">{{placeholder}}</div> -->\n        <div *ngIf=\"chips && this.chips.length > 0\" class=\"chips-container flex\">\n          <span *ngFor=\"let item of chips; index as i\" class=\"item-chip flex\">\n            <ng-container *ngIf=\"itemTemplate; else defaultItem\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultItem>\n              <span>{{item}}</span>\n            </ng-template>\n            <verben-svg (click)=\"removeChip(i, $event);\" icon=\"close-circle\" [width]=\"15\" [height]=\"15\"></verben-svg>\n            <!-- <svg (click)=\"removeChip(i, $event);\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n              <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg> -->\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-container\">\n      <input [disabled]=\"this.max != null && chips && this.chips.length == max\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"placeholderState\" [(ngModel)]=\"chipInput\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n        class=\"chip-input\" />\n    </div>\n    <!-- <span *ngIf=\"this.chips.length > 0\" (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n      class=\"chip-icon-item chip-clear-button\">\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </span> -->\n  </div>\n  <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n  </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.chip{position:relative}.chip-content-input{gap:5px;padding:5px;flex-wrap:wrap;min-height:23px;align-items:center}.chip-content-input.disabled .chips-container{color:#64748b}.chip-main-content{min-width:0}.chips-container{width:100%;gap:5px;color:#334155;flex-wrap:wrap}.item-chip{cursor:pointer;align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-chip>svg{width:12px;height:12px}.input-container{flex:1 1 0}.chip-input{width:100%;border:none;outline:none;background-color:transparent}.chip-input::placeholder{color:#64748b}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ChipComponent, isStandalone: true, selector: "verben-chip", inputs: { width: "width", placeholder: "placeholder", max: "max", styleClass: "styleClass", separator: "separator", disabled: "disabled", required: "required", invalidMessage: "invalidMessage", errorPosition: "errorPosition" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.focused": "this.isFocused" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div [ngClass]=\"styleClass\" [style.width]=\"width\"\n  [ngClass]=\"{'right-error': errorPosition == 'right', 'left-error': errorPosition == 'left', 'top-error': errorPosition == 'top'}\"\n  class=\"chip\">\n  <div [class.focused]=\"isFocused\" [ngClass]=\"{'ng-invalid': isInvalid, 'disabled': disabled}\" (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" tabindex=\"0\" class=\"chip-content-input verben-input flex\">\n    <div class=\"chip-main-content\">\n      <div class=\"default-item flex\">\n        <!-- <div class=\"dropdown-label place-holder\" *ngIf=\"this.chips.length == 0\">{{placeholder}}</div> -->\n        <div *ngIf=\"chips && this.chips.length > 0\" class=\"chips-container flex\">\n          <span *ngFor=\"let item of chips; index as i\" class=\"item-chip flex\">\n            <ng-container *ngIf=\"itemTemplate; else defaultItem\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultItem>\n              <span>{{item}}</span>\n            </ng-template>\n            <verben-svg (click)=\"removeChip(i, $event);\" icon=\"close-circle\" [width]=\"15\" [height]=\"15\"></verben-svg>\n            <!-- <svg (click)=\"removeChip(i, $event);\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M5.00065 9.33333C7.30184 9.33333 9.16732 7.46785 9.16732 5.16667C9.16732 2.86548 7.30184 1 5.00065 1C2.69946 1 0.833984 2.86548 0.833984 5.16667C0.833984 7.46785 2.69946 9.33333 5.00065 9.33333Z\"\n                stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6.25 3.91797L3.75 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n              <path d=\"M3.75 3.91797L6.25 6.41797\" stroke=\"currentColor\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg> -->\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-container\">\n      <input [disabled]=\"this.max != null && chips && this.chips.length == max\" (keydown)=\"onKeyDown($event)\"\n        [placeholder]=\"placeholderState\" [(ngModel)]=\"chipInput\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n        class=\"chip-input\" />\n    </div>\n    <!-- <span *ngIf=\"this.chips.length > 0\" (click)=\"this.clearSelection($event); $event.stopPropagation()\"\n      class=\"chip-icon-item chip-clear-button\">\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0.84375 0.84375L8.15625 8.15625\" stroke=\"currentColor\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M0.84375 8.15625L8.15625 0.84375\" stroke=\"currentColor\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </span> -->\n  </div>\n  <div *ngIf=\"this.isInvalid && this.invalidMessage\" class=\"verben-error-message error-message\">{{invalidMessage}}\n  </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:.9rem}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.chip{position:relative}.chip-content-input{gap:5px;padding:5px;flex-wrap:wrap;min-height:23px;align-items:center}.chip-content-input.disabled .chips-container{color:#64748b}.chip-main-content{min-width:0}.chips-container{width:100%;gap:5px;color:#334155;flex-wrap:wrap}.item-chip{cursor:pointer;align-items:center;gap:5px;border-radius:5px;padding:1px 5px;background-color:#3479e980}.item-chip>span{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-chip>svg{width:12px;height:12px}.input-container{flex:1 1 0}.chip-input{width:100%;border:none;outline:none;background-color:transparent}.chip-input::placeholder{color:#64748b}.error-message{position:absolute;z-index:1;left:0;right:0;bottom:-20px}.top-error .error-message{top:-20px!important;bottom:initial!important}.left-error .error-message{bottom:50%!important;right:calc(100% + 10px)!important;width:max-content;left:initial!important;transform:translateY(50%)}.right-error .error-message{bottom:50%!important;left:calc(100% + 10px)!important;width:max-content;right:initial!important;transform:translateY(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,