@indice/ng-components 0.4.2 → 0.5.0-beta.1

package/fesm2022/indice-ng-components.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
-import { Subject, BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, of, fromEvent } from 'rxjs';
+import { Subject, isObservable, BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, of, fromEvent } from 'rxjs';
 import { filter, distinctUntilChanged, debounceTime, share, map } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -221,7 +221,7 @@ class DropDownMenuComponent {
         // tslint:disable-next-line:no-input-rename
         this.selectedValue = undefined;
         this.multiple = false;
-        this.placeholder = 'Παρακαλώ επιλέξτε...';
+        this.placeholder = 'Please select...';
         this.showIcons = true;
         this.selectedOption$ = null;
         this.selectedChange = new EventEmitter();
@@ -590,6 +590,7 @@ const APP_NOTIFICATIONS = new InjectionToken('APP_NOTIFICATIONS');
 const LIBSTEPPER_ACCESSOR = new InjectionToken('LibStepperAccessor');
 const LIBTABGROUP_ACCESSOR = new InjectionToken('LibTabGroupAccessor');
 const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+const BREADCRUMB_LABEL_RESOLVER = new InjectionToken('BREADCRUMB_LABEL_PROCESSOR');
 
 class UtilitiesService {
     constructor() { }
@@ -637,9 +638,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }], ctorParameters: () => [] });
 
 class BreadcrumbService {
-    constructor(_router, _utilities, _shellConfig) {
+    constructor(_router, _utilities, breadcrumbLabelResolver, _shellConfig) {
         this._router = _router;
         this._utilities = _utilities;
+        this.breadcrumbLabelResolver = breadcrumbLabelResolver;
         this._shellConfig = _shellConfig;
         this._breadcrumb$ = new Subject();
         this.breadcrumb = this._breadcrumb$.asObservable();
@@ -680,7 +682,16 @@ class BreadcrumbService {
         return new BreadcrumbItem(this._getRouteTitle(homeRoute), homeRoute.path || '');
     }
     _getRouteTitle(route) {
-        return route?.data?.breadcrumb?.title || route.component?.name.replace('Component', '');
+        if (this.breadcrumbLabelResolver) {
+            const context = {
+                //will have to change things for additional info from route snapshot
+                route: route
+            };
+            return this.breadcrumbLabelResolver.process(context);
+        }
+        else {
+            return route?.data?.breadcrumb?.title || route.component?.name.replace('Component', '');
+        }
     }
     _buildBreadcrumb() {
         const breadcrumb = [];
@@ -786,7 +797,7 @@ class BreadcrumbService {
         }
         return route.data.breadcrumb;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: UtilitiesService }, { token: SHELL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: UtilitiesService }, { token: BREADCRUMB_LABEL_RESOLVER, optional: true }, { token: SHELL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbService, decorators: [{
@@ -796,6 +807,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: UtilitiesService }, { type: undefined, decorators: [{
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [BREADCRUMB_LABEL_RESOLVER]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
                 }, {
                     type: Inject,
                     args: [SHELL_CONFIG]
@@ -820,12 +836,15 @@ class BreadcrumbComponent {
             this.breadcrumb = [...breadcrumb, new BreadcrumbItem('', '')];
         });
     }
+    isAsync(value) {
+        return isObservable(value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: false, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n     aria-label=\"Breadcrumb\">\n  <ol role=\"list\"\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\"\n        *ngFor=\"let item of breadcrumb; let i = index\">\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n      </div>\n    </li>\n  </ol>\n</nav>\n<ng-template let-value=\"value\"\n             #homeTemplate>\n  <a [routerLink]=\"value.urlSegments\"\n     [title]=\"value.title\"\n     class=\"text-gray-400 hover:text-gray-500\">\n    <svg class=\"flex-shrink-0 h-5 w-5\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 20 20\"\n         fill=\"currentColor\"\n         aria-hidden=\"true\">\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n    </svg>\n    <span class=\"sr-only\">{{ value.title }}</span>\n  </a>\n</ng-template>\n<ng-template let-value=\"value\"\n             #linkTemplate>\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n       viewBox=\"0 0 24 44\"\n       preserveAspectRatio=\"none\"\n       fill=\"currentColor\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       aria-hidden=\"true\">\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n  </svg>\n  <a [routerLink]=\"value.urlSegments\"\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n    {{ value.title }}\n  </a>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: false, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n     aria-label=\"Breadcrumb\">\n  <ol role=\"list\"\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\"\n        *ngFor=\"let item of breadcrumb; let i = index\">\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n      </div>\n    </li>\n  </ol>\n</nav>\n<ng-template let-value=\"value\"\n             #homeTemplate>\n  <a [routerLink]=\"value.urlSegments\"\n     [title]=\"isAsync(value.title) ? (value.title | async) : value.title\"\n     class=\"text-gray-400 hover:text-gray-500\">\n    <svg class=\"flex-shrink-0 h-5 w-5\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 20 20\"\n         fill=\"currentColor\"\n         aria-hidden=\"true\">\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n    </svg>\n    <span class=\"sr-only\">{{ isAsync(value.title) ? (value.title | async) : value.title }}</span>\n  </a>\n</ng-template>\n<ng-template let-value=\"value\"\n             #linkTemplate>\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n       viewBox=\"0 0 24 44\"\n       preserveAspectRatio=\"none\"\n       fill=\"currentColor\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       aria-hidden=\"true\">\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n  </svg>\n  <a [routerLink]=\"value.urlSegments\"\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n    {{ isAsync(value.title) ? (value.title | async) : value.title }}\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-breadcrumb', standalone: false, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n     aria-label=\"Breadcrumb\">\n  <ol role=\"list\"\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\"\n        *ngFor=\"let item of breadcrumb; let i = index\">\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n      </div>\n    </li>\n  </ol>\n</nav>\n<ng-template let-value=\"value\"\n             #homeTemplate>\n  <a [routerLink]=\"value.urlSegments\"\n     [title]=\"value.title\"\n     class=\"text-gray-400 hover:text-gray-500\">\n    <svg class=\"flex-shrink-0 h-5 w-5\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 20 20\"\n         fill=\"currentColor\"\n         aria-hidden=\"true\">\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n    </svg>\n    <span class=\"sr-only\">{{ value.title }}</span>\n  </a>\n</ng-template>\n<ng-template let-value=\"value\"\n             #linkTemplate>\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n       viewBox=\"0 0 24 44\"\n       preserveAspectRatio=\"none\"\n       fill=\"currentColor\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       aria-hidden=\"true\">\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n  </svg>\n  <a [routerLink]=\"value.urlSegments\"\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n    {{ value.title }}\n  </a>\n</ng-template>" }]
+            args: [{ selector: 'lib-breadcrumb', standalone: false, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n     aria-label=\"Breadcrumb\">\n  <ol role=\"list\"\n      class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\"\n        *ngFor=\"let item of breadcrumb; let i = index\">\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n      </div>\n    </li>\n  </ol>\n</nav>\n<ng-template let-value=\"value\"\n             #homeTemplate>\n  <a [routerLink]=\"value.urlSegments\"\n     [title]=\"isAsync(value.title) ? (value.title | async) : value.title\"\n     class=\"text-gray-400 hover:text-gray-500\">\n    <svg class=\"flex-shrink-0 h-5 w-5\"\n         xmlns=\"http://www.w3.org/2000/svg\"\n         viewBox=\"0 0 20 20\"\n         fill=\"currentColor\"\n         aria-hidden=\"true\">\n      <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n    </svg>\n    <span class=\"sr-only\">{{ isAsync(value.title) ? (value.title | async) : value.title }}</span>\n  </a>\n</ng-template>\n<ng-template let-value=\"value\"\n             #linkTemplate>\n  <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n       viewBox=\"0 0 24 44\"\n       preserveAspectRatio=\"none\"\n       fill=\"currentColor\"\n       xmlns=\"http://www.w3.org/2000/svg\"\n       aria-hidden=\"true\">\n    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n  </svg>\n  <a [routerLink]=\"value.urlSegments\"\n     class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n    {{ isAsync(value.title) ? (value.title | async) : value.title }}\n  </a>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: BreadcrumbService }] });
 
 class ListColumnComponent {
@@ -892,14 +911,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 var Operators;
 (function (Operators) {
-    Operators.EQUALS = { label: '=', value: 'eq', description: 'Ίσο με' };
-    Operators.NOT_EQUALS = { label: '≠', value: 'neq', description: 'Διάφορο του' };
-    Operators.GREATER_THAN = { label: '>', value: 'gt', description: 'Μεγαλύτερο από' };
-    Operators.LESS_THAN = { label: '<', value: 'lt', description: 'Μικρότερο από' };
-    Operators.GREATER_THAN_EQUAL = { label: '≥', value: 'gte', description: 'Μεγαλύτερο ή ίσο με' };
-    Operators.LESS_THAN_EQUAL = { label: '≤', value: 'lte', description: 'Μικρότερο ή ίσο με' };
-    Operators.CONTAINS = { label: '∋', value: 'contains', description: 'Περιέχει' };
-    Operators.IN = { label: '1..n', value: 'in', description: 'Μέσα σε' };
+    Operators.EQUALS = { label: '=', value: 'eq', description: 'Equal to' };
+    Operators.NOT_EQUALS = { label: '≠', value: 'neq', description: 'Not equal to' };
+    Operators.GREATER_THAN = { label: '>', value: 'gt', description: 'Greater than' };
+    Operators.LESS_THAN = { label: '<', value: 'lt', description: 'Less than' };
+    Operators.GREATER_THAN_EQUAL = { label: '≥', value: 'gte', description: 'Greater than or equal to' };
+    Operators.LESS_THAN_EQUAL = { label: '≤', value: 'lte', description: 'Less than or equal to' };
+    Operators.CONTAINS = { label: '∋', value: 'contains', description: 'Contains' };
+    Operators.IN = { label: '1..n', value: 'in', description: 'In' };
 })(Operators || (Operators = {}));
 var QueryParameters;
 (function (QueryParameters) {
@@ -925,7 +944,7 @@ class FilterClause {
         this.dataType = dataType === undefined ? 'string' : dataType;
         // uiName
         if (this.dataType === 'datetime') { // special treatment for dates
-            this.uiName = this.member === QueryParameters.FILTER_FROM ? 'Από' : 'Έως';
+            this.uiName = this.member === QueryParameters.FILTER_FROM ? 'From' : 'To';
         }
         else {
             this.uiName = this.member;
@@ -1298,6 +1317,7 @@ class AdvancedSearchComponent {
         this.operatorsDisabled = false;
         this.searchOptions = [];
         this.filters = [];
+        this.searchCriteriaLabel = 'Search Criteria:';
         this.menuOptions = [];
         this.operatorMenuOptions = [];
         this.operatorOptions = OperatorOptions;
@@ -1429,11 +1449,11 @@ class AdvancedSearchComponent {
         this.advancedSearchChanged.emit(this.filters);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AdvancedSearchComponent, isStandalone: false, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"advanced-search-container\">\n  <div class=\"advanced-search-filter\">\n      <!--SEARCH FIELDS-->\n      <div class=\"advanced-search-filter-field-container\">\n          <label class=\"advanced-search-filter-field-label\"\n                 for=\"selectedField\">\n              \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\n          </label>\n          <lib-drop-down-menu [options]=\"menuOptions\"\n                              (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n      </div>\n      <!--SEARCH FIELDS OPERATOR MENU-->\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\n           class=\"advanced-search-filter-operator-container\">\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n              <label class=\"advanced-search-filter-operator-label\"\n                     for=\"selectedOperator\">\n                  &nbsp;\n              </label>\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n                                  [selected]=\"selectedOperator\"\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n          </div>\n      </div>\n      <!--SEARCH FIELDS INPUT-->\n      <div *ngIf=\"selectedField\"\n           class=\"advanced-search-filter-value-container\">\n          <div *ngIf=\"selectedField.dataType === 'array'\">\n              <label class=\"advanced-search-filter-value-label\"\n                     for=\"fieldValue\">\n                  &nbsp;\n              </label>\n              <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                                  [selected]=\"fieldValue\"\n                                  (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n          </div>\n          <div *ngIf=\"selectedField.dataType === 'string'\">\n              <label class=\"advanced-search-filter-value-label\"\n                     for=\"fieldValue\">\n                  &nbsp;\n              </label>\n              <input (keyup.enter)=\"search()\"\n                     [(ngModel)]=\"fieldValue\"\n                     name=\"fieldValue\"\n                     type=\"text\"\n                     placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\n                     maxlength=\"300\"\n                     class=\"advanced-search-filter-value-input\">\n          </div>\n          <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n              <div>\n                  <span class=\"advanced-search-filter-value-input-daterange-from\">\n                      \u0391\u03C0\u03CC:\n                  </span>\n                  <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                                   [(ngModel)]=\"fieldValueDateFrom\"\n                                   [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n              </div>\n              <div *ngIf=\"selectedField.dataType === 'daterange'\">\n                  <span class=\"advanced-search-filter-value-input-daterange-to\">\n                      \u0388\u03C9\u03C2:\n                  </span>\n                  <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                                   [(ngModel)]=\"fieldValueDateTo\"\n                                   [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n              </div>\n          </ng-container>\n      </div>\n      <ng-container *ngIf=\"selectedField\">\n          <!--DO SEARCH-->\n          <button type=\"button\"\n                  [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n                  (click)=\"search()\">\n              <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n          </button>\n          <!--CLEAR-->\n          <button type=\"button\"\n                  (click)=\"clear()\">\n              <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n          </button>\n      </ng-container>\n  </div>\n  <!--FILTER CHIPS-->\n  <!-- In order for our changes to be reflected everytime searchOptions change -->\n  <!-- We are looping searchOptions in order to display the proper name -->\n<ng-container *ngFor=\"let searchOption of searchOptions\">\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n          class=\"advanced-search-chips\"\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n      <button (click)=\"removeFilter(j)\"\n              [disabled]=\"searchOption?.readonly ?? false\"\n              type=\"button\"\n              class=\"advanced-search-chips-remove-filter\">\n        <span class=\"sr-only\">Remove large option</span>\n        <svg class=\"h-2 w-2\"\n             stroke=\"currentColor\"\n             fill=\"none\"\n             viewBox=\"0 0 8 8\">\n          <path stroke-linecap=\"round\"\n                stroke-width=\"1.5\"\n                d=\"M1 1l6 6m0-6L1 7\" />\n        </svg>\n      </button>\n    </span>\n  </ng-container>\n</ng-container>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AdvancedSearchComponent, isStandalone: false, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters", searchCriteriaLabel: "searchCriteriaLabel" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"advanced-search-container\">\n  <div class=\"advanced-search-filter\">\n    <!--SEARCH FIELDS-->\n    <div class=\"advanced-search-filter-field-container\">\n      <label class=\"advanced-search-filter-field-label\"\n             for=\"selectedField\">\n        {{searchCriteriaLabel}}\n      </label>\n      <lib-drop-down-menu [options]=\"menuOptions\"\n                          (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n    </div>\n    <!--SEARCH FIELDS OPERATOR MENU-->\n    <div *ngIf=\"!operatorsDisabled && selectedField\"\n         class=\"advanced-search-filter-operator-container\">\n      <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n        <label class=\"advanced-search-filter-operator-label\"\n               for=\"selectedOperator\">\n          &nbsp;\n        </label>\n        <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n                            [selected]=\"selectedOperator\"\n                            (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n      </div>\n    </div>\n    <!--SEARCH FIELDS INPUT-->\n    <div *ngIf=\"selectedField\"\n         class=\"advanced-search-filter-value-container\">\n      <div *ngIf=\"selectedField.dataType === 'array'\">\n        <label class=\"advanced-search-filter-value-label\"\n               for=\"fieldValue\">\n          &nbsp;\n        </label>\n        <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                            [selected]=\"fieldValue\"\n                            (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n      </div>\n      <div *ngIf=\"selectedField.dataType === 'string'\">\n        <label class=\"advanced-search-filter-value-label\"\n               for=\"fieldValue\">\n          &nbsp;\n        </label>\n        <input (keyup.enter)=\"search()\"\n               [(ngModel)]=\"fieldValue\"\n               name=\"fieldValue\"\n               type=\"text\"\n               placeholder=\"Search\"\n               maxlength=\"300\"\n               class=\"advanced-search-filter-value-input\">\n      </div>\n      <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n        <div>\n          <span class=\"advanced-search-filter-value-input-daterange-from\">\n            From:\n          </span>\n          <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                           [(ngModel)]=\"fieldValueDateFrom\"\n                           [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n        </div>\n        <div *ngIf=\"selectedField.dataType === 'daterange'\">\n          <span class=\"advanced-search-filter-value-input-daterange-to\">\n            To:\n          </span>\n          <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                           [(ngModel)]=\"fieldValueDateTo\"\n                           [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container *ngIf=\"selectedField\">\n      <!--DO SEARCH-->\n      <button type=\"button\"\n              [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n              [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n              (click)=\"search()\">\n        <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n      </button>\n      <!--CLEAR-->\n      <button type=\"button\"\n              (click)=\"clear()\">\n        <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n      </button>\n    </ng-container>\n  </div>\n  <!--FILTER CHIPS-->\n  <!-- In order for our changes to be reflected everytime searchOptions change -->\n  <!-- We are looping searchOptions in order to display the proper name -->\n  <ng-container *ngFor=\"let searchOption of searchOptions\">\n    <ng-container *ngFor=\"let filter of filters; let j = index\">\n      <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n            class=\"advanced-search-chips\"\n            [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n        {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n        <button (click)=\"removeFilter(j)\"\n                [disabled]=\"searchOption?.readonly ?? false\"\n                type=\"button\"\n                class=\"advanced-search-chips-remove-filter\">\n          <span class=\"sr-only\">Remove large option</span>\n          <svg class=\"h-2 w-2\"\n               stroke=\"currentColor\"\n               fill=\"none\"\n               viewBox=\"0 0 8 8\">\n            <path stroke-linecap=\"round\"\n                  stroke-width=\"1.5\"\n                  d=\"M1 1l6 6m0-6L1 7\" />\n          </svg>\n        </button>\n      </span>\n    </ng-container>\n  </ng-container>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-advanced-search', standalone: false, template: "<div class=\"advanced-search-container\">\n  <div class=\"advanced-search-filter\">\n      <!--SEARCH FIELDS-->\n      <div class=\"advanced-search-filter-field-container\">\n          <label class=\"advanced-search-filter-field-label\"\n                 for=\"selectedField\">\n              \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\n          </label>\n          <lib-drop-down-menu [options]=\"menuOptions\"\n                              (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n      </div>\n      <!--SEARCH FIELDS OPERATOR MENU-->\n      <div *ngIf=\"!operatorsDisabled && selectedField\"\n           class=\"advanced-search-filter-operator-container\">\n          <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n              <label class=\"advanced-search-filter-operator-label\"\n                     for=\"selectedOperator\">\n                  &nbsp;\n              </label>\n              <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n                                  [selected]=\"selectedOperator\"\n                                  (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n          </div>\n      </div>\n      <!--SEARCH FIELDS INPUT-->\n      <div *ngIf=\"selectedField\"\n           class=\"advanced-search-filter-value-container\">\n          <div *ngIf=\"selectedField.dataType === 'array'\">\n              <label class=\"advanced-search-filter-value-label\"\n                     for=\"fieldValue\">\n                  &nbsp;\n              </label>\n              <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                                  [selected]=\"fieldValue\"\n                                  (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n          </div>\n          <div *ngIf=\"selectedField.dataType === 'string'\">\n              <label class=\"advanced-search-filter-value-label\"\n                     for=\"fieldValue\">\n                  &nbsp;\n              </label>\n              <input (keyup.enter)=\"search()\"\n                     [(ngModel)]=\"fieldValue\"\n                     name=\"fieldValue\"\n                     type=\"text\"\n                     placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\n                     maxlength=\"300\"\n                     class=\"advanced-search-filter-value-input\">\n          </div>\n          <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n              <div>\n                  <span class=\"advanced-search-filter-value-input-daterange-from\">\n                      \u0391\u03C0\u03CC:\n                  </span>\n                  <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                                   [(ngModel)]=\"fieldValueDateFrom\"\n                                   [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n              </div>\n              <div *ngIf=\"selectedField.dataType === 'daterange'\">\n                  <span class=\"advanced-search-filter-value-input-daterange-to\">\n                      \u0388\u03C9\u03C2:\n                  </span>\n                  <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                                   [(ngModel)]=\"fieldValueDateTo\"\n                                   [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n              </div>\n          </ng-container>\n      </div>\n      <ng-container *ngIf=\"selectedField\">\n          <!--DO SEARCH-->\n          <button type=\"button\"\n                  [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n                  [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n                  (click)=\"search()\">\n              <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n          </button>\n          <!--CLEAR-->\n          <button type=\"button\"\n                  (click)=\"clear()\">\n              <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n          </button>\n      </ng-container>\n  </div>\n  <!--FILTER CHIPS-->\n  <!-- In order for our changes to be reflected everytime searchOptions change -->\n  <!-- We are looping searchOptions in order to display the proper name -->\n<ng-container *ngFor=\"let searchOption of searchOptions\">\n  <ng-container *ngFor=\"let filter of filters; let j = index\">\n    <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n          class=\"advanced-search-chips\"\n          [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n      {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n      <button (click)=\"removeFilter(j)\"\n              [disabled]=\"searchOption?.readonly ?? false\"\n              type=\"button\"\n              class=\"advanced-search-chips-remove-filter\">\n        <span class=\"sr-only\">Remove large option</span>\n        <svg class=\"h-2 w-2\"\n             stroke=\"currentColor\"\n             fill=\"none\"\n             viewBox=\"0 0 8 8\">\n          <path stroke-linecap=\"round\"\n                stroke-width=\"1.5\"\n                d=\"M1 1l6 6m0-6L1 7\" />\n        </svg>\n      </button>\n    </span>\n  </ng-container>\n</ng-container>\n\n</div>\n" }]
+            args: [{ selector: 'lib-advanced-search', standalone: false, template: "<div class=\"advanced-search-container\">\n  <div class=\"advanced-search-filter\">\n    <!--SEARCH FIELDS-->\n    <div class=\"advanced-search-filter-field-container\">\n      <label class=\"advanced-search-filter-field-label\"\n             for=\"selectedField\">\n        {{searchCriteriaLabel}}\n      </label>\n      <lib-drop-down-menu [options]=\"menuOptions\"\n                          (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n    </div>\n    <!--SEARCH FIELDS OPERATOR MENU-->\n    <div *ngIf=\"!operatorsDisabled && selectedField\"\n         class=\"advanced-search-filter-operator-container\">\n      <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n        <label class=\"advanced-search-filter-operator-label\"\n               for=\"selectedOperator\">\n          &nbsp;\n        </label>\n        <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n                            [selected]=\"selectedOperator\"\n                            (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n      </div>\n    </div>\n    <!--SEARCH FIELDS INPUT-->\n    <div *ngIf=\"selectedField\"\n         class=\"advanced-search-filter-value-container\">\n      <div *ngIf=\"selectedField.dataType === 'array'\">\n        <label class=\"advanced-search-filter-value-label\"\n               for=\"fieldValue\">\n          &nbsp;\n        </label>\n        <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n                            [selected]=\"fieldValue\"\n                            (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n      </div>\n      <div *ngIf=\"selectedField.dataType === 'string'\">\n        <label class=\"advanced-search-filter-value-label\"\n               for=\"fieldValue\">\n          &nbsp;\n        </label>\n        <input (keyup.enter)=\"search()\"\n               [(ngModel)]=\"fieldValue\"\n               name=\"fieldValue\"\n               type=\"text\"\n               placeholder=\"Search\"\n               maxlength=\"300\"\n               class=\"advanced-search-filter-value-input\">\n      </div>\n      <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n        <div>\n          <span class=\"advanced-search-filter-value-input-daterange-from\">\n            From:\n          </span>\n          <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n                           [(ngModel)]=\"fieldValueDateFrom\"\n                           [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n        </div>\n        <div *ngIf=\"selectedField.dataType === 'daterange'\">\n          <span class=\"advanced-search-filter-value-input-daterange-to\">\n            To:\n          </span>\n          <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n                           [(ngModel)]=\"fieldValueDateTo\"\n                           [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n        </div>\n      </ng-container>\n    </div>\n    <ng-container *ngIf=\"selectedField\">\n      <!--DO SEARCH-->\n      <button type=\"button\"\n              [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n              [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n              (click)=\"search()\">\n        <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n      </button>\n      <!--CLEAR-->\n      <button type=\"button\"\n              (click)=\"clear()\">\n        <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n      </button>\n    </ng-container>\n  </div>\n  <!--FILTER CHIPS-->\n  <!-- In order for our changes to be reflected everytime searchOptions change -->\n  <!-- We are looping searchOptions in order to display the proper name -->\n  <ng-container *ngFor=\"let searchOption of searchOptions\">\n    <ng-container *ngFor=\"let filter of filters; let j = index\">\n      <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n            class=\"advanced-search-chips\"\n            [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n        {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n        <button (click)=\"removeFilter(j)\"\n                [disabled]=\"searchOption?.readonly ?? false\"\n                type=\"button\"\n                class=\"advanced-search-chips-remove-filter\">\n          <span class=\"sr-only\">Remove large option</span>\n          <svg class=\"h-2 w-2\"\n               stroke=\"currentColor\"\n               fill=\"none\"\n               viewBox=\"0 0 8 8\">\n            <path stroke-linecap=\"round\"\n                  stroke-width=\"1.5\"\n                  d=\"M1 1l6 6m0-6L1 7\" />\n          </svg>\n        </button>\n      </span>\n    </ng-container>\n  </ng-container>\n\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { advancedSearchChanged: [{
                 type: Output
             }], operatorsDisabled: [{
@@ -1444,15 +1464,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 args: ['search-options']
             }], filters: [{
                 type: Input
+            }], searchCriteriaLabel: [{
+                type: Input
             }] } });
 
 class ListViewEmptyStateComponent {
     constructor() {
-        this.title = 'Δεν βρέθηκαν εγγραφές.';
+        this.title = 'No records found.';
         // tslint:disable-next-line:no-input-rename
-        this.subTitle = 'Παρακαλώ αλλάξτε τα κριτήρια αναζήτησης σας ή ξεκινήστε προσθέτοντας μια νέα εγγραφή';
+        this.subTitle = 'Please change your search criteria or start by adding a new record';
         // tslint:disable-next-line:no-input-rename
-        this.newItemLabel = 'Νέα εγγραφή';
+        this.newItemLabel = 'New record';
     }
     ngOnInit() {
     }
@@ -1625,7 +1647,7 @@ class ListViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewComponent, isStandalone: false, 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"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], 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>\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n                       [search-options]=\"searchOptions\"\n                       [filters]=\"filters\"\n                       [operators-disabled]=\"operatorsDisabled\"\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\n  </lib-advanced-search>\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th aria-label=\"details button\" class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            title=\"expand-collapse\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            title=\"toggleDetails\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2 mt-2\"\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\n  <lib-pager [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: ["operators-disabled", "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", "deck-class"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewComponent, isStandalone: false, 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"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], 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>\n  <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n                       [search-options]=\"searchOptions\"\n                       [filters]=\"filters\"\n                       [operators-disabled]=\"operatorsDisabled\"\n                       (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\n  </lib-advanced-search>\n\n  <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n             [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n             <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\n  </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n  <ng-container *ngSwitchCase=\"'tiles'\">\n    <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n\n    </div>\n  </ng-container>\n\n\n  <!-- *ngSwitchCase=\"'gallery'\" -->\n  <ng-container *ngSwitchCase=\"'gallery'\">\n    <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\n\n      <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n      <ng-container *ngIf=\"!busy && items && items.length > 0\">\n        <ng-container *ngFor=\"let item of items\" role=\"listitem\">\n          <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n          <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </ng-container>\n\n  <!-- *ngSwitchCase=\"'table'\" -->\n  <ng-container *ngSwitchDefault>\n\n    <div class=\"list-view-container\">\n      <div class=\"list-view-container-inner\">\n        <table class=\"list-view-table\">\n          <thead class=\"list-view-thead\">\n            <tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <th aria-label=\"details button\" class=\"list-view-th-details\"></th>\n              </ng-container>\n              <ng-container *ngFor=\"let col of columns\">\n                <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n                  {{col.title}}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n            <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button disabled\n                            title=\"expand-collapse\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n          <tbody class=\"list-view-tbody\"\n                 *ngIf=\"!busy\">\n            <ng-container *ngFor=\"let item of items;let i=index\">\n              <tr class=\"list-view-tr\">\n                <ng-container *ngIf=\"detailsSectionSupported\">\n                  <td class=\"list-view-td-details\"\n                      *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n                    <button (click)=\"toggleDetails(item)\"\n                            title=\"toggleDetails\"\n                            type=\"button\"\n                            class=\"expand-collapse-button\">\n                      <!-- Heroicon name: solid/plus -->\n                      <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n                    </button>\n                  </td>\n                  <ng-template #hiddenDetailsButton>\n                    <td class=\"list-view-td-details\"></td>\n                  </ng-template>\n                </ng-container>\n                <td *ngFor=\"let col of columns\"\n                    [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n                  <ng-template [ngTemplateOutlet]=\"col.template\"\n                               [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                </td>\n              </tr>\n              <ng-container *ngIf=\"detailsSectionSupported\">\n                <tr *ngIf=\"item.detailsExpanded\">\n                  <td [colSpan]=\"columns.length + 1\"\n                      class=\"list-view-td bg-gray-100\">\n                    <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n                                 [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!busy && items && items.length === 0\">\n    <div class=\"cards-deck-1\">\n      <lib-list-view-empty-state></lib-list-view-empty-state>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2 mt-2\"\n     *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\n  <lib-pager [page]=\"page\"\n             [page-size]=\"pageSize\"\n             [count]=\"count\"\n             [sort-options]=\"sortOptions\"\n             [sort]=\"sort\"\n             [sort-dir]=\"sortdir\"\n             [busy]=\"busy\"\n             (pageChanged)=\"emitPageChanged($event)\"\n             (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n             (sortChanged)=\"emitSortChanged($event)\"\n             (sortdirChanged)=\"emitSortdirChanged($event)\">\n  </lib-pager>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: ["operators-disabled", "search-options", "filters", "searchCriteriaLabel"], 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", "deck-class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1720,7 +1742,7 @@ class KpiTileComponent {
         this.busy = false;
         this.kpi = undefined;
         this.hideBtn = false;
-        this.actionText = 'Περισσότερα';
+        this.actionText = 'More';
         // tslint:disable-next-line:no-output-rename
         this.tileAction = new EventEmitter();
     }
@@ -1873,6 +1895,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class ToggleComponent {
     constructor() {
+        this.privateLabel = 'Private';
+        this.publicLabel = 'The file should be private';
         this.valueChange = new EventEmitter();
         this.onChange$ = undefined;
         this.onTouched$ = undefined;
@@ -1906,13 +1930,13 @@ class ToggleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleComponent, isStandalone: false, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleComponent, isStandalone: false, selector: "lib-toggle", inputs: { value: "value", disabled: "disabled", privateLabel: "privateLabel", publicLabel: "publicLabel" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<button type=\"button\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+        ], ngImport: i0, template: "<button type=\"button\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\n        [title]=\"disabled ? publicLabel : privateLabel\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -1922,11 +1946,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<button type=\"button\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\n        [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>" }]
+                    ], standalone: false, template: "<button type=\"button\"\n        [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n        class=\"toggle-button\"\n        role=\"switch\"\n        aria-checked=\"false\"\n        aria-labelledby=\"isPrivate\"\n        (click)=\"changeValue()\"\n        (blur)=\"onBlur($event)\"\n        value=\"{{value}}\"\n        [disabled]=\"disabled\"\n        [title]=\"disabled ? publicLabel : privateLabel\">\n    <span aria-hidden=\"true\"\n          [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n          class=\"toggle-span\"></span>\n</button>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], privateLabel: [{
+                type: Input
+            }], publicLabel: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -2748,6 +2776,7 @@ class ToggleButtonsListComponent {
     constructor() {
         this.icon = undefined;
         this.compact = true;
+        this.dropDownMenuPlaceholder = 'Please select...'; // to set it from the outside
         this.valueChange = new EventEmitter(undefined);
     }
     ngOnInit() {
@@ -2757,11 +2786,11 @@ class ToggleButtonsListComponent {
         this.valueChange.emit(optionValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonsListComponent, isStandalone: false, 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    <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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonsListComponent, isStandalone: false, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact", dropDownMenuPlaceholder: "dropDownMenuPlaceholder" }, 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\" [placeholder]=\"dropDownMenuPlaceholder\">\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>\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: "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: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-buttons-list', standalone: false, 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    <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>" }]
+            args: [{ selector: 'lib-toggle-buttons-list', standalone: false, 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\" [placeholder]=\"dropDownMenuPlaceholder\">\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>\n" }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], options: [{
@@ -2770,6 +2799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }], compact: [{
                 type: Input
+            }], dropDownMenuPlaceholder: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -2822,7 +2853,7 @@ class ContentTileComponent {
         this.busy = false;
         this.showAction = true;
         this.showFooter = true;
-        this.actionText = 'Περισσότερα';
+        this.actionText = 'More';
         // tslint:disable-next-line:no-output-rename
         this.tileAction = new EventEmitter();
         this.selectedIndex = 0;
@@ -3314,6 +3345,8 @@ class NotificationsIndicatorComponent {
         this.unreadCount = 0;
         this.items = [];
         this.inboxAction = undefined;
+        this.noNotifications = 'No new notifications';
+        this.showNotificationsText = 'Show all notifications';
         this.newArrival = false;
     }
     ngOnDestroy() {
@@ -3366,18 +3399,22 @@ class NotificationsIndicatorComponent {
         this.menuExpanded = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon hover:text-blue-400\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-lg\">\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\n      </a>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", inputs: { noNotifications: "noNotifications", showNotificationsText: "showNotificationsText" }, ngImport: i0, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon hover:text-blue-400\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n        <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n              <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-lg\">\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{showNotificationsText}}</button>\n      </a>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon hover:text-blue-400\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-lg\">\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n  <!-- Notifications Button -->\n  <button type=\"button\"\n          (click)=\"doInboxAction()\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"true\">\n    <span class=\"sr-only\">View notifications</span>\n    <span class=\"avatar-container\">\n      <span class=\"avatar-text\">\n        <i class=\"ms-Icon hover:text-blue-400\"\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n          [class.text-sky-400]=\"unreadCount > 0\"\n          [class.animate-notification]=\"newArrival\"\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\n        </i>\n      </span>\n      <span\n        *ngIf=\"unreadCount > 0\"\n        [class.animate-pulse]=\"newArrival\"\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n        {{ unreadCount }}\n      </span>\n    </span>\n  </button>\n\n  <!-- Notifications dropdown -->\n  <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n        <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n      </ng-container>\n      <ng-template #messagesDropDown>\n        <ul class=\"pr-1.5\">\n          <ng-container *ngIf=\"items; else loading\">\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n              <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n            </ng-container>\n            <ng-container *ngFor=\"let message of items; let i = index\">\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n                <div class=\"flex justify-between\">\n                  <div class=\"flex-grow\">\n                    <a\n                      [routerLink]=\"message.path\"\n                      (click)=\"removeItem(i)\"\n                      class=\"notifications-nav-link grid\"\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n                    >\n                      <div class=\"flex flex-col\">\n                        <div class=\"font-thin tracking-tighter\">\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n                        </div>\n                        <div class=\"font-bold\">\n                          {{ message.data.text }}\n                        </div>\n                      </div>\n                    </a>\n                  </div>\n                </div>\n              </li>\n            </ng-container>\n          </ng-container>\n\n          <ng-template #loading>\n            <div class=\"h-32 flex items-center justify-center\">\n              <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n            </div>\n          </ng-template>\n        </ul>\n      </ng-template>\n    </div>\n    <div class=\"p-1 rounded-lg\">\n      <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n        <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{showNotificationsText}}</button>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_NOTIFICATIONS]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LINKS]
-                }] }] });
+                }] }], propDecorators: { noNotifications: [{
+                type: Input
+            }], showNotificationsText: [{
+                type: Input
+            }] } });
 
 class UserProfileMenuComponent {
     constructor(authService, router, links) {
@@ -3523,7 +3560,7 @@ class ShellHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellHeaderComponent, isStandalone: false, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, ngImport: i0, template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n      <div class=\"shell-header-menu-container\" [class.busy]=\"busy\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellHeaderComponent, isStandalone: false, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, ngImport: i0, template: "<nav>\n  <div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n      <div class=\"shell-header-menu-container\" [class.busy]=\"busy\">\n        <div class=\"shell-header-logo-container\">\n          <div>\n            <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n          </div>\n        </div>\n\n        <div class=\"shell-header-link-container\">\n          <div class=\"shell-header-link-container-inner\">\n            <lib-nav-links-list\n              [links]=\"sectionLinks\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'nav-link'\"\n              [link-active-class]=\"'nav-link-active'\">\n            </lib-nav-links-list>\n          </div>\n        </div>\n\n        <div class=\"shell-header-md-visible\">\n\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n            <lib-nav-links-list\n              [links]=\"links.profileActions\"\n              [active-fragment]=\"activeFragment\"\n              [link-class]=\"'shell-header-menu-rounded-button'\"\n              [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n            </lib-nav-links-list>\n\n\n            <!-- Profile dropdown -->\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n              <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n            </div>\n\n            <!-- Notifications dropdown -->\n            <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n              <lib-notifications-indicator></lib-notifications-indicator>\n            </div>\n\n            <!-- languages dropdown -->\n            <div *ngIf=\"showLangs\" class=\"ml-4\">\n              <lib-language-selection></lib-language-selection>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mobile-menu-button-container\">\n          <!-- Mobile menu button -->\n          <button type=\"button\"\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n                  class=\"mobile-menu-button\"\n                  aria-controls=\"mobile-menu\"\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\n            <span class=\"sr-only\">Open main menu</span>\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                 fill=\"none\"\n                 viewBox=\"0 0 24 24\"\n                 stroke=\"currentColor\"\n                 aria-hidden=\"true\"\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n              <path stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Mobile menu, show/hide based on menu state. -->\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n    <lib-nav-links-list\n      [links]=\"sectionLinks\"\n      [active-fragment]=\"activeFragment\"\n      [link-class]=\"'nav-link-mobile'\"\n      [link-active-class]=\"'nav-link-mobile-active'\"\n      [container-class]=\"'mobile-menu-link-container'\">\n    </lib-nav-links-list>\n\n    <div *ngIf=\"!user\">\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n      </a>\n    </div>\n\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n      <div class=\"mobile-menu-user-info-container-inner\">\n        <div class=\"flex-shrink-0\">\n          <span class=\"mobile-menu-avatar-container\">\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n          </span>\n        </div>\n        <div class=\"ml-3\">\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n        </div>\n        <!--\n        <button class=\"mobile-menu-rounded-button\">\n          <span class=\"sr-only\">View notifications</span>\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\n               xmlns=\"http://www.w3.org/2000/svg\"\n               fill=\"none\"\n               viewBox=\"0 0 24 24\"\n               stroke=\"currentColor\"\n               aria-hidden=\"true\">\n            <path stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n          </svg>\n        </button>\n        -->\n      </div>\n    </div>\n\n    <lib-nav-links-list\n          [links]=\"links.profile\"\n          [active-fragment]=\"activeFragment\"\n          [link-class]=\"'nav-link-mobile'\"\n          [link-active-class]=\"'nav-link-mobile-active'\"\n          [container-class]=\"'mobile-menu-link-container'\">\n      </lib-nav-links-list>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", inputs: ["noNotifications", "showNotificationsText"] }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, decorators: [{
             type: Component,
@@ -3577,7 +3614,7 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
         this.links = links;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarHeaderComponent, isStandalone: false, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarHeaderComponent, isStandalone: false, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n    <div class=\"shell-header-border\">\n        <div class=\"shell-header-menu-container\">\n            <div class=\"shell-header-md-visible\">\n                <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n                <!-- Profile dropdown -->\n                <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n                    <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n                </div>\n                <!-- Notifications dropdown -->\n                <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n                    <lib-notifications-indicator></lib-notifications-indicator>\n                </div>\n                <!-- languages dropdown -->\n                <div *ngIf=\"showLangs\" class=\"ml-4\">\n                    <lib-language-selection></lib-language-selection>\n                </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", inputs: ["noNotifications", "showNotificationsText"] }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
             type: Component,
@@ -3746,7 +3783,7 @@ class ViewLayoutComponent {
         this.actions = null;
         this.busy = false;
         // tslint:disable-next-line:no-input-rename
-        this.searchPlaceholder = 'αναζήτηση';
+        this.searchPlaceholder = 'search';
         this.view = null;
         // tslint:disable-next-line:no-input-rename
         this.metaItems = [];
@@ -4363,6 +4400,8 @@ class BaseListComponent {
         this.searchOptions = [];
         this.sortOptions = [];
         this.metaItems = [];
+        this.singularResult = 'result';
+        this.pluralResults = 'results';
         this.autoLoad = true;
     }
     ngOnDestroy() {
@@ -4375,11 +4414,11 @@ class BaseListComponent {
     }
     getViewActions() {
         const actions = [
-            new ViewAction('search', null, null, Icons.Search, 'αναζήτηση'),
-            new ViewAction('refresh', null, null, Icons.Refresh, 'ανανέωση στοιχείων')
+            new ViewAction('search', null, null, Icons.Search, 'search'),
+            new ViewAction('refresh', null, null, Icons.Refresh, 'refresh')
         ];
         if (this.newItemLink) {
-            actions.push(new RouterViewAction(Icons.Add, this.newItemLink, 'rightpane', 'προσθήκη νέας εγγραφής;'));
+            actions.push(new RouterViewAction(Icons.Add, this.newItemLink, 'rightpane', 'add a new record'));
         }
         return of(actions);
     }
@@ -4388,7 +4427,7 @@ class BaseListComponent {
             this.actions = actions || [];
         });
         this.metaItems = [
-            { key: 'count', icon: Icons.ItemsCount, text: 'παρακαλώ περιμένετε...' }
+            { key: 'count', icon: Icons.ItemsCount, text: 'please wait...' }
         ];
         // disabled external route changes monitoring due to sync issues - which is bad :) - refresh from url will not work
         // until i come up with a solution...
@@ -4494,7 +4533,7 @@ class BaseListComponent {
     updateHeaderMeta() {
         const count = this.metaItems?.filter(m => m.key === 'count')[0];
         if (count) {
-            this.count === 1 ? count.text = `${this.count} αποτέλεσμα` : count.text = `${this.count} αποτελέσματα`;
+            this.count === 1 ? count.text = `${this.count} ${this.singularResult}` : count.text = `${this.count} ${this.pluralResults}`;
         }
     }
     clear() {
@@ -5285,5 +5324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, 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, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepSelectedEvent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BREADCRUMB_LABEL_RESOLVER, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, 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, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepSelectedEvent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map