@indice/ng-components 0.2.173-beta.3 → 0.2.173-beta.34

package/fesm2015/indice-ng-components.mjs

@@ -204,7 +204,7 @@ class DropDownMenuComponent {
         this.selectedValue = null;
         this.multiple = false;
         this.placeholder = 'Παρακαλώ επιλέξτε...';
-        this.showIcons = false;
+        this.showIcons = true;
         this.selectedOption$ = null;
         this.selectedChange = new EventEmitter();
         this.selectedChanged = new EventEmitter();
@@ -895,6 +895,10 @@ var QueryParameters;
     QueryParameters["FILTER_FROM"] = "from";
     QueryParameters["FILTER_TO"] = "to";
 })(QueryParameters || (QueryParameters = {}));
+const OperatorOptions = {
+    'string': [Operators.EQUALS, Operators.NOT_EQUALS, Operators.CONTAINS],
+    'array': [Operators.EQUALS, Operators.NOT_EQUALS]
+};
 class FilterClause {
     constructor(member, value, operator, dataType, searchOptions) {
         var _a;
@@ -918,8 +922,23 @@ class FilterClause {
                 this.uiName = fo.name;
             }
         }
-        // uiOperator
-        this.uiOperator = this.dataType === 'datetime' ? '' : Operators.EQUALS.label; // that's fine (for now)...
+        // We don't want a uiOperator for the datetime dataType. For strings and arrays we have the equals/not-equals/contains operators. The switch case can be expanded for more data types/operators when needed.
+        if (this.dataType === 'datetime') {
+            this.uiOperator = '';
+        }
+        else {
+            switch (this.operator) {
+                case (Operators.EQUALS.value):
+                    this.uiOperator = Operators.EQUALS.label;
+                    break;
+                case (Operators.NOT_EQUALS.value):
+                    this.uiOperator = Operators.NOT_EQUALS.label;
+                    break;
+                case (Operators.CONTAINS.value):
+                    this.uiOperator = Operators.CONTAINS.label;
+                    break;
+            }
+        }
         // uiValue
         this.uiValue = this.value;
         if ((this.dataType === 'datetime')) {
@@ -1259,8 +1278,12 @@ class AdvancedSearchComponent {
     constructor() {
         this.advancedSearchChanged = new EventEmitter();
         this.searchOptions = [];
+        this.operatorsDisabled = false;
         this.filters = [];
         this.menuOptions = [];
+        this.operatorMenuOptions = [];
+        this.operatorOptions = OperatorOptions;
+        this.operators = {};
         this.menuOptionsDictionary = {};
     }
     ngOnInit() {
@@ -1289,13 +1312,37 @@ class AdvancedSearchComponent {
         });
     }
     selectedFieldChanged(field) {
+        var _a, _b, _c;
         this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
+        this.selectedOperator = undefined;
+        // Since we have special UI handling for the daterange, we don't need to fill the operatorMenuOptions in that case.
+        if (((_a = this.selectedField) === null || _a === void 0 ? void 0 : _a.dataType) != 'daterange') {
+            let operatorMenuOpts = [];
+            // based on the data type that we are filtering, fill the operator dropdown with the correct operators. The default is the string with equals/not-equals/contains
+            this.operatorOptions[(_c = (_b = this.selectedField) === null || _b === void 0 ? void 0 : _b.dataType) !== null && _c !== void 0 ? _c : 'string'].forEach(x => {
+                var _a;
+                operatorMenuOpts.push({
+                    text: (_a = x.description) !== null && _a !== void 0 ? _a : x.label,
+                    value: x.value,
+                    data: undefined,
+                    description: x.description,
+                    icon: undefined
+                });
+            });
+            this.operatorMenuOptions = operatorMenuOpts;
+            // Preselect the first option from the operators menu so there will always be a default value, which is the 'equals' operator for all data types for now.
+            this.selectedOperator = this.operatorMenuOptions[0].value;
+        }
         this.fieldValue = undefined;
     }
+    selectedOperatorChanged(operator) {
+        this.selectedOperator = operator;
+    }
     selectedFieldValueChanged(fieldValue) {
         this.fieldValue = fieldValue;
     }
     search() {
+        var _a;
         if (!this.selectedField || !this.selectedField.dataType) {
             return;
         }
@@ -1320,8 +1367,10 @@ class AdvancedSearchComponent {
             if (this.fieldValue === undefined) { // handle empty field value
                 return;
             }
+            // if no operator was provided, it falls back to the default 'equals' operator
+            this.selectedOperator = (_a = this.selectedOperator) !== null && _a !== void 0 ? _a : Operators.EQUALS.value;
             // create the filterClause
-            const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, Operators.EQUALS.value, this.selectedField.dataType, this.searchOptions); // operator is always 'equals'...
+            const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, this.selectedOperator, this.selectedField.dataType, this.searchOptions);
             if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
                 this.filters = this.filters.filter((f) => {
                     return f.member !== this.selectedField.field;
@@ -1344,25 +1393,36 @@ class AdvancedSearchComponent {
             this.advancedSearchChanged.emit(this.filters);
         }
     }
+    isDateValueUnpicked() {
+        return this.fieldValueDateFrom === undefined && this.fieldValueDateTo === undefined;
+    }
+    isFieldAndOperatorUnpicked() {
+        // if the operators are enabled we need to check for both the field value and the operator value
+        return this.operatorsDisabled ? this.fieldValue === undefined : (this.fieldValue === undefined || this.selectedOperator === undefined);
+    }
     clear() {
         this.fieldValueDateFrom = undefined;
         this.fieldValueDateTo = undefined;
         this.selectedField = undefined;
         this.fieldValue = undefined;
+        this.selectedOperator = undefined;
         this.filters = [];
         this.advancedSearchChanged.emit(this.filters);
     }
 }
 AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
+AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS OPERATOR MENU-->\r\n        <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n             class=\"advanced-search-filter-operator-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-operator-label\"\r\n                       for=\"selectedOperator\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                    [selected]=\"selectedOperator\"\r\n                                    (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                    [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>", 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\r\n                    [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>" }]
+            args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n    <div class=\"advanced-search-filter\">\r\n        <!--SEARCH FIELDS-->\r\n        <div class=\"advanced-search-filter-field-container\">\r\n            <label class=\"advanced-search-filter-field-label\"\r\n                   for=\"selectedField\">\r\n                \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n            </label>\r\n            <lib-drop-down-menu [options]=\"menuOptions\"\r\n                                (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n        </div>\r\n        <!--SEARCH FIELDS OPERATOR MENU-->\r\n        <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n             class=\"advanced-search-filter-operator-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-operator-label\"\r\n                       for=\"selectedOperator\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n                                    [selected]=\"selectedOperator\"\r\n                                    (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n        </div>\r\n        <!--SEARCH FIELDS INPUT-->\r\n        <div *ngIf=\"selectedField\"\r\n             class=\"advanced-search-filter-value-container\">\r\n            <div *ngIf=\"selectedField.dataType === 'array'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n                                    [selected]=\"fieldValue\"\r\n                                    (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div *ngIf=\"selectedField.dataType === 'string'\">\r\n                <label class=\"advanced-search-filter-value-label\"\r\n                       for=\"fieldValue\">\r\n                    &nbsp;\r\n                </label>\r\n                <input (keyup.enter)=\"search()\"\r\n                       [(ngModel)]=\"fieldValue\"\r\n                       name=\"fieldValue\"\r\n                       type=\"text\"\r\n                       placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n                       maxlength=\"300\"\r\n                       class=\"advanced-search-filter-value-input\">\r\n            </div>\r\n            <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                <div>\r\n                    <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n                        \u0391\u03C0\u03CC:\r\n                    </span>\r\n                    <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n                                     [(ngModel)]=\"fieldValueDateFrom\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n                <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n                    <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n                        \u0388\u03C9\u03C2:\r\n                    </span>\r\n                    <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n                                     [(ngModel)]=\"fieldValueDateTo\"\r\n                                     [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedField\">\r\n            <!--DO SEARCH-->\r\n            <button type=\"button\"\r\n                    [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n                    [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n                    (click)=\"search()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n            </button>\r\n            <!--CLEAR-->\r\n            <button type=\"button\"\r\n                    (click)=\"clear()\">\r\n                <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n    <!--FILTER CHIPS-->\r\n    <!-- This example requires Tailwind CSS v2.0+ -->\r\n    <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n        <span *ngIf=\"filter && filter.member\"\r\n              class=\"advanced-search-chips\">\r\n            {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n            <button (click)=\"removeFilter(i)\"\r\n                    type=\"button\"\r\n                    class=\"advanced-search-chips-remove-filter\">\r\n                <span class=\"sr-only\">Remove large option</span>\r\n                <svg class=\"h-2 w-2\"\r\n                     stroke=\"currentColor\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 8 8\">\r\n                    <path stroke-linecap=\"round\"\r\n                          stroke-width=\"1.5\"\r\n                          d=\"M1 1l6 6m0-6L1 7\" />\r\n                </svg>\r\n            </button>\r\n        </span>\r\n    </ng-container>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
                 type: Output
             }], searchOptions: [{
                 type: Input,
                 args: ['search-options']
+            }], operatorsDisabled: [{
+                type: Input,
+                args: ['operators-disabled']
             }], filters: [{
                 type: Input
             }] } });
