npm - @progress-chef/platform-shared-components - Versions diffs - 0.0.49 → 0.0.50 - Mend

@progress-chef/platform-shared-components 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/esm2022/lib/atoms/alert/alert.component.mjs CHANGED Viewed

@@ -21,7 +21,7 @@ export class AlertComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { type: "type" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.theType" } }, ngImport: i0, template: "<div class=\"icon\">\n  <lib-icon name=\"info\"></lib-icon>\n</div>\n<div>\n    <ng-content></ng-content>\n</div>\n<div class=\"close\" (click)=\"onClose()\">\n  <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n</div>\n", styles: [":host{display:flex;border-radius:4px;padding:1.125rem 3rem 1.125rem 1rem;position:relative}:host .icon{margin-right:.5rem;display:flex;position:relative}:host.information{color:#003b6e;background-color:#b8d8f5}:host .close{font-weight:700;position:absolute;right:1rem;top:.75rem;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { type: "type" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.theType" } }, ngImport: i0, template: "<div class=\"icon\">\n  <lib-icon name=\"info\"></lib-icon>\n</div>\n<div>\n    <ng-content></ng-content>\n</div>\n<div class=\"close\" (click)=\"onClose()\">\n  <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n</div>\n", styles: [":host{display:flex;border-radius:4px;padding:1.125rem 3rem 1.125rem 1rem;position:relative}:host .icon{margin-right:.5rem;display:flex;position:relative}:host.information{color:#003b6e;background-color:#b8d8f5}:host .close{font-weight:700;position:absolute;right:1rem;top:.75rem;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,

package/esm2022/lib/atoms/button/button.component.mjs CHANGED Viewed

@@ -21,26 +21,33 @@ export class ButtonComponent {
         this.width = '300';
         this.buttonClick = new EventEmitter();
         this.iconButton = false;
+        this.projectedIcon = false;
     }
     onButtonClick(e) {
         this.buttonClick.emit(e);
     }
     button_size() {
+        let classStr = this.projectedIcon ? 'projected-icon ' : '';
         switch (this.size) {
             case 'small':
-                return 'small-btn';
+                return classStr + 'small-btn';
             case 'medium':
-                return 'medium-btn';
+                return classStr + 'medium-btn';
             case 'large':
-                return 'large-btn';
+                return classStr + 'large-btn';
         }
     }
+    toTitleCase(str) {
+        return str.toLowerCase().split(' ').map((word) => {
+            return (word.charAt(0).toUpperCase() + word.slice(1));
+        }).join(' ');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "lib-button", inputs: { size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", iconName: "iconName", disabled: "disabled", toggleable: "toggleable", iconPosition: "iconPosition", fontType: "fontType", width: "width", iconButton: "iconButton" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\"></lib-icon>\n  <lib-typography [defaultText]=\"label\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.before{padding-right:6px}.after{padding-left:6px}button:disabled{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i4.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "lib-button", inputs: { size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", iconName: "iconName", disabled: "disabled", toggleable: "toggleable", iconPosition: "iconPosition", fontType: "fontType", width: "width", iconButton: "iconButton", projectedIcon: "projectedIcon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n  <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"toTitleCase(label)\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 5px 0 0}.after{padding-left:6px}button:disabled{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"], dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i4.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-button', template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\"></lib-icon>\n  <lib-typography [defaultText]=\"label\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.before{padding-right:6px}.after{padding-left:6px}button:disabled{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"] }]
+            args: [{ selector: 'lib-button', template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n  <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"toTitleCase(label)\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 5px 0 0}.after{padding-left:6px}button:disabled{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ThemesService }]; }, propDecorators: { size: [{
                 type: Input
             }], rounded: [{
@@ -67,5 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], iconButton: [{
                 type: Input
+            }], projectedIcon: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2hhcmVkL3NyYy9saWIvYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUXZFLE1BQU0sT0FBTyxlQUFlO0lBQzFCLFlBQW9CLGFBQTJCO1FBQTNCLGtCQUFhLEdBQWIsYUFBYSxDQUFjO1FBRXRDLFNBQUksR0FBaUMsUUFBUSxDQUFDO1FBQzlDLFlBQU8sR0FLSCxRQUFRLENBQUM7UUFDYixhQUFRLEdBTUosT0FBTyxDQUFDO1FBQ1osZUFBVSxHQVdILE1BQU0sQ0FBQztRQUNkLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUN0QixhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDNUIsaUJBQVksR0FBVyxFQUFFLENBQUM7UUFDMUIsYUFBUSxHQUFtQixnQkFBZ0IsQ0FBQztRQUM1QyxVQUFLLEdBQVcsS0FBSyxDQUFDO1FBQ3JCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN2QyxlQUFVLEdBQUMsS0FBSyxDQUFBO0lBcEMwQixDQUFDO0lBc0NwRCxhQUFhLENBQUMsQ0FBTTtRQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRUQsV0FBVztRQUNULFFBQU8sSUFBSSxDQUFDLElBQUksRUFBQztZQUNmLEtBQUssT0FBTztnQkFDVixPQUFPLFdBQVcsQ0FBQztZQUNyQixLQUFLLFFBQVE7Z0JBQ1gsT0FBTyxZQUFZLENBQUM7WUFDdEIsS0FBSyxPQUFPO2dCQUNWLE9BQU8sV0FBVyxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQzsrR0FwRFUsZUFBZTttR0FBZixlQUFlLDZXQ1I1Qiw0dEJBUUE7OzRGREFhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTtvR0FPYixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQU1HLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csVUFBVTtzQkFBbEIsS0FBSztnQkFZRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNFLFVBQVU7c0JBQWxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVHlwb2dyYXBoeVR5cGUgfSBmcm9tICcuLi90eXBvZ3JhcGh5L1R5cG9ncmFwaHlUeXBlJztcbmltcG9ydCB7IFRoZW1lc1NlcnZpY2UgfSBmcm9tICdAcHJvZ3Jlc3MtY2hlZi9wbGF0Zm9ybS10aGVtZXMtc2VydmljZSc7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdGhlbWVzU2VydmljZTpUaGVtZXNTZXJ2aWNlKSB7IH1cblxuICBASW5wdXQoKSBzaXplOiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSc7XG4gIEBJbnB1dCgpIHJvdW5kZWQ6XG4gICAgfCAnc21hbGwnXG4gICAgfCAnbWVkaXVtJ1xuICAgIHwgJ2xhcmdlJ1xuICAgIHwgJ2Z1bGwnXG4gICAgfCAnbm9uZScgPSAnbWVkaXVtJztcbiAgQElucHV0KCkgZmlsbE1vZGU6XG4gICAgfCAnc29saWQnXG4gICAgfCAnZmxhdCdcbiAgICB8ICdvdXRsaW5lJ1xuICAgIHwgJ2NsZWFyJ1xuICAgIHwgJ2xpbmsnXG4gICAgfCAnbm9uZScgPSAnc29saWQnO1xuICBASW5wdXQoKSB0aGVtZUNvbG9yOlxuICAgIHwgJ2Jhc2UnXG4gICAgfCAncHJpbWFyeSdcbiAgICB8ICdzZWNvbmRhcnknXG4gICAgfCAndGVydGlhcnknXG4gICAgfCAnaW5mbydcbiAgICB8ICdzdWNjZXNzJ1xuICAgIHwgJ3dhcm5pbmcnXG4gICAgfCAnZXJyb3InXG4gICAgfCAnZGFyaydcbiAgICB8ICdsaWdodCdcbiAgICB8ICdpbnZlcnNlJyA9ICdiYXNlJztcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBpY29uTmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHRvZ2dsZWFibGU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgaWNvblBvc2l0aW9uOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgZm9udFR5cGU6IFR5cG9ncmFwaHlUeXBlID0gJ0JVVFRPTl9SRUdVTEFSJztcbiAgQElucHV0KCkgd2lkdGg6IHN0cmluZyA9ICczMDAnO1xuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQElucHV0KCkgaWNvbkJ1dHRvbj1mYWxzZVxuXG4gIG9uQnV0dG9uQ2xpY2soZTogYW55KSB7XG4gICAgdGhpcy5idXR0b25DbGljay5lbWl0KGUpO1xuICB9XG5cbiAgYnV0dG9uX3NpemUoKXtcbiAgICBzd2l0Y2godGhpcy5zaXplKXtcbiAgICAgIGNhc2UgJ3NtYWxsJzogXG4gICAgICAgIHJldHVybiAnc21hbGwtYnRuJztcbiAgICAgIGNhc2UgJ21lZGl1bSc6IFxuICAgICAgICByZXR1cm4gJ21lZGl1bS1idG4nO1xuICAgICAgY2FzZSAnbGFyZ2UnOiBcbiAgICAgICAgcmV0dXJuICdsYXJnZS1idG4nO1xuICAgIH1cbiAgfVxuXG59XG4iLCI8YnV0dG9uIGtlbmRvQnV0dG9uIFtzaXplXT1cInNpemVcIiBbc3R5bGUud2lkdGhdPVwid2lkdGhcIiBbZmlsbE1vZGVdPVwiZmlsbE1vZGVcIiBbcm91bmRlZF09XCJyb3VuZGVkXCIgW3RoZW1lQ29sb3JdPVwidGhlbWVDb2xvclwiXG4gIChjbGljayk9XCJvbkJ1dHRvbkNsaWNrKCRldmVudClcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbdG9nZ2xlYWJsZV09XCJ0b2dnbGVhYmxlXCIgW25nQ2xhc3NdPVwiYnV0dG9uX3NpemUoKVwiPlxuICA8bGliLWljb24gKm5nSWY9XCJpY29uTmFtZS5sZW5ndGggPiAwICYmIGljb25Qb3NpdGlvbiA9PT0gJ2JlZm9yZSdcIiBbbmFtZV09XCJpY29uTmFtZVwiIGNsYXNzPVwiYnRuLWljb24gYmVmb3JlXCI+PC9saWItaWNvbj5cbiAgPGxpYi1pY29uICpuZ0lmPVwiaWNvbk5hbWUubGVuZ3RoID4gMCAmJiBpY29uQnV0dG9uXCIgW25hbWVdPVwiaWNvbk5hbWVcIiBjbGFzcz1cImJ0bi1pY29uXCI+PC9saWItaWNvbj5cbiAgPGxpYi10eXBvZ3JhcGh5IFtkZWZhdWx0VGV4dF09XCJsYWJlbFwiIFt0eXBlXT1cImZvbnRUeXBlXCIgY2xhc3M9XCJ0ZXh0XCI+XG4gIDwvbGliLXR5cG9ncmFwaHk+XG4gIDxsaWItaWNvbiAqbmdJZj1cImljb25OYW1lLmxlbmd0aCA+IDAgJiYgaWNvblBvc2l0aW9uID09PSAnYWZ0ZXInXCIgW25hbWVdPVwiaWNvbk5hbWVcIiBjbGFzcz1cImJ0bi1pY29uIGFmdGVyXCI+PC9saWItaWNvbj5cbjwvYnV0dG9uPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2hhcmVkL3NyYy9saWIvYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUXZFLE1BQU0sT0FBTyxlQUFlO0lBQzFCLFlBQW9CLGFBQTJCO1FBQTNCLGtCQUFhLEdBQWIsYUFBYSxDQUFjO1FBRXRDLFNBQUksR0FBaUMsUUFBUSxDQUFDO1FBQzlDLFlBQU8sR0FLSCxRQUFRLENBQUM7UUFDYixhQUFRLEdBTUosT0FBTyxDQUFDO1FBQ1osZUFBVSxHQVdILE1BQU0sQ0FBQztRQUNkLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUN0QixhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDNUIsaUJBQVksR0FBVyxFQUFFLENBQUM7UUFDMUIsYUFBUSxHQUFtQixnQkFBZ0IsQ0FBQztRQUM1QyxVQUFLLEdBQVcsS0FBSyxDQUFDO1FBQ3JCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN2QyxlQUFVLEdBQUMsS0FBSyxDQUFDO1FBQ2pCLGtCQUFhLEdBQUMsS0FBSyxDQUFDO0lBckNzQixDQUFDO0lBdUNwRCxhQUFhLENBQUMsQ0FBTTtRQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksUUFBUSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFFM0QsUUFBTyxJQUFJLENBQUMsSUFBSSxFQUFDO1lBQ2YsS0FBSyxPQUFPO2dCQUNWLE9BQU8sUUFBUSxHQUFHLFdBQVcsQ0FBQztZQUNoQyxLQUFLLFFBQVE7Z0JBQ1gsT0FBTyxRQUFRLEdBQUcsWUFBWSxDQUFDO1lBQ2pDLEtBQUssT0FBTztnQkFDVixPQUFPLFFBQVEsR0FBRyxXQUFXLENBQUM7U0FDakM7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQVE7UUFDbEIsT0FBTyxHQUFHLENBQUMsV0FBVyxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQVMsRUFBRSxFQUFFO1lBQ3BELE9BQU8sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN4RCxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDZixDQUFDOytHQTdEVSxlQUFlO21HQUFmLGVBQWUsNllDUjVCLDgxQkFRQTs7NEZEQWEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZO29HQU9iLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBTUcsUUFBUTtzQkFBaEIsS0FBSztnQkFPRyxVQUFVO3NCQUFsQixLQUFLO2dCQVlHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0UsVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFR5cG9ncmFwaHlUeXBlIH0gZnJvbSAnLi4vdHlwb2dyYXBoeS9UeXBvZ3JhcGh5VHlwZSc7XG5pbXBvcnQgeyBUaGVtZXNTZXJ2aWNlIH0gZnJvbSAnQHByb2dyZXNzLWNoZWYvcGxhdGZvcm0tdGhlbWVzLXNlcnZpY2UnO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRoZW1lc1NlcnZpY2U6VGhlbWVzU2VydmljZSkgeyB9XG5cbiAgQElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdtZWRpdW0nO1xuICBASW5wdXQoKSByb3VuZGVkOlxuICAgIHwgJ3NtYWxsJ1xuICAgIHwgJ21lZGl1bSdcbiAgICB8ICdsYXJnZSdcbiAgICB8ICdmdWxsJ1xuICAgIHwgJ25vbmUnID0gJ21lZGl1bSc7XG4gIEBJbnB1dCgpIGZpbGxNb2RlOlxuICAgIHwgJ3NvbGlkJ1xuICAgIHwgJ2ZsYXQnXG4gICAgfCAnb3V0bGluZSdcbiAgICB8ICdjbGVhcidcbiAgICB8ICdsaW5rJ1xuICAgIHwgJ25vbmUnID0gJ3NvbGlkJztcbiAgQElucHV0KCkgdGhlbWVDb2xvcjpcbiAgICB8ICdiYXNlJ1xuICAgIHwgJ3ByaW1hcnknXG4gICAgfCAnc2Vjb25kYXJ5J1xuICAgIHwgJ3RlcnRpYXJ5J1xuICAgIHwgJ2luZm8nXG4gICAgfCAnc3VjY2VzcydcbiAgICB8ICd3YXJuaW5nJ1xuICAgIHwgJ2Vycm9yJ1xuICAgIHwgJ2RhcmsnXG4gICAgfCAnbGlnaHQnXG4gICAgfCAnaW52ZXJzZScgPSAnYmFzZSc7XG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgaWNvbk5hbWU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSB0b2dnbGVhYmxlOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGljb25Qb3NpdGlvbjogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGZvbnRUeXBlOiBUeXBvZ3JhcGh5VHlwZSA9ICdCVVRUT05fUkVHVUxBUic7XG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgPSAnMzAwJztcbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBJbnB1dCgpIGljb25CdXR0b249ZmFsc2U7XG4gIEBJbnB1dCgpIHByb2plY3RlZEljb249ZmFsc2U7XG5cbiAgb25CdXR0b25DbGljayhlOiBhbnkpIHtcbiAgICB0aGlzLmJ1dHRvbkNsaWNrLmVtaXQoZSk7XG4gIH1cblxuICBidXR0b25fc2l6ZSgpe1xuICAgIGxldCBjbGFzc1N0ciA9IHRoaXMucHJvamVjdGVkSWNvbiA/ICdwcm9qZWN0ZWQtaWNvbiAnIDogJyc7XG5cbiAgICBzd2l0Y2godGhpcy5zaXplKXtcbiAgICAgIGNhc2UgJ3NtYWxsJzogXG4gICAgICAgIHJldHVybiBjbGFzc1N0ciArICdzbWFsbC1idG4nO1xuICAgICAgY2FzZSAnbWVkaXVtJzogXG4gICAgICAgIHJldHVybiBjbGFzc1N0ciArICdtZWRpdW0tYnRuJztcbiAgICAgIGNhc2UgJ2xhcmdlJzogXG4gICAgICAgIHJldHVybiBjbGFzc1N0ciArICdsYXJnZS1idG4nO1xuICAgIH1cbiAgfVxuXG4gIHRvVGl0bGVDYXNlKHN0cjogYW55KSB7XG4gICAgcmV0dXJuIHN0ci50b0xvd2VyQ2FzZSgpLnNwbGl0KCcgJykubWFwKCh3b3JkOiBhbnkpID0+IHtcbiAgICAgIHJldHVybiAod29yZC5jaGFyQXQoMCkudG9VcHBlckNhc2UoKSArIHdvcmQuc2xpY2UoMSkpO1xuICAgIH0pLmpvaW4oJyAnKTtcbiAgfVxuXG59XG4iLCI8YnV0dG9uIGtlbmRvQnV0dG9uIFtzaXplXT1cInNpemVcIiBbc3R5bGUud2lkdGhdPVwid2lkdGhcIiBbZmlsbE1vZGVdPVwiZmlsbE1vZGVcIiBbcm91bmRlZF09XCJyb3VuZGVkXCIgW3RoZW1lQ29sb3JdPVwidGhlbWVDb2xvclwiXG4gIChjbGljayk9XCJvbkJ1dHRvbkNsaWNrKCRldmVudClcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbdG9nZ2xlYWJsZV09XCJ0b2dnbGVhYmxlXCIgW25nQ2xhc3NdPVwiYnV0dG9uX3NpemUoKVwiPlxuICA8bGliLWljb24gKm5nSWY9XCIhaWNvbkJ1dHRvbiAmJiBpY29uTmFtZS5sZW5ndGggPiAwICYmIGljb25Qb3NpdGlvbiA9PT0gJ2JlZm9yZSdcIiBbbmFtZV09XCJpY29uTmFtZVwiIGNsYXNzPVwiYnRuLWljb24tYmVmb3JlIGJ0bi1pY29uIGJlZm9yZVwiPjwvbGliLWljb24+XG4gIDxsaWItaWNvbiAqbmdJZj1cImljb25OYW1lLmxlbmd0aCA+IDAgJiYgaWNvbkJ1dHRvblwiIFtuYW1lXT1cImljb25OYW1lXCIgY2xhc3M9XCJidG4taWNvblwiIFtwcm9qZWN0ZWRJY29uXT1cInByb2plY3RlZEljb25cIj48L2xpYi1pY29uPlxuICA8bGliLXR5cG9ncmFwaHkgKm5nSWY9XCIhaWNvbkJ1dHRvblwiIFtkZWZhdWx0VGV4dF09XCJ0b1RpdGxlQ2FzZShsYWJlbClcIiBbdHlwZV09XCJmb250VHlwZVwiIGNsYXNzPVwidGV4dFwiPlxuICA8L2xpYi10eXBvZ3JhcGh5PlxuICA8bGliLWljb24gKm5nSWY9XCIhaWNvbkJ1dHRvbiAmJiBpY29uTmFtZS5sZW5ndGggPiAwICYmIGljb25Qb3NpdGlvbiA9PT0gJ2FmdGVyJ1wiIFtuYW1lXT1cImljb25OYW1lXCIgY2xhc3M9XCJidG4taWNvbi1hZnRlciBidG4taWNvbiBhZnRlclwiPjwvbGliLWljb24+XG48L2J1dHRvbj5cbiJdfQ==

package/esm2022/lib/atoms/clipboard/clipboard.component.mjs CHANGED Viewed

@@ -87,7 +87,7 @@ export class ClipboardComponent {
         this.tooltipText = this.preCopyText;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardData: "clipboardData", tooltipPosition: "tooltipPosition", preCopyText: "preCopyText", postCopyText: "postCopyText" }, ngImport: i0, template: "<lib-tooltip [callout]=\"true\" [position]=\"tooltipPosition\" [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n  <div class=\"clipboard\"  (click)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\">\n    <lib-icon name=\"copy\"></lib-icon>\n    <lib-typography defaultText=\"Copy\"></lib-typography>\n  </div>\n  <div class=\"cb-tooltip-text tooltip-content\">\n    {{tooltipText}}\n  </div>\n</lib-tooltip>\n", styles: [".clipboard{color:#3864f2;width:5.375rem;height:2.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:4px 12px;border-radius:.25rem;background-color:#ebecec;border:1px solid #e6eaec}.clipboard:hover{color:#174af0;background-color:#dcdddd;border:1px solid #e4e7eb}.clipboard:active{color:#0e3dd5}.clipboard lib-icon,.clipboard lib-typography{color:#222435}.clipboard lib-typography{padding-left:4px}.cb-tooltip-text{padding:.25rem}\n"], dependencies: [{ kind: "component", type: i2.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i4.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardData: "clipboardData", tooltipPosition: "tooltipPosition", preCopyText: "preCopyText", postCopyText: "postCopyText" }, ngImport: i0, template: "<lib-tooltip [callout]=\"true\" [position]=\"tooltipPosition\" [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n  <div class=\"clipboard\"  (click)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\">\n    <lib-icon name=\"copy\"></lib-icon>\n    <lib-typography defaultText=\"Copy\"></lib-typography>\n  </div>\n  <div class=\"cb-tooltip-text tooltip-content\">\n    {{tooltipText}}\n  </div>\n</lib-tooltip>\n", styles: [".clipboard{color:#3864f2;width:5.375rem;height:2.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:4px 12px;border-radius:.25rem;background-color:#ebecec;border:1px solid #e6eaec}.clipboard:hover{color:#174af0;background-color:#dcdddd;border:1px solid #e4e7eb}.clipboard:active{color:#0e3dd5}.clipboard lib-icon,.clipboard lib-typography{color:#222435}.clipboard lib-typography{padding-left:4px}.cb-tooltip-text{padding:.25rem}\n"], dependencies: [{ kind: "component", type: i2.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: i4.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component,

package/esm2022/lib/atoms/dropdowntree/dropdowntree.component.mjs CHANGED Viewed

@@ -49,7 +49,7 @@ export class DropdowntreeComponent {
         this.buttonClick.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdowntreeComponent, selector: "lib-dropdowntree", inputs: { childrenField: "childrenField", hasDefaultValue: "hasDefaultValue", isDisabled: "isDisabled", listHeight: "listHeight", value: "value", placeholder: "placeholder", clearButton: "clearButton", expandBy: "expandBy", expandedKeys: "expandedKeys", data: "data", textField: "textField", readonly: "readonly", valueField: "valueField", footerBtnLabel: "footerBtnLabel", footerBtnIcon: "footerBtnIcon", hasFooterBtn: "hasFooterBtn", rounded: "rounded", fillMode: "fillMode", size: "size", control: "control" }, outputs: { selectedItem: "selectedItem", buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n  [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n  class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n  [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n  [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n  <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n    <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n      iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"BODY_LARGE\"\n      class=\"footer-btn\"></lib-button>\n  </ng-template>\n\n</kendo-dropdowntree>\n", styles: [".dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i3.DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: ["icon", "svgIcon", "loading", "clearButton", "data", "value", "textField", "valueField", "valueDepth", "hasChildren", "fetchChildren", "placeholder", "popupSettings", "dataItem", "listHeight", "disabled", "readonly", "valuePrimitive", "tabindex", "size", "rounded", "fillMode", "itemDisabled", "isNodeExpanded", "isNodeVisible", "loadOnDemand", "filterable", "filter", "focusableId", "adaptiveMode", "title", "subtitle"], outputs: ["open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "focus", "blur", "valueChange", "filterChange"], exportAs: ["kendoDropDownTree"] }, { kind: "directive", type: i3.DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: ["kendoDropDownTreeHierarchyBinding"] }, { kind: "directive", type: i3.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { kind: "directive", type: i3.NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton"], outputs: ["buttonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdowntreeComponent, selector: "lib-dropdowntree", inputs: { childrenField: "childrenField", hasDefaultValue: "hasDefaultValue", isDisabled: "isDisabled", listHeight: "listHeight", value: "value", placeholder: "placeholder", clearButton: "clearButton", expandBy: "expandBy", expandedKeys: "expandedKeys", data: "data", textField: "textField", readonly: "readonly", valueField: "valueField", footerBtnLabel: "footerBtnLabel", footerBtnIcon: "footerBtnIcon", hasFooterBtn: "hasFooterBtn", rounded: "rounded", fillMode: "fillMode", size: "size", control: "control" }, outputs: { selectedItem: "selectedItem", buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n  [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n  class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n  [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n  [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n  <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n    <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n      iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"BODY_LARGE\"\n      class=\"footer-btn\"></lib-button>\n  </ng-template>\n\n</kendo-dropdowntree>\n", styles: [".dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i3.DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: ["icon", "svgIcon", "loading", "clearButton", "data", "value", "textField", "valueField", "valueDepth", "hasChildren", "fetchChildren", "placeholder", "popupSettings", "dataItem", "listHeight", "disabled", "readonly", "valuePrimitive", "tabindex", "size", "rounded", "fillMode", "itemDisabled", "isNodeExpanded", "isNodeVisible", "loadOnDemand", "filterable", "filter", "focusableId", "adaptiveMode", "title", "subtitle"], outputs: ["open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "focus", "blur", "valueChange", "filterChange"], exportAs: ["kendoDropDownTree"] }, { kind: "directive", type: i3.DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: ["kendoDropDownTreeHierarchyBinding"] }, { kind: "directive", type: i3.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { kind: "directive", type: i3.NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, decorators: [{
             type: Component,

package/esm2022/lib/atoms/icon/icon.component.mjs CHANGED Viewed

@@ -2,22 +2,36 @@ import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress-chef/platform-themes-service";
 export class IconComponent {
+    set projectedIcon(value) {
+        this._projectedIcon = value;
+        if (value) {
+            this._fontSize = 20;
+        }
+    }
+    set fontSize(value) {
+        if (!this._projectedIcon) {
+            this._fontSize = value;
+        }
+    }
     constructor(themesService) {
         this.themesService = themesService;
         this.name = '';
-        this.fontSize = 16;
+        this._projectedIcon = false;
+        this._fontSize = 16;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconComponent, selector: "lib-icon", inputs: { name: "name", fontSize: "fontSize", type: "type" }, ngImport: i0, template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconComponent, selector: "lib-icon", inputs: { name: "name", projectedIcon: "projectedIcon", fontSize: "fontSize", type: "type" }, ngImport: i0, template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"_fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-icon', template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }]
+            args: [{ selector: 'lib-icon', template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"_fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ThemesService }]; }, propDecorators: { name: [{
                 type: Input
+            }], projectedIcon: [{
+                type: Input
             }], fontSize: [{
                 type: Input
             }], type: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9hdG9tcy9pY29uL2ljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2hhcmVkL3NyYy9saWIvYXRvbXMvaWNvbi9pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFRakQsTUFBTSxPQUFPLGFBQWE7SUFJeEIsWUFBb0IsYUFBMkI7UUFBM0Isa0JBQWEsR0FBYixhQUFhLENBQWM7UUFIdEMsU0FBSSxHQUFXLEVBQUUsQ0FBQztRQUNsQixhQUFRLEdBQVcsRUFBRSxDQUFDO0lBRW9CLENBQUM7K0dBSnpDLGFBQWE7bUdBQWIsYUFBYSw4R0NSMUIsa0pBTUE7OzRGREVhLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsVUFBVTtvR0FLWCxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZXNTZXJ2aWNlIH0gZnJvbSAnQHByb2dyZXNzLWNoZWYvcGxhdGZvcm0tdGhlbWVzLXNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItaWNvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9pY29uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgbmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGZvbnRTaXplOiBudW1iZXIgPSAxNjtcbiAgQElucHV0KCkgdHlwZSE6ICdzdWNjZXNzJyB8ICdlcnJvcic7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdGhlbWVzU2VydmljZTpUaGVtZXNTZXJ2aWNlKSB7IH1cblxufVxuIiwiPGlcbiAgY2xhc3M9XCJpY29uZm9udCBpY29uLXt7IG5hbWUgfX0ge3t0eXBlfX1cIlxuICBhdHRyLmFyaWEtbGFiZWw9XCJ7eyBuYW1lIH19XCJcbiAgcm9sZT1cImltZ1wiXG4gIFtzdHlsZS5mb250U2l6ZS5weF09XCJmb250U2l6ZVwiXG4+PC9pPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9hdG9tcy9pY29uL2ljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2hhcmVkL3NyYy9saWIvYXRvbXMvaWNvbi9pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFRakQsTUFBTSxPQUFPLGFBQWE7SUFHeEIsSUFBYSxhQUFhLENBQUMsS0FBYztRQUN2QyxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztRQUM1QixJQUFHLEtBQUssRUFBRTtZQUNSLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO1NBQ3JCO0lBQ0gsQ0FBQztJQUVELElBQWEsUUFBUSxDQUFDLEtBQWE7UUFDakMsSUFBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7U0FDeEI7SUFDSCxDQUFDO0lBRUQsWUFBb0IsYUFBMkI7UUFBM0Isa0JBQWEsR0FBYixhQUFhLENBQWM7UUFmdEMsU0FBSSxHQUFXLEVBQUUsQ0FBQztRQUMzQixtQkFBYyxHQUFZLEtBQUssQ0FBQztRQU9oQyxjQUFTLEdBQVcsRUFBRSxDQUFDO0lBTzRCLENBQUM7K0dBaEJ6QyxhQUFhO21HQUFiLGFBQWEsOElDUjFCLG1KQU1BOzs0RkRFYSxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFVBQVU7b0dBS1gsSUFBSTtzQkFBWixLQUFLO2dCQUVPLGFBQWE7c0JBQXpCLEtBQUs7Z0JBT08sUUFBUTtzQkFBcEIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZXNTZXJ2aWNlIH0gZnJvbSAnQHByb2dyZXNzLWNoZWYvcGxhdGZvcm0tdGhlbWVzLXNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItaWNvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9pY29uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgbmFtZTogc3RyaW5nID0gJyc7XG4gIF9wcm9qZWN0ZWRJY29uOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNldCBwcm9qZWN0ZWRJY29uKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fcHJvamVjdGVkSWNvbiA9IHZhbHVlO1xuICAgIGlmKHZhbHVlKSB7XG4gICAgICB0aGlzLl9mb250U2l6ZSA9IDIwO1xuICAgIH1cbiAgfVxuICBfZm9udFNpemU6IG51bWJlciA9IDE2O1xuICBASW5wdXQoKSBzZXQgZm9udFNpemUodmFsdWU6IG51bWJlcikge1xuICAgIGlmKCF0aGlzLl9wcm9qZWN0ZWRJY29uKSB7XG4gICAgICB0aGlzLl9mb250U2l6ZSA9IHZhbHVlO1xuICAgIH1cbiAgfVxuICBASW5wdXQoKSB0eXBlITogJ3N1Y2Nlc3MnIHwgJ2Vycm9yJztcbiAgY29uc3RydWN0b3IocHJpdmF0ZSB0aGVtZXNTZXJ2aWNlOlRoZW1lc1NlcnZpY2UpIHsgfVxuXG59XG4iLCI8aVxuICBjbGFzcz1cImljb25mb250IGljb24te3sgbmFtZSB9fSB7e3R5cGV9fVwiXG4gIGF0dHIuYXJpYS1sYWJlbD1cInt7IG5hbWUgfX1cIlxuICByb2xlPVwiaW1nXCJcbiAgW3N0eWxlLmZvbnRTaXplLnB4XT1cIl9mb250U2l6ZVwiXG4+PC9pPlxuIl19

package/esm2022/lib/atoms/search-box/search-box.component.mjs CHANGED Viewed

@@ -59,7 +59,7 @@ export class SearchBoxComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { source: "source", data: "data", filterable: "filterable", size: "size", rounded: "rounded", fillMode: "fillMode", clearButton: "clearButton", icon: "icon", autoComplete: "autoComplete", placeholder: "placeholder", width: "width", suggest: "suggest", control: "control", value: "value", debounceTimeMs: "debounceTimeMs" }, outputs: { modelChange: "modelChange", searchClick: "searchClick" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!autoComplete\">\n  <kendo-textbox [placeholder]=\"placeholder\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\" [size]=\"size\"\n    [rounded]=\"rounded\" [size]=\"size\" [style.width.px]=\"width\" [formControl]=\"control\"\n    (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n    <ng-template kendoTextBoxSuffixTemplate>\n      <lib-icon [name]=\"icon\" (click)=\"onSearchClick()\"></lib-icon>\n    </ng-template>\n  </kendo-textbox>\n</div>\n<div *ngIf=\"autoComplete\">\n  <kendo-autocomplete #autocomplete [data]=\"data\" [filterable]=\"true\" [size]=\"size\" [placeholder]=\"placeholder\"\n    [suggest]=\"suggest\" [formControl]=\"control\" (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n  </kendo-autocomplete>\n</div>\n", styles: ["kendo-autocomplete{width:200px;font-size:14px;line-height:1.4285714286;font-weight:400}kendo-textbox lib-icon{padding-right:12px}lib-icon{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { source: "source", data: "data", filterable: "filterable", size: "size", rounded: "rounded", fillMode: "fillMode", clearButton: "clearButton", icon: "icon", autoComplete: "autoComplete", placeholder: "placeholder", width: "width", suggest: "suggest", control: "control", value: "value", debounceTimeMs: "debounceTimeMs" }, outputs: { modelChange: "modelChange", searchClick: "searchClick" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!autoComplete\">\n  <kendo-textbox [placeholder]=\"placeholder\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\" [size]=\"size\"\n    [rounded]=\"rounded\" [size]=\"size\" [style.width.px]=\"width\" [formControl]=\"control\"\n    (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n    <ng-template kendoTextBoxSuffixTemplate>\n      <lib-icon [name]=\"icon\" (click)=\"onSearchClick()\"></lib-icon>\n    </ng-template>\n  </kendo-textbox>\n</div>\n<div *ngIf=\"autoComplete\">\n  <kendo-autocomplete #autocomplete [data]=\"data\" [filterable]=\"true\" [size]=\"size\" [placeholder]=\"placeholder\"\n    [suggest]=\"suggest\" [formControl]=\"control\" (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n  </kendo-autocomplete>\n</div>\n", styles: ["kendo-autocomplete{width:200px;font-size:14px;line-height:1.4285714286;font-weight:400}kendo-textbox lib-icon{padding-right:12px}lib-icon{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,

package/esm2022/lib/atoms/textbox/textbox.component.mjs CHANGED Viewed

@@ -60,7 +60,7 @@ export class TextboxComponent {
         this.blurEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxComponent, deps: [{ token: i1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextboxComponent, selector: "lib-textbox", inputs: { showEyeIcon: "showEyeIcon", clearButton: "clearButton", placeholder: "placeholder", width: "width", isDisabled: "isDisabled", readonly: "readonly", size: "size", rounded: "rounded", fillMode: "fillMode", control: "control", value: "value", type: "type" }, outputs: { inputChange: "inputChange", focusEvent: "focusEvent", blurEvent: "blurEvent" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-textbox #textbox [style.width.px]=\"width\" [placeholder]=\"placeholder\" [clearButton]=\"clearButton\"\n  [fillMode]=\"fillMode\" [readonly]=\"readonly\" [size]=\"size\" [rounded]=\"rounded\" [formControl]=\"control\"\n  [(ngModel)]=\"value\" (ngModelChange)=\"emitValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n  <ng-template *ngIf=\"this.type === 'password' && showEyeIcon\" kendoTextBoxSuffixTemplate>\n    <lib-icon name=\"eye-open\" (click)=\"toggleVisibility()\" *ngIf=\"showPassword\"></lib-icon>\n    <lib-icon name=\"eye-closed\" (click)=\"toggleVisibility()\" *ngIf=\"!showPassword\"></lib-icon>\n  </ng-template>\n</kendo-textbox>\n", styles: ["kendo-textbox lib-icon{padding-right:7px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextboxComponent, selector: "lib-textbox", inputs: { showEyeIcon: "showEyeIcon", clearButton: "clearButton", placeholder: "placeholder", width: "width", isDisabled: "isDisabled", readonly: "readonly", size: "size", rounded: "rounded", fillMode: "fillMode", control: "control", value: "value", type: "type" }, outputs: { inputChange: "inputChange", focusEvent: "focusEvent", blurEvent: "blurEvent" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-textbox #textbox [style.width.px]=\"width\" [placeholder]=\"placeholder\" [clearButton]=\"clearButton\"\n  [fillMode]=\"fillMode\" [readonly]=\"readonly\" [size]=\"size\" [rounded]=\"rounded\" [formControl]=\"control\"\n  [(ngModel)]=\"value\" (ngModelChange)=\"emitValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n  <ng-template *ngIf=\"this.type === 'password' && showEyeIcon\" kendoTextBoxSuffixTemplate>\n    <lib-icon name=\"eye-open\" (click)=\"toggleVisibility()\" *ngIf=\"showPassword\"></lib-icon>\n    <lib-icon name=\"eye-closed\" (click)=\"toggleVisibility()\" *ngIf=\"!showPassword\"></lib-icon>\n  </ng-template>\n</kendo-textbox>\n", styles: ["kendo-textbox lib-icon{padding-right:7px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,

package/esm2022/lib/molecules/dialog/confirmation-dialog/confirmation-dialog.component.mjs CHANGED Viewed

@@ -39,7 +39,7 @@ export class ConfirmationDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", inputs: { title: "title", btnText: "btnText", type: "type", dialogInfoText: "dialogInfoText", dialogConfirmationText: "dialogConfirmationText", fillMode: "fillMode", themeColor: "themeColor", primaryButtonLabel: "primaryButtonLabel" }, outputs: { confirmationDialogCloseEvent: "confirmationDialogCloseEvent", popupEvent: "popupEvent" }, usesOnChanges: true, ngImport: i0, template: "<lib-dialog width=\"489px\" class=\"confirmation-dialog\">\n  <lib-dialog-titlebar class=\"confirmation-title\" [title]=\"title\" titleFont=\"HEADING_MEDIUM\"\n    [hideCloseIcon]=\"true\"></lib-dialog-titlebar>\n  <div class=\"confirmation-popup-text\">\n    <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogInfoText\"></lib-typography><br>\n    <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogConfirmationText\"></lib-typography>\n  </div>\n  <lib-dialog-actions buttonLayout=\"end\" class=\"action-button\">\n    <lib-button label=\"Cancel\" fillMode=\"outline\" themeColor=\"primary\" (click)=\"dialogClose()\" width=\"144px\"></lib-button>\n    <lib-button [label]=\"btnText\" [themeColor]=\"themeColor\" (click)=\"eventClicked()\" [fillMode]=\"fillMode\" width=\"144px\"></lib-button>\n  </lib-dialog-actions>\n</lib-dialog>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "component", type: i1.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i2.ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton"], outputs: ["buttonClick"] }, { kind: "component", type: i3.DialogComponent, selector: "lib-dialog", inputs: ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "opened"] }, { kind: "component", type: i4.DialogTitlebarComponent, selector: "lib-dialog-titlebar", inputs: ["title", "titleFont", "hideCloseIcon"], outputs: ["closeDialog"] }, { kind: "component", type: i5.DialogActionsComponent, selector: "lib-dialog-actions", inputs: ["buttonLayout"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", inputs: { title: "title", btnText: "btnText", type: "type", dialogInfoText: "dialogInfoText", dialogConfirmationText: "dialogConfirmationText", fillMode: "fillMode", themeColor: "themeColor", primaryButtonLabel: "primaryButtonLabel" }, outputs: { confirmationDialogCloseEvent: "confirmationDialogCloseEvent", popupEvent: "popupEvent" }, usesOnChanges: true, ngImport: i0, template: "<lib-dialog width=\"489px\" class=\"confirmation-dialog\">\n  <lib-dialog-titlebar class=\"confirmation-title\" [title]=\"title\" titleFont=\"HEADING_MEDIUM\"\n    [hideCloseIcon]=\"true\"></lib-dialog-titlebar>\n  <div class=\"confirmation-popup-text\">\n    <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogInfoText\"></lib-typography><br>\n    <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogConfirmationText\"></lib-typography>\n  </div>\n  <lib-dialog-actions buttonLayout=\"end\" class=\"action-button\">\n    <lib-button label=\"Cancel\" fillMode=\"outline\" themeColor=\"primary\" (click)=\"dialogClose()\" width=\"144px\"></lib-button>\n    <lib-button [label]=\"btnText\" [themeColor]=\"themeColor\" (click)=\"eventClicked()\" [fillMode]=\"fillMode\" width=\"144px\"></lib-button>\n  </lib-dialog-actions>\n</lib-dialog>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "component", type: i1.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i2.ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon"], outputs: ["buttonClick"] }, { kind: "component", type: i3.DialogComponent, selector: "lib-dialog", inputs: ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "opened"] }, { kind: "component", type: i4.DialogTitlebarComponent, selector: "lib-dialog-titlebar", inputs: ["title", "titleFont", "hideCloseIcon"], outputs: ["closeDialog"] }, { kind: "component", type: i5.DialogActionsComponent, selector: "lib-dialog-actions", inputs: ["buttonLayout"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,

package/esm2022/lib/molecules/grid/grid-form/grid-form.component.mjs CHANGED Viewed

@@ -77,7 +77,7 @@ export class GridFormComponent {
         this.formGroup = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridFormComponent, selector: "lib-grid-form", inputs: { showToolbar: "showToolbar", noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i3.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: i4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i4.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i4.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "component", type: i4.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i4.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i4.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i4.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i4.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { kind: "component", type: i5.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i6.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i7.GridSpacerComponent, selector: "lib-grid-spacer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridFormComponent, selector: "lib-grid-form", inputs: { showToolbar: "showToolbar", noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: i3.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: i4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i4.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i4.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "component", type: i4.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i4.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i4.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i4.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i4.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { kind: "component", type: i5.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i6.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i7.GridSpacerComponent, selector: "lib-grid-spacer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, decorators: [{
             type: Component,

package/esm2022/lib/molecules/grid-pagination/grid-pagination.component.mjs CHANGED Viewed

@@ -315,11 +315,11 @@ export class GridPaginationComponent {
         this.grid.cancelCell();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { gridView: "gridView", skip: "skip", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData" }, host: { listeners: { "window:resize": "resize($event)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }], ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\" [sort]=\"sort\"\n    (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n      \n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n      <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n      <kendo-pager-next-buttons></kendo-pager-next-buttons>\n      <kendo-pager-info></kendo-pager-info>\n      <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "directive", type: i4.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: i6.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i7.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i8.LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "pipe", type: i9.KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { gridView: "gridView", skip: "skip", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData" }, host: { listeners: { "window:resize": "resize($event)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }], ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\" [sort]=\"sort\"\n    (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n      \n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n      <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n      <kendo-pager-next-buttons></kendo-pager-next-buttons>\n      <kendo-pager-info></kendo-pager-info>\n      <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: i3.IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i4.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: i6.TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: i7.TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: i8.LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "pipe", type: i9.KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\" [sort]=\"sort\"\n    (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n      \n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n      <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n      <kendo-pager-next-buttons></kendo-pager-next-buttons>\n      <kendo-pager-info></kendo-pager-info>\n      <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\" [sort]=\"sort\"\n    (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n      \n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n      <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n      <kendo-pager-next-buttons></kendo-pager-next-buttons>\n      <kendo-pager-info></kendo-pager-info>\n      <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateRef: [{
                 type: ContentChild,
                 args: ['multiColumnData']