@@ -1541,7 +1601,7 @@ class ListViewComponent {
     }
 }
 ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", 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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>", 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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "operators-disabled", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-view', template: "<div>\r\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n                       [search-options]=\"searchOptions\"\r\n                       [filters]=\"filters\"\r\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n  </lib-advanced-search>\r\n\r\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n             [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n  </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n  <ng-container *ngSwitchCase=\"'tiles'\">\r\n    <div [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <!-- *ngSwitchCase=\"'gallery'\" -->\r\n  <ng-container *ngSwitchCase=\"'gallery'\">\r\n    <ul role=\"list\"\r\n        [class]=\"tilesDeckClass\">\r\n\r\n      <lib-skeleton-loader *ngIf=\"busy\"\r\n                           [count]=\"5\"\r\n                           [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <!-- *ngSwitchCase=\"'table'\" -->\r\n  <ng-container *ngSwitchDefault>\r\n\r\n    <div class=\"list-view-container\">\r\n      <div class=\"list-view-container-inner\">\r\n        <table class=\"list-view-table\">\r\n          <thead class=\"list-view-thead\">\r\n            <tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <th class=\"list-view-th-details\"></th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let col of columns\">\r\n                <th scope=\"col\"\r\n                    [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n                  {{col.title}}\r\n                </th>\r\n              </ng-container>\r\n            </tr>\r\n          </thead>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"busy\">\r\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button disabled\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n          <tbody class=\"list-view-tbody\"\r\n                 *ngIf=\"!busy\">\r\n            <ng-container *ngFor=\"let item of items;let i=index\">\r\n              <tr class=\"list-view-tr\">\r\n                <ng-container *ngIf=\"detailsSectionSupported\">\r\n                  <td class=\"list-view-td-details\"\r\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n                    <button (click)=\"toggleDetails(item)\"\r\n                            type=\"button\"\r\n                            class=\"expand-collapse-button\">\r\n                      <!-- Heroicon name: solid/plus -->\r\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n                    </button>\r\n                  </td>\r\n                  <ng-template #hiddenDetailsButton>\r\n                    <td class=\"list-view-td-details\"></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <td *ngFor=\"let col of columns\"\r\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                </td>\r\n              </tr>\r\n              <ng-container *ngIf=\"detailsSectionSupported\">\r\n                <tr *ngIf=\"item.detailsExpanded\">\r\n                  <td [colSpan]=\"columns.length + 1\"\r\n                      class=\"list-view-td bg-gray-100\">\r\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n    <div class=\"cards-deck-1\">\r\n      <lib-list-view-empty-state></lib-list-view-empty-state>\r\n    </div>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n  <lib-pager [page]=\"page\"\r\n             [page-size]=\"pageSize\"\r\n             [count]=\"count\"\r\n             [sort-options]=\"sortOptions\"\r\n             [sort]=\"sort\"\r\n             [sort-dir]=\"sortdir\"\r\n             [busy]=\"busy\"\r\n             (pageChanged)=\"emitPageChanged($event)\"\r\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n             (sortChanged)=\"emitSortChanged($event)\"\r\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n  </lib-pager>\r\n</div>" }]
@@ -2524,6 +2584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
 class ToggleButtonsListComponent {
     constructor() {
         this.icon = undefined;
+        this.compact = true;
         this.valueChange = new EventEmitter(undefined);
     }
     ngOnInit() {
@@ -2534,16 +2595,18 @@ class ToggleButtonsListComponent {
     }
 }
 ToggleButtonsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleButtonsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-contaner\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                  class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>", 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: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
+ToggleButtonsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n\n    <div class=\"toggle-buttons-list-drop-down-contaner\" *ngIf=\"!compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>", 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: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-contaner\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                  class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>" }]
+            args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n\n    <div class=\"toggle-buttons-list-drop-down-contaner\" *ngIf=\"!compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
                 type: Input
             }], options: [{
                 type: Input
             }], value: [{
                 type: Input
+            }], compact: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -2569,11 +2632,13 @@ class ContentTileItemComponent {
     }
 }
 ContentTileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ContentTileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentTileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ContentTileItemComponent, selector: "lib-content-tile-item", queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+ContentTileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ContentTileItemComponent, selector: "lib-content-tile-item", inputs: { title: "title" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ContentTileItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-content-tile-item', template: '<ng-content></ng-content>' }]
-        }], ctorParameters: function () { return []; }, propDecorators: { template: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }] } });
@@ -2583,7 +2648,7 @@ class ContentTileComponent {
         this.router = router;
         this.title = undefined;
         this.busy = false;
-        this.hideBtn = false;
+        this.showAction = true;
         this.showFooter = true;
         this.actionText = 'Περισσότερα';
         // tslint:disable-next-line:no-output-rename
@@ -2595,6 +2660,7 @@ class ContentTileComponent {
     set items(refs) {
         if (refs) {
             this.itemTemplates = refs.toArray();
+            console.log('ContentTileComponent', this.itemTemplates);
         }
     }
     ngOnInit() {
@@ -2607,16 +2673,17 @@ class ContentTileComponent {
     }
 }
 ContentTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ContentTileComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ContentTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ContentTileComponent, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", hideBtn: "hideBtn", showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <a *ngIf=\"!header\" href=\"#\"\r\n         class=\"kpi-tile-action flex-1\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n      <ng-container *ngIf=\"header\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"actionText\" class=\"float-right align-top\">\r\n        <a href=\"#\" class=\"text-xs\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm hover:bg-slate-700 focus:outline-none\"\r\n                    [class.bg-slate-500]=\"selectedIndex!==i\"\r\n                    [class.bg-slate-700]=\"selectedIndex===i\"\r\n                    [class.ring-slate-700]=\"selectedIndex===i\"\r\n                    [class.ring-offset-1]=\"selectedIndex===i\"\r\n                    [class.ring-1]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\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"] }] });
+ContentTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ContentTileComponent, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", showAction: ["show-action", "showAction"], showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <a *ngIf=\"!header\" href=\"#\"\r\n         class=\"kpi-tile-action flex-1\" (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title || title) || '-'}}</a>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <a href=\"#\" class=\"kpi-tile-action text-xs\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ContentTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-content-tile', template: "<div class=\"card\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <a *ngIf=\"!header\" href=\"#\"\r\n         class=\"kpi-tile-action flex-1\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n      <ng-container *ngIf=\"header\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"actionText\" class=\"float-right align-top\">\r\n        <a href=\"#\" class=\"text-xs\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"inline-flex mx-1 items-center rounded-full border border-transparent p-1 text-white shadow-sm hover:bg-slate-700 focus:outline-none\"\r\n                    [class.bg-slate-500]=\"selectedIndex!==i\"\r\n                    [class.bg-slate-700]=\"selectedIndex===i\"\r\n                    [class.ring-slate-700]=\"selectedIndex===i\"\r\n                    [class.ring-offset-1]=\"selectedIndex===i\"\r\n                    [class.ring-1]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-content-tile', template: "<div class=\"card\" [class.card-deck-busy]=\"busy\">\r\n  <div class=\"card-body\">\r\n    <div class=\"kpi-tile-title-container flex align-top\">\r\n      <a *ngIf=\"!header\" href=\"#\"\r\n         class=\"kpi-tile-action flex-1\" (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title || title) || '-'}}</a>\r\n      <ng-container *ngIf=\"header && header.template\">\r\n        <div class=\"flex-1\">\r\n          <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"showAction\" class=\"float-right align-top\">\r\n        <a href=\"#\" class=\"kpi-tile-action text-xs\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n      </div>\r\n    </div>\r\n    <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\r\n      <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\r\n    </div>\r\n    <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\r\n      <nav class=\"flex items-center justify-between px-4 sm:px-0\">\r\n        <div class=\"flex w-0 flex-1\"></div>\r\n        <div class=\"flex items-center justify-between px-2\">\r\n          <ng-container *ngFor=\"let item of itemTemplates; index as i\">\r\n            <button type=\"button\"\r\n                    title=\"details\"\r\n                    (click)=\"selectedIndex=i\"\r\n                    [disabled]=\"selectedIndex===i\"\r\n                    class=\"tile-card-item-btn\"\r\n                    [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\r\n                    [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"flex w-0 flex-1 justify-end\"></div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { title: [{
                 type: Input
             }], busy: [{
                 type: Input
-            }], hideBtn: [{
-                type: Input
+            }], showAction: [{
+                type: Input,
+                args: ['show-action']
             }], showFooter: [{
                 type: Input,
                 args: ['show-footer']
@@ -2634,6 +2701,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: [ContentTileHeaderComponent]
             }] } });
 
+class StatsGridComponent {
+    constructor() {
+        this.busy = false;
+        this.count = 6;
+        this.loader = ['', '', '', '', '', ''];
+        this.mode = 'normal';
+        this.labels = ['Online', 'Offline', 'Faulted'];
+        this.values = [10, 20, 30];
+        this.colors = [
+            'rgb(53, 177, 201, 0.6)',
+            'rgb(168, 162, 158, 0.2)',
+            'rgb(233, 96, 96, 0.8)'
+        ];
+    }
+    ngOnChanges(changes) {
+        if (changes.count) {
+            this.loader = [];
+            for (let i = 0; i <= this.count; i++) {
+                this.loader.push('');
+            }
+        }
+    }
+    isNumber(value) {
+        return !isNaN(Number(value));
+        ;
+    }
+}
+StatsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StatsGridComponent, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>  ", 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: "pipe", type: i1.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StatsGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-stats-grid', template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-4]=\"mode==='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>  " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }] } });
+
+class ProgressBarComponent {
+    constructor() {
+        this.value = 0;
+        this.total = 0;
+        this.text = undefined;
+        this.percentage = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes.value || changes.total) {
+            this.calcPercentage();
+        }
+    }
+    calcPercentage() {
+        if (this.total > 0) {
+            this.percentage = (this.value / this.total) * 100;
+        }
+        else {
+            this.percentage = 0;
+        }
+    }
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\n    <div class=\"progress-bar-label\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n    <div class=\"progress-bar-backdrop\">\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n  </div>\n  " });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-bar', template: "<div class=\"progress-bar-container\">\n    <div class=\"progress-bar-label\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n    <div class=\"progress-bar-backdrop\">\n      <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n  </div>\n  " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], valueText: [{
+                type: Input,
+                args: ['value-text']
+            }], total: [{
+                type: Input
+            }], totalText: [{
+                type: Input,
+                args: ['total-text']
+            }], text: [{
+                type: Input
+            }] } });
+
 class DynamicComponentHostDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -3295,10 +3448,10 @@ class ShellSidebarLayoutComponent {
     }
 }
 ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate" }, ngImport: i0, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img *ngIf=\"!showMobileSidebar\"\r\n               class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"\r\n                  type=\"button\"\r\n                  class=\"sidebar-static-menu-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\r\n            <svg class=\"h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M4 6h16M4 12h16M4 18h7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n           *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button-md\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"showMobileSidebar\">\r\n            <img class=\"shell-sidebar-logo\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BreadcrumbComponent, selector: "lib-breadcrumb" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config", "sticky"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
+ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate" }, ngImport: i0, template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img alt=\"image\" *ngIf=\"!showMobileSidebar\"\r\n               class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"\r\n                  type=\"button\"\r\n                  class=\"sidebar-static-menu-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\r\n            <svg class=\"h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M4 6h16M4 12h16M4 18h7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n           *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button-md\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BreadcrumbComponent, selector: "lib-breadcrumb" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config", "sticky"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img *ngIf=\"!showMobileSidebar\"\r\n               class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"\r\n                  type=\"button\"\r\n                  class=\"sidebar-static-menu-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\r\n            <svg class=\"h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M4 6h16M4 12h16M4 18h7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n           *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button-md\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"showMobileSidebar\">\r\n            <img class=\"shell-sidebar-logo\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n  <div class=\"sidebar-off-canvas-menu-container\"\r\n       role=\"dialog\"\r\n       aria-modal=\"true\">\r\n    <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n         [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n    </div>\r\n    <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n         [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-off-canvas-layout-container\">\r\n        <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n          <button type=\"button\"\r\n                  class=\"sidebar-off-canvas-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Close sidebar</span>\r\n            <svg class=\"h-6 w-6 text-white\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <div class=\"sidebar-off-canvas-app-logo-container\">\r\n          <img alt=\"image\" class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n        </div>\r\n        <lib-shell-sidebar></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"sidebar-dummy-element\"\r\n           aria-hidden=\"true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-outer-container\">\r\n    <div class=\"sidebar-static-menu-container\"\r\n         [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n         [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n      <div class=\"sidebar-static-menu-container-inner\">\r\n        <div class=\"sidebar-static-menu-app-logo-container\">\r\n          <img alt=\"image\" *ngIf=\"!showMobileSidebar\"\r\n               class=\"shell-sidebar-logo\"\r\n               [src]=\"config?.appLogo\"\r\n               [alt]=\"config?.appLogoAlt\">\r\n          <button *ngIf=\"showMobileSidebar\"\r\n                  type=\"button\"\r\n                  class=\"sidebar-static-menu-toggle-button\"\r\n                  (click)=\"toggleMobileSidebar()\">\r\n            <span class=\"sr-only\">Toggle sidebar</span>\r\n            <svg class=\"h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke-width=\"2\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    d=\"M4 6h16M4 12h16M4 18h7\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n      </div>\r\n      <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n           *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n        <div class=\"group block flex-shrink-0\">\r\n          <div class=\"flex items-center\">\r\n            <div>\r\n              <p class=\"text-sm font-medium text-gray-400\">\r\n                <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"sidebar-static-menu-wrapper\"\r\n       [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n    <div class=\"sidebar-static-menu-sticky-header-container\"\r\n         *ngIf=\"config?.showHeader\">\r\n      <button *ngIf=\"showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button-md\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <button *ngIf=\"!showMobileSidebar\"\r\n              type=\"button\"\r\n              class=\"sidebar-static-menu-toggle-button\"\r\n              (click)=\"toggleMobileSidebar()\">\r\n        <span class=\"sr-only\">Toggle sidebar</span>\r\n        <svg class=\"h-6 w-6\"\r\n             xmlns=\"http://www.w3.org/2000/svg\"\r\n             fill=\"none\"\r\n             viewBox=\"0 0 24 24\"\r\n             stroke-width=\"2\"\r\n             stroke=\"currentColor\"\r\n             aria-hidden=\"true\">\r\n          <path stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                d=\"M4 6h16M4 12h16M4 18h7\" />\r\n        </svg>\r\n      </button>\r\n      <div class=\"sidebar-static-menu-header-container\">\r\n        <div class=\"sidebar-static-menu-header-near-container\">\r\n          <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n               *ngIf=\"showMobileSidebar\">\r\n            <img alt=\"image\" class=\"shell-sidebar-logo\"\r\n                 [src]=\"config?.appLogo\"\r\n                 [alt]=\"config?.appLogoAlt\">\r\n          </div>\r\n        </div>\r\n        <div class=\"sidebar-static-menu-header-far-container\">\r\n          <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n                                    [show-alerts]=\"config?.showAlertsOnHeader\"\r\n                                    [show-langs]=\"config?.showLangsOnHeader\">\r\n          </lib-shell-sidebar-header>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div flex-1>\r\n      <main class=\"shell-content-container-fluid\">\r\n        <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n        <div class=\"shell-content-container-inner\">\r\n          <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n        </div>\r\n      </main>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: UserSettingsService }]; }, propDecorators: { config: [{
                 type: Input
             }], sidebarFooterTemplate: [{
@@ -3398,10 +3551,10 @@ class ShellLayoutComponent {
     }
 }
 ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: ComponentLoaderFactory }, { token: SHELL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellLayoutComponent, selector: "lib-shell-layout", inputs: { sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\"\r\n     [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] });
+ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellLayoutComponent, selector: "lib-shell-layout", inputs: { sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\"\r\n     [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-side-pane #dialogPane>\r\n    <ng-template dialogHost></ng-template>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-shell-layout', template: "<div [class.hidden]=\"!loaded\"\r\n     [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>" }]
+            args: [{ selector: 'lib-shell-layout', template: "<div [class.hidden]=\"!loaded\"\r\n     [class.block]=\"loaded\">\r\n  <!-- STACKED LAYOUT -->\r\n  <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\"\r\n       class=\"shell-container active-side-pane\">\r\n    <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n  </div>\r\n  <!-- SIDEBAR LAYOUT -->\r\n  <div *ngIf=\"activeConfig.layout === 'Sidebar'\"\r\n       class=\"sidebar shell-container active-side-pane\">\r\n    <lib-shell-sidebar-layout [config]=\"activeConfig\"\r\n                              [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\r\n    </lib-shell-sidebar-layout>\r\n  </div>\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\r\n    </router-outlet>\r\n  </lib-side-pane>\r\n  <lib-side-pane #dialogPane>\r\n    <ng-template dialogHost></ng-template>\r\n  </lib-side-pane>\r\n  <lib-toaster-container></lib-toaster-container>\r\n</div>" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.Router }, { type: ComponentLoaderFactory }, { type: undefined, decorators: [{
                         type: Inject,
@@ -3585,10 +3738,10 @@ class ModelViewLayoutComponent {
     }
 }
 ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\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$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n" }]
+            args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n  <main class=\"model-view-container\">\r\n    <div class=\"model-view-container-inner\">\r\n      <aside class=\"model-view-aside\">\r\n        <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n          <div class=\"model-view-aside-header-container\">\r\n            <div class=\"model-view-aside-header-container-inner\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n            <!-- menu items -->\r\n            <div class=\"model-view-menu-container-mobile\">\r\n                <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n            </div>\r\n            <div class=\"model-view-menu-container\">\r\n              <nav class=\"model-view-menu-nav\">\r\n                <div class=\"model-view-menu-item\">\r\n                  <ng-container *ngFor=\"let section of primary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"model-view-menu-item-far\">\r\n                  <ng-container *ngFor=\"let section of secondary\">\r\n                    <a href=\"#\"\r\n                       [routerLinkActive]=\"['view-nav-link-active']\"\r\n                       [routerLink]=\"section.link\"\r\n                       [routerLinkActiveOptions]=\"{ exact: false }\"\r\n                       class=\"view-nav-link\">\r\n                      <i [class]=\"section.icon + ' mr-2'\"]></i>\r\n                      {{section.text}}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </aside>\r\n      <div class=\"model-view-details-container\">\r\n        <router-outlet></router-outlet>\r\n      </div>\r\n    </div>\r\n  </main>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; }, propDecorators: { title: [{
                 type: Input
             }], primary: [{
@@ -3627,6 +3780,7 @@ class SideViewLayoutComponent {
         this.cancelShow = true;
         // tslint:disable-next-line:no-input-rename
         this.forceLocationBack = false;
+        this.redirectOnClose = true;
         // @Output() close = new EventEmitter<any>();
         this.cancel = new EventEmitter();
         this.ok = new EventEmitter();
@@ -3651,21 +3805,25 @@ class SideViewLayoutComponent {
     }
     emitClose() {
         this.cancel.emit(false);
-        this.closeSidePane();
+        if (this.redirectOnClose) {
+            this.closeSidePane();
+        }
     }
     emitCancel() {
         this.cancel.emit(false);
-        this.closeSidePane();
+        if (this.redirectOnClose) {
+            this.closeSidePane();
+        }
     }
     emitOK() {
         this.ok.emit(true);
-        if (this.closeOnOk) {
+        if (this.closeOnOk && this.redirectOnClose) {
             this.closeSidePane();
         }
     }
 }
 SideViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SideViewLayoutComponent, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"], redirectOnClose: ["redirect-on-close", "redirectOnClose"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\r\n  <div class=\"side-view-layout-container\">\r\n    <div class=\"side-view-layout-container-inner\">\r\n      <div class=\"side-view-layout-header-margins\">\r\n        <div class=\"side-view-layout-header-container\">\r\n          <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\r\n            {{title}}\r\n          </h2>\r\n          <div class=\"side-view-layout-close-button-container\">\r\n            <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\r\n              <span class=\"sr-only\">Close panel</span>\r\n              <!-- Heroicon name: outline/x -->\r\n              <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-view-layout-content-container\">\r\n        <!-- Replace with your content -->\r\n        <ng-content></ng-content>\r\n        <!-- /End replace -->\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\r\n      <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\r\n        {{cancelLabel}}\r\n      </button>\r\n      <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\r\n        {{okLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n" }]
@@ -3696,6 +3854,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
             }], forceLocationBack: [{
                 type: Input,
                 args: ['force-location-back']
+            }], redirectOnClose: [{
+                type: Input,
+                args: ['redirect-on-close']
             }], cancel: [{
                 type: Output
             }], ok: [{
@@ -3975,6 +4136,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 }]
         }] });
 
+class ShortNumberPipe {
+    transform(number, args) {
+        if (isNaN(number))
+            return null; // will only work value is a number
+        if (number === null)
+            return null;
+        if (number === 0)
+            return null;
+        let abs = Math.abs(number);
+        const rounder = Math.pow(10, 1);
+        const isNegative = number < 0; // will also work for Negative numbers
+        let key = '';
+        const powers = [
+            { key: 'Q', value: Math.pow(10, 15) },
+            { key: 'T', value: Math.pow(10, 12) },
+            { key: 'B', value: Math.pow(10, 9) },
+            { key: 'M', value: Math.pow(10, 6) },
+            { key: 'K', value: 1000 }
+        ];
+        for (let i = 0; i < powers.length; i++) {
+            let reduced = abs / powers[i].value;
+            reduced = Math.round(reduced * rounder) / rounder;
+            if (reduced >= 1) {
+                abs = reduced;
+                key = powers[i].key;
+                break;
+            }
+        }
+        return (isNegative ? '-' : '') + abs + key;
+    }
+}
+ShortNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShortNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ShortNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: ShortNumberPipe, name: "shortNumber", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShortNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'shortNumber',
+                    pure: false
+                }]
+        }] });
+
 class BaseListComponent {
     constructor(route$, router$) {
         this.route$ = route$;
@@ -4666,6 +4868,7 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DatepickerComponent,
         DropDownMenuComponent,
         DurationFormatPipe,
+        ShortNumberPipe,
         DynamicComponentHostDirective,
         ErrorComponent,
         FormLayoutComponent,
@@ -4709,7 +4912,9 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToggleButtonsListComponent,
         ContentTileComponent,
         ContentTileItemComponent,
-        ContentTileHeaderComponent], imports: [CommonModule,
+        ContentTileHeaderComponent,
+        StatsGridComponent,
+        ProgressBarComponent], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
         FormsModule], exports: [AddressPipe,
@@ -4723,6 +4928,7 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DatepickerComponent,
         DropDownMenuComponent,
         DurationFormatPipe,
+        ShortNumberPipe,
         ErrorComponent,
         FormLayoutComponent,
         KpiTileComponent,
@@ -4757,7 +4963,9 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToggleButtonsListComponent,
         ContentTileComponent,
         ContentTileItemComponent,
-        ContentTileHeaderComponent] });
+        ContentTileHeaderComponent,
+        StatsGridComponent,
+        ProgressBarComponent] });
 IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
@@ -4778,6 +4986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         DatepickerComponent,
                         DropDownMenuComponent,
                         DurationFormatPipe,
+                        ShortNumberPipe,
                         DynamicComponentHostDirective,
                         ErrorComponent,
                         FormLayoutComponent,
@@ -4821,7 +5030,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ToggleButtonsListComponent,
                         ContentTileComponent,
                         ContentTileItemComponent,
-                        ContentTileHeaderComponent
+                        ContentTileHeaderComponent,
+                        StatsGridComponent,
+                        ProgressBarComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4841,6 +5052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         DatepickerComponent,
                         DropDownMenuComponent,
                         DurationFormatPipe,
+                        ShortNumberPipe,
                         ErrorComponent,
                         FormLayoutComponent,
                         KpiTileComponent,
@@ -4875,7 +5087,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ToggleButtonsListComponent,
                         ContentTileComponent,
                         ContentTileItemComponent,
-                        ContentTileHeaderComponent
+                        ContentTileHeaderComponent,
+                        StatsGridComponent,
+                        ProgressBarComponent
                     ]
                 }]
         }] });
@@ -4886,5 +5100,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map