@testgorilla/tgo-ui 0.0.33 → 1.0.2

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -1,110 +1,309 @@
+import { trigger, transition, animate, style, state } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, HostBinding, Optional, Inject, Injectable, Pipe, Directive, ViewChild } from '@angular/core';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/common';
+import { Component, ViewEncapsulation, Input, EventEmitter, Output, ChangeDetectionStrategy, NgModule, forwardRef, HostBinding, Injectable, Directive, HostListener, Pipe, ViewChild } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/progress-spinner';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/platform-browser';
+import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1$1 from '@angular/material/card';
+import { HttpClientModule } from '@angular/common/http';
+import * as i1$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i1$3 from '@angular/forms';
-import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$2 from '@angular/material/form-field';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import * as i2$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular-material-extensions/password-strength';
+import * as i5 from '@angular-material-extensions/password-strength';
 import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
-import * as i5$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$4 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i1$5 from '@angular/material/toolbar';
+import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i5$2 from '@angular/material/menu';
+import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRippleModule } from '@angular/material/core';
 import * as i1$6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$7 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3$1 from '@angular/material/sort';
+import * as i2$5 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i2$1 from '@angular/material/table';
+import * as i3$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { Subscription } from 'rxjs';
-import * as i7 from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subscription } from 'rxjs';
 
-class BannerComponent {
-    constructor() {
-        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
-        // https://github.com/storybookjs/storybook/issues/16865
-        // https://github.com/storybookjs/storybook/issues/17004
+const alertBarsUtil = {
+    //Set css class and iconName according type
+    setIcon: (alertType) => {
+        if (alertType === 'success') {
+            return 'Round-check';
+        }
+        if (alertType === 'info') {
+            return 'Info';
+        }
+        if (alertType === 'warning') {
+            return 'Warning';
+        }
+        if (alertType === 'error') {
+            return 'Error';
+        }
+        return '';
+    },
+    //Set cssClass for fixed or static position
+    setPosition: (fixed) => {
+        if (fixed === true) {
+            return 'fixed';
+        }
+        else {
+            return 'static';
+        }
+    },
+    //Set css class for alertbanner
+    setCssClass: (fullWidth, type, position) => {
+        const isFullWidth = !!fullWidth ? 'full-width' : '';
+        return `${type} ${position} ${isFullWidth}`;
+    },
+};
+
+// Data of all tgoIcons
+const tgoIcons = [
+    'Add',
+    'Archive',
+    'Arrow_down',
+    'Arrow_left',
+    'Arrow_right',
+    'Arrow_up',
+    'Assessment',
+    'Attempts',
+    'Book',
+    'Calendar',
+    'Candidates',
+    'Chat-notifications',
+    'Chat',
+    'Check',
+    'Clone',
+    'Close',
+    'Code',
+    'Company',
+    'Copy',
+    'Custom-questions',
+    'Delete',
+    'Devices',
+    'Document',
+    'Download',
+    'Edit',
+    'Email-message',
+    'Empty-placeholder',
+    'Error',
+    'Essay',
+    'Eye-hide',
+    'Eye-view',
+    'Feedback-1',
+    'Feedback-2',
+    'Feedback-3',
+    'Feedback-4',
+    'Feedback-5',
+    'File-attach',
+    'File-upload',
+    'Filter',
+    'Folder',
+    'Format-add-file',
+    'Format-add-table',
+    'Format-align-L',
+    'Format-align-R',
+    'Format-align-center',
+    'Format-align-justify',
+    'Format-bold',
+    'Format-code-active',
+    'Format-code-block',
+    'Format-edit-table',
+    'Format-format',
+    'Format-function',
+    'Format-italics',
+    'Format-list-bulleted',
+    'Format-list-numbered',
+    'Format-picker',
+    'Format-quote',
+    'Format-subscript',
+    'Format-superscript',
+    'Format-text-direction-L',
+    'Format-text-direction-R',
+    'Format-text-size',
+    'Format-underline',
+    'Format-variable',
+    'Full-screen',
+    'Gender-female',
+    'Gender-male',
+    'Help-2',
+    'Help',
+    'Image',
+    'Info',
+    'Integration',
+    'Language',
+    'Layout',
+    'Learn',
+    'Level',
+    'Light-bulb',
+    'Link',
+    'Loading-spinner',
+    'Localisation',
+    'Location',
+    'Lock',
+    'Log-out',
+    'Menu-burger',
+    'Menu-ellipsis',
+    'Microphone',
+    'Minus',
+    'Mouse-cursor',
+    'Mouse-grab-cursor',
+    'Mouse',
+    'Multi-choice',
+    'Notifications',
+    'Password',
+    'Path',
+    'Plan-billing',
+    'Plus',
+    'Premium',
+    'Promotion',
+    'Question-count',
+    'Refer',
+    'Reset',
+    'Review',
+    'Round-check-filled',
+    'Round-check',
+    'Search',
+    'Secure-checkout',
+    'Send',
+    'Settings',
+    'Social-facebook',
+    'Social-instagram',
+    'Social-linkedin',
+    'Sorting-down-1',
+    'Sorting-down',
+    'Speedometer',
+    'Star-filled',
+    'Star-half',
+    'Star-outline',
+    'Support',
+    'Sync',
+    'Team',
+    'Test',
+    'Thunder',
+    'Timer',
+    'Type',
+    'Unarchive',
+    'Unlock',
+    'Upgrade',
+    'Upload',
+    'User-access',
+    'User-add',
+    'User-invite',
+    'User-profile',
+    'User-reject',
+    'User-switch',
+    'Video-pause',
+    'Video-play',
+    'Video-record',
+    'Video',
+    'Volume',
+    'Warning',
+    'Zoom-in',
+    'Zoom-out',
+];
+
+class IconComponent {
+    constructor(matIconRegistry, domSanitzer) {
+        this.matIconRegistry = matIconRegistry;
+        this.domSanitzer = domSanitzer;
         /**
-         * Banner background color
+         * Icon size
          *
-         * @type {TemplateStringsArray}
-         * @memberof BannerComponent
+         * @type {IconSize}
+         * @memberof IconComponent
          */
-        this.backgroundColor = '';
+        this.size = '16';
         /**
-         * Banner text
+         * Icon css class
          *
-         * @type {string}
-         * @memberof BannerComponent
+         * @memberof IconComponent
          */
-        this.text = '';
+        this.cssClass = '';
         /**
-         * Banner icon
+         * Icon color
          *
-         * @type {string}
-         * @memberof BannerComponent
+         * @type {IconColor}
+         * @memberof IconComponent
          */
-        this.icon = 'error_outline';
+        this.color = 'black';
+    }
+    ngOnInit() {
+        this.customCssClass = this.setCssClass();
+        this.addIcon();
+    }
+    ngOnChanges(changes) {
+        if (changes['size'] || changes['cssClass'] || changes['color']) {
+            this.customCssClass = this.setCssClass();
+        }
+        if (changes['name']) {
+            this.addIcon();
+        }
+    }
+    //set css class for size
+    setCssClass() {
+        return `${this.cssClass} size-${this.size} ${this.color}`;
+    }
+    //Add icon to matIcon registry
+    addIcon() {
+        const filename = tgoIcons.find(icon => icon === this.name);
+        if (filename) {
+            this.matIconRegistry.addSvgIcon(filename, this.domSanitzer.bypassSecurityTrustResourceUrl(`/icons/${filename}.svg`));
+        }
     }
 }
-BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponent, decorators: [{
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n    <mat-icon>{{ icon }}</mat-icon>\n    <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
+            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { size: [{
                 type: Input
-            }], text: [{
+            }], cssClass: [{
                 type: Input
-            }], icon: [{
+            }], name: [{
+                type: Input
+            }], color: [{
                 type: Input
             }] } });
 
-class BannerComponentModule {
-}
-BannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, declarations: [BannerComponent], imports: [CommonModule, MatIconModule], exports: [BannerComponent] });
-BannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, providers: [], imports: [[CommonModule, MatIconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [BannerComponent],
-                    imports: [CommonModule, MatIconModule],
-                    exports: [BannerComponent],
-                    providers: [],
-                }]
-        }] });
-
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
 class ButtonComponent {
     constructor() {
+        /**
+         * Define button height
+         *
+         * @type {ButtonSize}
+         * @memberof ButtonComponent
+         */
+        this.size = 'big';
         /**
          * Background color of the button while in active state
          *
          * @type {ButtonColor}
          * @memberof ButtonComponent
          */
-        this.color = 'primary';
+        this.type = 'primary';
         /**
          * Text content to appear on the button
          *
@@ -112,8 +311,22 @@ class ButtonComponent {
          */
         this.label = '';
         /**
-         * Name of the material icon
+         * Positioning of the icon (when existant)
          *
+         * @type {ButtonIconPosition}
+         * @memberof ButtonComponent
+         */
+        this.iconPosition = 'right';
+        /**
+         * Define if button has only icon without text
+         *
+         * @memberof ButtonComponent
+         */
+        this.justIcon = false;
+        /**
+         * Name of ui-icon
+         *
+         * @type {IconName}
          * @memberof ButtonComponent
          */
         this.iconName = '';
@@ -135,23 +348,74 @@ class ButtonComponent {
          * @memberof ButtonComponent
          */
         this.fullWidth = false;
-        this.onClickEvent = new EventEmitter();
+        this.buttonClickEvent = new EventEmitter();
+        this.buttonHoverEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        this.classCss = this.setCssClass();
+        this.isButtonLink = this.showButtonLink();
+        this.isLabel = this.showLabel();
+    }
+    ngOnChanges(changes) {
+        if (changes['type']) {
+            this.isButtonLink = this.showButtonLink();
+        }
+        if (changes['loading']) {
+            this.isLabel = this.showLabel();
+        }
+        if (changes['type'] ||
+            changes['fullWidth'] ||
+            changes['iconName'] ||
+            changes['justIcon'] ||
+            changes['iconPosition']) {
+            this.classCss = this.setCssClass();
+        }
+    }
+    buttonClick(event) {
+        this.buttonClickEvent.emit(event);
+    }
+    buttonHover(event) {
+        this.buttonHoverEvent.emit(event);
     }
-    onClick() {
-        this.onClickEvent.emit();
+    //Show or hide label
+    showLabel() {
+        return !this.loading;
+    }
+    //Set css class according inputs
+    setCssClass() {
+        const width = this.fullWidth ? 'full-width' : '';
+        const hasIcon = this.iconName === null ? '' : 'icon';
+        const justIcon = this.justIcon ? 'only-icon' : '';
+        const iconPosition = this.iconPosition === undefined ? '' : this.iconPosition;
+        return `${this.size} ${iconPosition} ${this.type} ${width} ${hasIcon} ${justIcon}`;
+    }
+    //Show or hide spinner
+    showSpinner() {
+        const isNotTab = this.type !== 'tab';
+        const isNotLink = this.type !== 'link';
+        const isLoading = this.loading === true;
+        return isLoading && isNotTab && isNotLink;
+    }
+    //Show button with <button> or <a> tag
+    showButtonLink() {
+        return this.type !== 'link';
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", type: "type", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, usesOnChanges: true, ngImport: i0, template: "<button\n  [ngClass]=\"classCss\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick($event)\"\n  (mouseenter)=\"buttonHover($event)\"\n  [disableRipple]=\"true\"\n  *ngIf=\"isButtonLink\"\n  mat-flat-button>\n    <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n      <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n    </span>\n    <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n      <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n      <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n      <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n      <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n        <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n      </span>\n    </span>\n</button>\n<a\n  [ngClass]=\"classCss\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick($event)\"\n  (mouseenter)=\"buttonHover($event)\"\n  [disableRipple]=\"true\"\n  *ngIf=\"!isButtonLink\"  \n  [href]=\"url\" \n  [target]=\"urlTarget\"\n  mat-flat-button>\n    <span class=\"icon-label-wrapper\">\n      {{ label }}\n    </span>\n</a>\n", styles: [":host{display:flex}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:#46a997}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#31766a}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-button', template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n  <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n    <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n    <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n    <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n      ><mat-icon>{{ iconName }}</mat-icon></span\n    >\n  </div>\n  <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
-        }], propDecorators: { color: [{
+            args: [{ selector: 'ui-button', template: "<button\n  [ngClass]=\"classCss\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick($event)\"\n  (mouseenter)=\"buttonHover($event)\"\n  [disableRipple]=\"true\"\n  *ngIf=\"isButtonLink\"\n  mat-flat-button>\n    <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n      <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n    </span>\n    <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n      <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n      <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n      <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n      <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n        <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n      </span>\n    </span>\n</button>\n<a\n  [ngClass]=\"classCss\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick($event)\"\n  (mouseenter)=\"buttonHover($event)\"\n  [disableRipple]=\"true\"\n  *ngIf=\"!isButtonLink\"  \n  [href]=\"url\" \n  [target]=\"urlTarget\"\n  mat-flat-button>\n    <span class=\"icon-label-wrapper\">\n      {{ label }}\n    </span>\n</a>\n", styles: [":host{display:flex}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:#46a997}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#31766a}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [{
+                type: Input
+            }], type: [{
                 type: Input
             }], label: [{
                 type: Input
             }], iconPosition: [{
                 type: Input
+            }], justIcon: [{
+                type: Input
             }], iconName: [{
                 type: Input
             }], disabled: [{
@@ -160,87 +424,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fullWidth: [{
                 type: Input
-            }], onClickEvent: [{
+            }], url: [{
+                type: Input
+            }], urlTarget: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], buttonClickEvent: [{
+                type: Output
+            }], buttonHoverEvent: [{
                 type: Output
             }] } });
 
-class BannerActionComponent {
+class AlertBannerComponent {
     constructor() {
-        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
-        // https://github.com/storybookjs/storybook/issues/16865
-        // https://github.com/storybookjs/storybook/issues/17004
         /**
-         * BannerAction text
+         * Alert Banner type
          *
-         * @type {string}
-         * @memberof BannerActionComponent
+         * @type {AlertBarType}
+         * @memberof AlertBannerComponent
          */
-        this.text = '';
+        this.alertType = 'success';
         /**
-         * @ignore
+         * Alert banner message
+         *
+         * @memberof AlertBannerComponent
          */
-        this.buttonClickedEvent = new EventEmitter();
+        this.message = '';
+        /**
+         * Include dismmiss button
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.includeDismissButton = true;
+        /**
+         * Static or fixed position
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.fixed = false;
+        /**
+         * Full width for alert banner
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.fullWidth = true;
+        /**
+         * Link text that will appended at the end of message
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.linkText = '';
+        /**
+         * Link target
+         *
+         * @type {@type {LinkTargetType}}
+         * @memberof AlertBannerComponent
+         */
+        this.linkTarget = '_blank';
+        this.visible = true;
+    }
+    ngOnInit() {
+        this.iconName = alertBarsUtil.setIcon(this.alertType);
+        this.position = alertBarsUtil.setPosition(this.fixed);
+        this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.alertType, this.position);
     }
-    buttonClicked() {
-        this.buttonClickedEvent.emit();
+    //Hide snackbar when dismiss button is clicked
+    dismissClick() {
+        this.visible = false;
     }
 }
-BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponent, decorators: [{
+AlertBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", message: "message", includeDismissButton: "includeDismissButton", fixed: "fixed", fullWidth: "fullWidth", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n  <div class=\"alert-text\">\n    <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n    {{ message }}\n    <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n  </div>\n  <ui-button *ngIf=\"includeDismissButton\" type=\"text\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Close alert banner\" (buttonClickEvent)=\"dismissClick()\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], animations: [
+        trigger('openClose', [
+            transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
+            transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n    <div class=\"text\">\n        <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n        <span>{{ text }}</span>\n    </div>\n    <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" [fullWidth]=\"false\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'ui-alert-banner', animations: [
+                        trigger('openClose', [
+                            transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
+                            transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n  <div class=\"alert-text\">\n    <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n    {{ message }}\n    <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n  </div>\n  <ui-button *ngIf=\"includeDismissButton\" type=\"text\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Close alert banner\" (buttonClickEvent)=\"dismissClick()\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { alertType: [{
                 type: Input
-            }], backgroundColor: [{
+            }], message: [{
                 type: Input
-            }], buttonLabel: [{
+            }], includeDismissButton: [{
                 type: Input
-            }], emoji: [{
+            }], fixed: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], linkUrl: [{
+                type: Input
+            }], linkTarget: [{
                 type: Input
-            }], buttonClickedEvent: [{
-                type: Output
             }] } });
 
+class IconComponentModule {
+}
+IconComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IconComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: IconComponentModule, declarations: [IconComponent], imports: [CommonModule, MatIconModule, HttpClientModule], exports: [IconComponent] });
+IconComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponentModule, providers: [HttpClientModule], imports: [CommonModule, MatIconModule, HttpClientModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IconComponent],
+                    imports: [CommonModule, MatIconModule, HttpClientModule],
+                    exports: [IconComponent],
+                    providers: [HttpClientModule],
+                }]
+        }] });
+
 class ButtonComponentModule {
 }
-ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
-ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, providers: [], imports: [[CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, decorators: [{
+ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
+ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponentModule, imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonComponent],
-                    imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
+                    imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule],
                     exports: [ButtonComponent],
                     providers: [],
                 }]
         }] });
 
+class AlertBannerComponentModule {
+}
+AlertBannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AlertBannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponentModule, declarations: [AlertBannerComponent], imports: [CommonModule, ButtonComponentModule, IconComponentModule], exports: [AlertBannerComponent] });
+AlertBannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponentModule, imports: [CommonModule, ButtonComponentModule, IconComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertBannerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AlertBannerComponent],
+                    imports: [CommonModule, ButtonComponentModule, IconComponentModule],
+                    exports: [AlertBannerComponent],
+                    providers: [],
+                }]
+        }] });
+
+class BannerActionComponent {
+    constructor() {
+        /**
+         * BannerAction text
+         *
+         * @memberof BannerActionComponent
+         */
+        this.message = '';
+        /**
+         * BannerAction type
+         *
+         * @type {AlertBarType}
+         * @memberof BannerActionComponent
+         */
+        this.bannerActionType = 'success';
+        /**
+         * Static or fixed position
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.fixed = false;
+        /**
+         * Full width for alert banner
+         *
+         * @memberof AlertBannerComponent
+         */
+        this.fullWidth = true;
+        this.buttonClickEvent = new EventEmitter();
+    }
+    buttonClick(event) {
+        this.buttonClickEvent.emit(event);
+    }
+    ngOnInit() {
+        this.iconName = alertBarsUtil.setIcon(this.bannerActionType);
+        this.position = alertBarsUtil.setPosition(this.fixed);
+        this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.bannerActionType, this.position);
+    }
+}
+BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: BannerActionComponent, selector: "ui-banner-action", inputs: { message: "message", bannerActionType: "bannerActionType", buttonText: "buttonText", fixed: "fixed", fullWidth: "fullWidth" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n    <div class=\"banner-action-text\">\n        <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        {{ message }}\n    </div>\n    <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .banner-action-container{height:72px;padding:0 16px;color:#000;font-size:16px;display:flex;align-items:center;background:#ffffff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-text{display:flex;align-items:center}:host .banner-action-container ui-icon{margin-right:14px}:host .banner-action-container ui-button{margin-left:14px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column}:host .banner-action-container .banner-action-text{margin-bottom:10px}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n    <div class=\"banner-action-text\">\n        <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        {{ message }}\n    </div>\n    <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .banner-action-container{height:72px;padding:0 16px;color:#000;font-size:16px;display:flex;align-items:center;background:#ffffff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-text{display:flex;align-items:center}:host .banner-action-container ui-icon{margin-right:14px}:host .banner-action-container ui-button{margin-left:14px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column}:host .banner-action-container .banner-action-text{margin-bottom:10px}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
+                type: Input
+            }], bannerActionType: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], fixed: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], buttonClickEvent: [{
+                type: Output
+            }] } });
+
 class BannerActionComponentModule {
 }
-BannerActionComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BannerActionComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, declarations: [BannerActionComponent], imports: [CommonModule, MatIconModule, ButtonComponentModule], exports: [BannerActionComponent] });
-BannerActionComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, providers: [], imports: [[CommonModule, MatIconModule, ButtonComponentModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, decorators: [{
+BannerActionComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BannerActionComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponentModule, declarations: [BannerActionComponent], imports: [CommonModule, ButtonComponentModule, IconComponentModule], exports: [BannerActionComponent] });
+BannerActionComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponentModule, imports: [CommonModule, ButtonComponentModule, IconComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerActionComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [BannerActionComponent],
-                    imports: [CommonModule, MatIconModule, ButtonComponentModule],
+                    imports: [CommonModule, ButtonComponentModule, IconComponentModule],
                     exports: [BannerActionComponent],
                     providers: [],
                 }]
         }] });
 
+var LogoTypeEnum;
+(function (LogoTypeEnum) {
+    LogoTypeEnum["DEFAULT"] = "default";
+    LogoTypeEnum["POWEREDBY"] = "poweredby";
+    LogoTypeEnum["REVERSE"] = "reverse";
+})(LogoTypeEnum || (LogoTypeEnum = {}));
+;
+var LogoPathEnum;
+(function (LogoPathEnum) {
+    LogoPathEnum["DEFAULT"] = "/images/testgorilla.svg";
+    LogoPathEnum["POWEREDBY"] = "/images/poweredbyTG.svg";
+    LogoPathEnum["REVERSE"] = "/images/reverseTG.svg";
+})(LogoPathEnum || (LogoPathEnum = {}));
+
 class LogoComponent {
-    constructor() { }
+    constructor() {
+        /**
+         * Logo type
+         *
+         * @type {LogoTypeEnum}
+         * @memberof LogoComponent
+         */
+        this.type = LogoTypeEnum.DEFAULT;
+        /**
+         * @ignore
+         */
+        this.setURL = () => {
+            switch (this.type) {
+                case LogoTypeEnum.POWEREDBY: {
+                    this.logoURL = LogoPathEnum.POWEREDBY;
+                    break;
+                }
+                case LogoTypeEnum.REVERSE: {
+                    this.logoURL = LogoPathEnum.REVERSE;
+                    break;
+                }
+                default: {
+                    this.logoURL = LogoPathEnum.DEFAULT;
+                    break;
+                }
+            }
+        };
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() {
+        this.setURL();
+    }
+    ;
+    /**
+     * @ignore
+     */
+    ngOnChanges() {
+        this.setURL();
+    }
 }
-LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponent, decorators: [{
+LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LogoComponent, selector: "ui-logo", inputs: { type: "type" }, usesOnChanges: true, ngImport: i0, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img [src]=\"logoURL\" [alt]=\"type\">\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
 
 class CardComponent {
     constructor() {
@@ -248,11 +716,11 @@ class CardComponent {
         this.subTitle = '';
     }
 }
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: LogoComponent, selector: "ui-logo" }], directives: [{ type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, decorators: [{
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .mat-mdc-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-mdc-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], dependencies: [{ kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
+            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card appearance=\"outlined\" class=\"container\">\n  <ui-logo class=\"logo\"></ui-logo>\n  <mat-card-title>{{title}}</mat-card-title>\n  <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .mat-mdc-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%;width:100%;word-wrap:break-word}.container .mat-mdc-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subTitle: [{
@@ -261,10 +729,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class LogoComponentModule {
 }
-LogoComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LogoComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] });
-LogoComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, decorators: [{
+LogoComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LogoComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] });
+LogoComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LogoComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LogoComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LogoComponent],
@@ -275,10 +743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class CardComponentModule {
 }
-CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, LogoComponentModule], exports: [CardComponent] });
-CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, imports: [[CommonModule, MatCardModule, LogoComponentModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, decorators: [{
+CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, LogoComponentModule], exports: [CardComponent] });
+CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponentModule, imports: [CommonModule, MatCardModule, LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CardComponent],
@@ -287,6 +755,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+class CheckboxComponent {
+    constructor() {
+        /**
+         * Determines whether the checkbox is disabled.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof CheckboxComponent
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the checkbox is checked.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof CheckboxComponent
+         */
+        this.checked = false;
+        /**
+         * Determines whether the checkbox is indeterminate.
+         * It can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof CheckboxComponent
+         */
+        this.indeterminate = false;
+        /**
+         * Determines whether the checkbox color.
+         * Default: Test Gorilla primary color.
+         *
+         * @type {string}
+         * @memberof CheckboxComponent
+         */
+        this.color = '#46A997';
+        /**
+         * Name value will be applied to the input element if present.
+         *
+         * @type {string}
+         * @memberof CheckboxComponent
+         */
+        this.name = '';
+        /**
+         * Text content will be applied to the input element if present.
+         *
+         * @type {string}
+         * @memberof CheckboxComponent
+         */
+        this.label = '';
+        /**
+         * Determines whether the checkbox is a multiple choice cell.
+         * Default: false
+         *
+         * @type {boolean}
+         * @memberof CheckboxComponent
+         */
+        this.multiple = false;
+        /**
+         * Event emitted when the checkbox's checked value changes.
+         *
+         * @type {boolean}
+         * @memberof CheckboxComponent
+         */
+        this.changed = new EventEmitter();
+        /**
+         * @ignore
+         */
+        this.onChange = (_) => { };
+        /**
+         * @ignore
+         */
+        this.onTouch = () => { };
+    }
+    emitChange(event) {
+        this.changed.emit(event.checked);
+    }
+    ngOnInit() {
+        this.classMultiple = this.setClass();
+    }
+    toggleChecked(event) {
+        this.changed.emit(event.checked);
+        this.checked = event.checked;
+        this.onTouch();
+        this.onChange(this.checked);
+        if (!this.disabled) {
+            this.indeterminate = false;
+            this.classMultiple = this.setClass();
+        }
+    }
+    setClass() {
+        if (this.multiple) {
+            return this.checked || this.indeterminate ? 'multiple-checked' : 'multiple-unchecked';
+        }
+        return '';
+    }
+    writeValue(value) {
+        this.checked = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", color: "color", name: "name", label: "label", multiple: "multiple" }, outputs: { changed: "changed" }, host: { properties: { "style.--color": "this.color" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => CheckboxComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: "<div [ngClass]=\"classMultiple\">\n  <mat-checkbox\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    (change)=\"toggleChecked($event)\"\n    [aria-label]=\"label\"\n    class=\"checkbox\"\n  >\n    {{ label }}\n  </mat-checkbox>\n</div>", styles: [".mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}.multiple-checked{border:1px solid #46A997;display:flex;flex-direction:row;align-items:center;gap:16px;background:#46A997;border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#ffffff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#F6F6F6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"classMultiple\">\n  <mat-checkbox\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    (change)=\"toggleChecked($event)\"\n    [aria-label]=\"label\"\n    class=\"checkbox\"\n  >\n    {{ label }}\n  </mat-checkbox>\n</div>", styles: [".mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}.multiple-checked{border:1px solid #46A997;display:flex;flex-direction:row;align-items:center;gap:16px;background:#46A997;border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#ffffff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#F6F6F6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], color: [{
+                type: HostBinding,
+                args: ['style.--color']
+            }, {
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class CheckboxComponentModule {
+}
+CheckboxComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CheckboxComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponentModule, declarations: [CheckboxComponent], imports: [CommonModule, MatCheckboxModule, FormsModule, ReactiveFormsModule], exports: [CheckboxComponent] });
+CheckboxComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponentModule, imports: [CommonModule, MatCheckboxModule, FormsModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CheckboxComponent],
+                    imports: [CommonModule, MatCheckboxModule, FormsModule, ReactiveFormsModule],
+                    exports: [CheckboxComponent],
+                }]
+        }] });
+
 const PASSWORD_REGEX = /^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,\-./:;<=>?@!^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/;
 class ValidatorsUtil {
     static validatePassword() {
@@ -299,13 +927,25 @@ const CREATE_ACCOUNT_i18n = {
     subtitle: 'Enter the email address to which you received an assessment invite.',
     email_label: 'Email',
     password_label: 'Password',
-    terms_conditions: 'Agree to Terms & Conditions',
+    terms_conditions: 'I have read and I accept the ',
+    terms_conditions_link_label: 'terms of use',
     button_label: 'Next',
     have_career_passport: 'Already have a Career Passport?',
     login: 'Log in here',
 };
 
+/* eslint-disable no-underscore-dangle */
 class FieldComponent {
+    /**
+     * Input field errors
+     *
+     * @type {string}
+     * @memberof FieldComponent
+     */
+    set errors(errors) {
+        this._errors = errors;
+        this.errorsLength = this.setErrorsLength();
+    }
     constructor() {
         this.class = 'ui-field';
         /**
@@ -323,12 +963,12 @@ class FieldComponent {
          */
         this.placeholder = '';
         /**
-         * Input type
+         * Input id
          *
          * @type {string}
          * @memberof FieldComponent
          */
-        this.type = 'text';
+        this.id = '';
         /**
          * Input value
          *
@@ -337,12 +977,19 @@ class FieldComponent {
          */
         this.value = '';
         /**
-         * Determines if field will be a password input. Will work if input type is set to 'password'
+         * Hint text
          *
-         * @type {boolean}
+         * @type {string}
          * @memberof FieldComponent
          */
-        this.passwordField = false;
+        this.hintMessage = '';
+        /**
+         * Input type
+         *
+         * @type {FieldType}
+         * @memberof FieldComponent
+         */
+        this.type = 'text';
         /**
          * @ignore
          */
@@ -353,16 +1000,61 @@ class FieldComponent {
         this.onTouch = () => { };
     }
     ngOnInit() {
-        if (this.type === 'password') {
-            this.passwordField = true;
-            this.suffixIcon = 'visibility';
+        this.setSearchInput();
+        this.currentType = this.getType();
+    }
+    //set search input initial value
+    setSearchInput() {
+        if (this.type === 'search') {
+            this.showSearch = true;
+        }
+        else {
+            this.showClose = false;
+            this.showSearch = false;
         }
     }
-    /**
-     * @ignore
-     */
+    //change type for reveal password
+    getType() {
+        if (this.type === 'password' && this.showPassword) {
+            return 'text';
+        }
+        return this.type;
+    }
+    //Clear input value
+    clearValue() {
+        this.value = '';
+        this.onChangeInputSearch();
+    }
+    //toggle for password
+    showPasswordClick() {
+        this.showPassword = !this.showPassword;
+        this.currentType = this.getType();
+    }
+    //Set options for search input
+    onChangeInputSearch() {
+        if (this.type === 'search') {
+            if (!this.value) {
+                this.showClose = false;
+                this.showSearch = true;
+            }
+            if (this.value) {
+                this.showClose = true;
+                this.showSearch = false;
+            }
+        }
+    }
+    // Set errors length for validation
+    // Consider only those errors which which are not empty
+    setErrorsLength() {
+        if (!!this._errors) {
+            return this._errors.filter(err => !!err).length > 0 ? true : false;
+        }
+        return false;
+    }
+    //Save input value
     onInput(event) {
         this.value = event.target.value;
+        this.errorsLength = this.setErrorsLength();
         this.onTouch();
         this.onChange(this.value);
     }
@@ -381,24 +1073,18 @@ class FieldComponent {
         this.onTouch = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-    }
-    suffixIconClicked() {
-        if (this.passwordField) {
-            this.type = this.type === 'password' ? 'text' : 'password';
-            this.suffixIcon = this.type === 'password' ? 'visibility' : 'visibility_off';
-        }
+        this.disabled = isDisabled;
     }
 }
-FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponent, selector: "ui-field", inputs: { label: "label", preffixIcon: "preffixIcon", suffixIcon: "suffixIcon", required: "required", hint: "hint", error: "error", placeholder: "placeholder", type: "type" }, host: { properties: { "class": "this.class" } }, providers: [
+FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FieldComponent, selector: "ui-field", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type" }, host: { properties: { "class": "this.class" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FieldComponent),
             multi: true,
         },
-    ], ngImport: i0, template: "<mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n  <input matInput [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\" />\n  <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n  <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n</mat-form-field>\n", styles: [".ui-field .mat-form-field{margin-top:0;width:100%}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{height:48px;align-items:center}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline{height:48px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{border-top:.54375em solid transparent}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-input-element{height:23px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label{margin-top:-.1em}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label mat-label{font-size:14px;line-height:20px}.ui-field .mat-form-field.mat-form-field-should-float .mat-form-field-label{margin-top:2px}.ui-field .mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.ui-field .mat-form-field .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.39375em) scale(.75)}.ui-field .mat-form-field .error{color:#cb7b7a}.ui-field .mat-form-field .error a{color:#46a997;text-decoration:none}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, decorators: [{
+    ], ngImport: i0, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <input matInput (input)=\"onInput($event)\" [id]=\"id!\" (keyup)=\"onChangeInputSearch()\" [placeholder]=\"placeholder!\" [value]=\"value\" [disabled]=\"disabled\" [type]=\"currentType\" [name]=\"fieldName!\">\n  <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n    <div class=\"options-container\">\n      <ui-button *ngIf=\"showClose\" type=\"secondary\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Clear\" (buttonClickEvent)=\"clearValue()\"></ui-button>\n      <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n      <ui-button *ngIf=\"type === 'password'\" type=\"secondary\" [justIcon]=\"true\" class=\"password\" [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\" label=\"View password\" (buttonClickEvent)=\"showPasswordClick()\"></ui-button>\n    </div>\n  </div>\n  <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon name=\"Error\"></ui-icon>{{ error }}\n    </div>\n  </mat-hint>\n</mat-form-field>\n\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -406,33 +1092,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useExisting: forwardRef(() => FieldComponent),
                             multi: true,
                         },
-                    ], template: "<mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n  <input matInput [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\" />\n  <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n  <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n</mat-form-field>\n", styles: [".ui-field .mat-form-field{margin-top:0;width:100%}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{height:48px;align-items:center}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline{height:48px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{border-top:.54375em solid transparent}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-input-element{height:23px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label{margin-top:-.1em}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label mat-label{font-size:14px;line-height:20px}.ui-field .mat-form-field.mat-form-field-should-float .mat-form-field-label{margin-top:2px}.ui-field .mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.ui-field .mat-form-field .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.39375em) scale(.75)}.ui-field .mat-form-field .error{color:#cb7b7a}.ui-field .mat-form-field .error a{color:#46a997;text-decoration:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n  <input matInput (input)=\"onInput($event)\" [id]=\"id!\" (keyup)=\"onChangeInputSearch()\" [placeholder]=\"placeholder!\" [value]=\"value\" [disabled]=\"disabled\" [type]=\"currentType\" [name]=\"fieldName!\">\n  <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n    <div class=\"options-container\">\n      <ui-button *ngIf=\"showClose\" type=\"secondary\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Clear\" (buttonClickEvent)=\"clearValue()\"></ui-button>\n      <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n      <ui-button *ngIf=\"type === 'password'\" type=\"secondary\" [justIcon]=\"true\" class=\"password\" [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\" label=\"View password\" (buttonClickEvent)=\"showPasswordClick()\"></ui-button>\n    </div>\n  </div>\n  <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n  <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon name=\"Error\"></ui-icon>{{ error }}\n    </div>\n  </mat-hint>\n</mat-form-field>\n\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { class: [{
                 type: HostBinding
             }], label: [{
                 type: Input
-            }], preffixIcon: [{
+            }], fieldName: [{
                 type: Input
-            }], suffixIcon: [{
+            }], placeholder: [{
                 type: Input
-            }], required: [{
+            }], id: [{
                 type: Input
-            }], hint: [{
+            }], value: [{
                 type: Input
-            }], error: [{
+            }], errors: [{
                 type: Input
-            }], placeholder: [{
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hintMessage: [{
                 type: Input
             }], type: [{
                 type: Input
             }] } });
 
 class CreateAccountComponent {
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
     constructor(fb) {
         this.fb = fb;
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
         // https://github.com/storybookjs/storybook/issues/16865
         // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * @ignore
+         */
+        this.termsOfusePath = 'https://www.testgorilla.com/terms/';
         /**
          * @ignore
          */
@@ -469,11 +1167,20 @@ class CreateAccountComponent {
          * @ignore
          */
         this.loginEvent = new EventEmitter();
+        /**
+         * @ignore
+         */
+        this.errorMessages = {
+            email: 'Enter a valid email',
+            required: 'This field is required',
+        };
+        /**
+         * @ignore
+         */
+        this.passwordErrorMessages = {
+            pattern: 'Password is invalid',
+        };
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
     submit() {
         this.submitEvent.emit({
             username: this.registerForm.get('username')?.value,
@@ -484,29 +1191,31 @@ class CreateAccountComponent {
         this.loginEvent.emit();
     }
     checkErrors(field) {
-        if (this.registerForm.controls[field].touched) {
-            if (this.registerForm.controls[field].hasError('required')) {
-                this.formErrors[field][0] = 'This field is required';
-                return;
-            }
-            if (this.registerForm.controls[field].hasError('email')) {
-                this.formErrors[field][0] = 'Enter a valid email';
-                return;
+        const errorsMap = this.registerForm.controls[field].errors || {};
+        const errors = [];
+        for (const key in errorsMap) {
+            if (errorsMap[key] && this.errorMessages[key]) {
+                errors.push(this.errorMessages[key]);
             }
-            if (field === 'password' && this.registerForm.controls[field].hasError('pattern')) {
-                this.formErrors.password[0] = 'Password is invalid';
-                return;
+        }
+        if (field === 'password') {
+            for (const key in errorsMap) {
+                if (errorsMap[key] && this.passwordErrorMessages[key]) {
+                    errors.push(this.passwordErrorMessages[key]);
+                }
             }
         }
-        this.formErrors[field][0] = '';
+        this.formErrors[field] = errors;
     }
 }
-CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n          aria-hidden=\"true\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponent, decorators: [{
+CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreateAccountComponent, selector: "ui-create-account", inputs: { termsOfusePath: "termsOfusePath", formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors['username']\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"formErrors['password']\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n          aria-hidden=\"true\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n      <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.username[0]\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n          aria-hidden=\"true\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
+            args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n  <form [formGroup]=\"registerForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"username\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors['username']\"\n        (ngModelChange)=\"checkErrors('username')\"\n      ></ui-field>\n    </div>\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"formErrors['password']\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <div class=\"password-strength-container\">\n        <mat-password-strength\n          [min]=\"12\"\n          #passwordComponentWithValidation\n          [password]=\"registerForm.controls['password'].value\"\n          aria-hidden=\"true\"\n        >\n        </mat-password-strength>\n      </div>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div class=\"terms-conditions-container\">\n      <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n      <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"registerForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div>\n      {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { termsOfusePath: [{
+                type: Input
+            }], formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -520,14 +1229,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class FieldComponentModule {
 }
-FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, declarations: [FieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule], exports: [FieldComponent] });
-FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, providers: [], imports: [[CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, decorators: [{
+FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FieldComponentModule, declarations: [FieldComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        IconComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonComponentModule], exports: [FieldComponent] });
+FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponentModule, imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        IconComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FieldComponent],
-                    imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule],
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        IconComponentModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonComponentModule,
+                    ],
                     exports: [FieldComponent],
                     providers: [],
                 }]
@@ -535,26 +1264,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class CreateAccountComponentModule {
 }
-CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, declarations: [CreateAccountComponent], imports: [CommonModule,
+CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponentModule, declarations: [CreateAccountComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         FieldComponentModule,
         ButtonComponentModule,
-        MatCheckboxModule,
+        CheckboxComponentModule,
         MatPasswordStrengthModule,
         LogoComponentModule], exports: [CreateAccountComponent] });
-CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            FieldComponentModule,
-            ButtonComponentModule,
-            MatCheckboxModule,
-            MatPasswordStrengthModule,
-            LogoComponentModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
+CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponentModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        CheckboxComponentModule,
+        MatPasswordStrengthModule,
+        LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CreateAccountComponent],
@@ -564,7 +1291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         ReactiveFormsModule,
                         FieldComponentModule,
                         ButtonComponentModule,
-                        MatCheckboxModule,
+                        CheckboxComponentModule,
                         MatPasswordStrengthModule,
                         LogoComponentModule,
                     ],
@@ -580,6 +1307,10 @@ const CREATE_PASSWORD_i18n = {
 };
 
 class CreatePasswordComponent {
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
     constructor(fb) {
         this.fb = fb;
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -615,10 +1346,6 @@ class CreatePasswordComponent {
          */
         this.submitEvent = new EventEmitter();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
     submit() {
         this.submitEvent.emit({
             password: this.createPasswordForm.get('password')?.value,
@@ -627,23 +1354,23 @@ class CreatePasswordComponent {
     checkErrors(field) {
         if (this.createPasswordForm.controls[field].touched) {
             if (this.createPasswordForm.controls[field].hasError('required')) {
-                this.formErrors[field][0] = 'This field is required';
+                this.formErrors[field] = ['This field is required'];
                 return;
             }
             if (field === 'password' && this.createPasswordForm.controls[field].hasError('pattern')) {
-                this.formErrors.password[0] = 'Password is invalid';
+                this.formErrors.password = ['Password is invalid'];
                 return;
             }
         }
-        this.formErrors[field][0] = '';
+        this.formErrors[field] = [''];
     }
 }
-CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n        aria-hidden=\"true\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponent, decorators: [{
+CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n        aria-hidden=\"true\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password[0]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n        aria-hidden=\"true\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
+            args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"createPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n      <mat-password-strength\n        [min]=\"12\"\n        #passwordComponentWithValidation\n        [password]=\"createPasswordForm.controls['password'].value\"\n        aria-hidden=\"true\"\n      >\n      </mat-password-strength>\n      <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button\"\n        [disabled]=\"createPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -655,24 +1382,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class CreatePasswordComponentModule {
 }
-CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, declarations: [CreatePasswordComponent], imports: [CommonModule,
+CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponentModule, declarations: [CreatePasswordComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         FieldComponentModule,
         ButtonComponentModule,
         MatPasswordStrengthModule,
         LogoComponentModule], exports: [CreatePasswordComponent] });
-CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            FieldComponentModule,
-            ButtonComponentModule,
-            MatPasswordStrengthModule,
-            LogoComponentModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
+CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponentModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        MatPasswordStrengthModule,
+        LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CreatePasswordComponent],
@@ -691,83 +1416,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 class DialogComponent {
-    // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
-    // https://github.com/storybookjs/storybook/issues/16865
-    // https://github.com/storybookjs/storybook/issues/17004
-    constructor(data, dialogRef) {
-        this.data = data;
+    constructor(dialogRef) {
         this.dialogRef = dialogRef;
+        /**
+         * Dialog title
+         *
+         * @memberof DialogComponent
+         */
+        this.title = '';
+        /**
+         * Show close button
+         *
+         * @memberof DialogComponent
+         */
+        this.showCloseButton = true;
+        /**
+         * Fuction called before dialgo is closed
+         *
+         * @memberof DialogComponent
+         */
+        this.canCloseFn = () => true;
+        /**
+         * Secondary button label
+         *
+         * @memberof DialogComponent
+         */
+        this.secondaryButtonLabel = '';
+        /**
+         * Primary button label
+         *
+         * @memberof DialogComponent
+         */
+        this.primaryButtonLabel = '';
+        this.closeEvent = new EventEmitter();
+        this.secondaryButtonClickEvent = new EventEmitter();
+        this.primaryButtonClickEvent = new EventEmitter();
+        this.disableButtons = false;
+    }
+    ngOnInit() {
+        this.areButtonsDisabled();
+    }
+    ngOnChanges(changes) {
+        if (changes['canCloseFn']) {
+            this.dialogRef.disableClose = !this.canCloseFn();
+            this.areButtonsDisabled();
+        }
+    }
+    //Disable primary button when canClose is false
+    areButtonsDisabled() {
+        if (this.canCloseFn() === false) {
+            this.disableButtons = true;
+        }
+        else {
+            this.disableButtons = false;
+        }
     }
+    //Close modal
     dismiss() {
-        this.dialogRef.close();
+        if (this.canCloseFn()) {
+            this.dialogRef.disableClose = false;
+            this.dialogRef.close();
+        }
+    }
+    onClose(event) {
+        this.closeEvent.emit(event);
+    }
+    onSecondaryButtonClick(event) {
+        this.secondaryButtonClickEvent.emit(event);
+    }
+    onPrimaryButtonClick(event) {
+        this.primaryButtonClickEvent.emit(event);
     }
 }
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DialogComponent, selector: "ui-dialog", ngImport: i0, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    Styles of a default modal\n    <div>\n      <button mat-icon-button (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n  </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponent, decorators: [{
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    {{ title }}\n    <div *ngIf=\"showCloseButton\">\n      <ui-button type=\"text\" [justIcon]=\"true\" [disabled]=\"disableButtons\" class=\"close\" iconName=\"Close\" label=\"Close dialog\" (click)=\"onClose($event)\" (buttonClickEvent)=\"dismiss()\"></ui-button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n    <ui-button type=\"secondary\" *ngIf=\"!!secondaryButtonLabel\" [label]=\"secondaryButtonLabel\" (click)=\"onSecondaryButtonClick($event)\"></ui-button>\n    <ui-button type=\"primary\" *ngIf=\"!!primaryButtonLabel\" [disabled]=\"disableButtons\" (click)=\"onPrimaryButtonClick($event)\" [label]=\"primaryButtonLabel\" (buttonClickEvent)=\"dismiss()\"></ui-button>\n  </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px;font-weight:500}.title .close{margin-right:-24px}.title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    Styles of a default modal\n    <div>\n      <button mat-icon-button (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n  </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$4.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }]; } });
+            args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container>\n  <div mat-dialog-title class=\"title\">\n    {{ title }}\n    <div *ngIf=\"showCloseButton\">\n      <ui-button type=\"text\" [justIcon]=\"true\" [disabled]=\"disableButtons\" class=\"close\" iconName=\"Close\" label=\"Close dialog\" (click)=\"onClose($event)\" (buttonClickEvent)=\"dismiss()\"></ui-button>\n    </div>\n  </div>\n  <mat-dialog-content>\n    <ng-content></ng-content>\n  </mat-dialog-content>\n  <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n    <ui-button type=\"secondary\" *ngIf=\"!!secondaryButtonLabel\" [label]=\"secondaryButtonLabel\" (click)=\"onSecondaryButtonClick($event)\"></ui-button>\n    <ui-button type=\"primary\" *ngIf=\"!!primaryButtonLabel\" [disabled]=\"disableButtons\" (click)=\"onPrimaryButtonClick($event)\" [label]=\"primaryButtonLabel\" (buttonClickEvent)=\"dismiss()\"></ui-button>\n  </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px;font-weight:500}.title .close{margin-right:-24px}.title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], canCloseFn: [{
+                type: Input
+            }], secondaryButtonLabel: [{
+                type: Input
+            }], primaryButtonLabel: [{
+                type: Input
+            }], closeEvent: [{
+                type: Output
+            }], secondaryButtonClickEvent: [{
+                type: Output
+            }], primaryButtonClickEvent: [{
+                type: Output
+            }] } });
 
 class DialogService {
-    /**
-     * Constructor
-     */
     constructor(matDialog) {
         this.matDialog = matDialog;
     }
-    open(dialogComponent, config) {
+    open(dialogComponent) {
         // Open the dialog using UI custom styles
         return this.matDialog.open(dialogComponent, {
-            panelClass: 'ui-dialog',
-            ...config,
+            panelClass: 'ui-dialog-wrapper',
         });
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService, decorators: [{
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
 
-class LaunchDialogComponent {
-    // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
-    // https://github.com/storybookjs/storybook/issues/16865
-    // https://github.com/storybookjs/storybook/issues/17004
-    constructor(dialogService) {
-        this.dialogService = dialogService;
-        this.openModal();
+class DialogComponentModule {
+}
+DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DialogComponentModule, declarations: [DialogComponent], imports: [CommonModule, MatDialogModule, ButtonComponentModule], exports: [DialogComponent] });
+DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponentModule, providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService], imports: [CommonModule, MatDialogModule, ButtonComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DialogComponent],
+                    imports: [CommonModule, MatDialogModule, ButtonComponentModule],
+                    exports: [DialogComponent],
+                    providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService],
+                }]
+        }] });
+
+var ElevationType;
+(function (ElevationType) {
+    ElevationType["DEFAULT"] = "default";
+    ElevationType["MODAL"] = "modal";
+})(ElevationType || (ElevationType = {}));
+
+class ElevationShadowComponent {
+    constructor() {
+        /**
+         * The type of elevation shadow.
+         * Default: default.
+         *
+         * @type {ElevationType}
+         * @memberof ElevationShadowComponent
+         */
+        this.elevationType = ElevationType.DEFAULT;
     }
-    openModal() {
-        this.dialogService.open(DialogComponent);
+}
+ElevationShadowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ElevationShadowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ElevationShadowComponent, selector: "ui-elevation-shadow", inputs: { elevationType: "elevationType" }, ngImport: i0, template: "<div [ngClass]=\"elevationType\">\n    <ng-content></ng-content>\n</div>", styles: [".modal{border:2px solid #E0E0E0;box-shadow:2px 24px 48px 8px #00000014;border-radius:8px}.default{border:2px solid #E0E0E0;box-shadow:0 8px 24px 4px #00000014;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-elevation-shadow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"elevationType\">\n    <ng-content></ng-content>\n</div>", styles: [".modal{border:2px solid #E0E0E0;box-shadow:2px 24px 48px 8px #00000014;border-radius:8px}.default{border:2px solid #E0E0E0;box-shadow:0 8px 24px 4px #00000014;border-radius:8px}\n"] }]
+        }], propDecorators: { elevationType: [{
+                type: Input
+            }] } });
+
+class ElevationShadowComponentModule {
+}
+ElevationShadowComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElevationShadowComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponentModule, declarations: [ElevationShadowComponent], imports: [CommonModule], exports: [ElevationShadowComponent] });
+ElevationShadowComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ElevationShadowComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElevationShadowComponent],
+                    imports: [CommonModule],
+                    exports: [ElevationShadowComponent],
+                }]
+        }] });
+
+class ProgressBarComponent {
+    constructor() {
+        /**
+         * Color of the progress bar.
+         * Defaults to Test Gorilla primary color.
+         *
+         * @type {string}
+         * @memberof ProgressBarComponent
+         */
+        this.color = '#46A997';
+        /**
+         * Progress value of the progress bar.
+         * Defaults to zero.
+         *
+         * @type {number}
+         * @memberof ProgressBarComponent
+         */
+        this.progress = 0;
+        /**
+         * Mode of the progress bar.
+         * Mode must be one of these values: determinate, indeterminate, buffer, query.
+         * Defaults to 'determinate'.
+         *
+         * @type {ProgressBarMode}
+         * @memberof ProgressBarComponent
+         */
+        this.mode = 'determinate';
+        /**
+         * Buffer value of the progress bar.
+         * Defaults to zero.
+         *
+         * @type {number}
+         * @memberof ProgressBarComponent
+         */
+        this.buffer = 0;
     }
 }
-LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LaunchDialogComponent, selector: "ui-launch-dialog", ngImport: i0, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>", components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, decorators: [{
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", progress: "progress", mode: "mode", buffer: "buffer" }, host: { properties: { "style.--color": "this.color" } }, ngImport: i0, template: "<mat-progress-bar\n  [mode]=\"mode\"\n  [value]=\"progress\"\n  [bufferValue]=\"buffer\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n  class=\"progress-bar\"\n></mat-progress-bar>\n", styles: [".mat-mdc-progress-bar.progress-bar{height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px}\n"], dependencies: [{ kind: "component", type: i1$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-launch-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>" }]
-        }], ctorParameters: function () { return [{ type: DialogService }]; } });
+            args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n  [mode]=\"mode\"\n  [value]=\"progress\"\n  [bufferValue]=\"buffer\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n  class=\"progress-bar\"\n></mat-progress-bar>\n", styles: [".mat-mdc-progress-bar.progress-bar{height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                type: HostBinding,
+                args: ['style.--color']
+            }, {
+                type: Input
+            }], progress: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], buffer: [{
+                type: Input
+            }] } });
 
-class DialogComponentModule {
+class DragDropDirective {
+    constructor() {
+        this.fileDropped = new EventEmitter();
+    }
+    // Dragover listener
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.file = true;
+    }
+    // Dragleave listener
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.file = false;
+    }
+    // Drop listener
+    ondrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.file = false;
+        let files;
+        if (!!event.dataTransfer) {
+            files = event.dataTransfer.files;
+            if (files.length > 0) {
+                this.fileDropped.emit(files);
+            }
+        }
+    }
+}
+DragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DragDropDirective, selector: "[uiDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.file" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DragDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiDragDrop]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { file: [{
+                type: HostBinding,
+                args: ['class.file-over']
+            }], fileDropped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.class = 'ui-file-upload';
+        this.OnDrop = new EventEmitter();
+        /**
+         * @ignore
+         */
+        this.onChange = (_) => { };
+        /**
+         * @ignore
+         */
+        this.onTouch = () => { };
+        this.file = null;
+        this.progress = false;
+        this.success = false;
+    }
+    ngOnInit() {
+        this.browse = true;
+    }
+    //When file is dropped
+    onFileDropped(files) {
+        this.emitFile(files);
+    }
+    //When input changes
+    onChangeUpload(event) {
+        const element = event.currentTarget;
+        this.emitFile(element.files || new FileList());
+    }
+    //Emit drop file
+    emitFile(files) {
+        const [file] = Array.from(files);
+        this.file = file;
+        this.errors = null;
+        this.onTouch();
+        this.onChange(this.file);
+        this.OnDrop.emit(file);
+    }
+    //Show progress-bar
+    showProgress() {
+        this.browse = false;
+        return this.file && !this.errors ? true : false;
+    }
+    //Show success elements
+    showSuccess() {
+        return this.file && this.uploadProgress === 100 && !this.errors ? true : false;
+    }
+    //Show browse when there are error
+    showBrowse() {
+        return this.errors ? true : false;
+    }
+    ngOnChanges(changes) {
+        if (changes['uploadProgress']) {
+            this.progress = this.showProgress();
+            this.success = this.showSuccess();
+            this.browse = this.showBrowse();
+        }
+        if (changes['errors']) {
+            this.progress = this.showProgress();
+            this.success = this.showSuccess();
+            this.browse = this.showBrowse();
+        }
+    }
+    writeValue(value) {
+        if (value) {
+            this.file = value || null;
+        }
+        else {
+            this.file = null;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", errors: "errors", disabled: "disabled" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FileUploadComponent),
+            multi: true,
+        },
+    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"upload-file-container\" uiDragDrop [ngClass]=\"{'upload-errors': !!errors}\" (fileDropped)=\"onFileDropped($event)\">\n  <div *ngIf=\"browse\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\">\n          <ui-icon name=\"Error\"></ui-icon> {{ error }}\n        </span>\n      </div>\n      <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\">\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\" [disabled]=\"disabled\">\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span  class=\"upload-text\"><strong>{{ file.name }}</strong></span>\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar\n      [progress]=\"uploadProgress\"\n      ></ui-progress-bar>\n    <p class=\"upload-text\">Uploading <span>{{uploadProgress}}</span>%</p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["color", "progress", "mode", "buffer"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }], animations: [
+        trigger('inOutAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0 }),
+                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '196px' }),
+                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('inOutAnimationProgress', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0 }),
+                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '196px' }),
+                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('inOutAnimationChange', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0 }),
+                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '196px' }),
+                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-file-upload', encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileUploadComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('inOutAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0 }),
+                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '196px' }),
+                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        trigger('inOutAnimationProgress', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0 }),
+                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '196px' }),
+                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        trigger('inOutAnimationChange', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0 }),
+                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '196px' }),
+                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"upload-file-container\" uiDragDrop [ngClass]=\"{'upload-errors': !!errors}\" (fileDropped)=\"onFileDropped($event)\">\n  <div *ngIf=\"browse\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\">\n          <ui-icon name=\"Error\"></ui-icon> {{ error }}\n        </span>\n      </div>\n      <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\">\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\" [disabled]=\"disabled\">\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span  class=\"upload-text\"><strong>{{ file.name }}</strong></span>\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar\n      [progress]=\"uploadProgress\"\n      ></ui-progress-bar>\n    <p class=\"upload-text\">Uploading <span>{{uploadProgress}}</span>%</p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding
+            }], maxFileSizeMB: [{
+                type: Input
+            }], supportedFileTypes: [{
+                type: Input
+            }], uploadProgress: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], OnDrop: [{
+                type: Output
+            }] } });
+
+class ProgressBarComponentModule {
+}
+ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] });
+ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponentModule, imports: [CommonModule, MatProgressBarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ProgressBarComponent],
+                    imports: [CommonModule, MatProgressBarModule],
+                    exports: [ProgressBarComponent],
+                    providers: [],
+                }]
+        }] });
+
+class FileUploadComponentModule {
 }
-DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, declarations: [DialogComponent, LaunchDialogComponent], imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], exports: [MatDialogModule] });
-DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, providers: [DialogService], imports: [[CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], MatDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, decorators: [{
+FileUploadComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponentModule, declarations: [FileUploadComponent, DragDropDirective], imports: [CommonModule, MatFormFieldModule, MatInputModule, IconComponentModule, ProgressBarComponentModule], exports: [FileUploadComponent] });
+FileUploadComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule, MatFormFieldModule, MatInputModule, IconComponentModule, ProgressBarComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DialogComponent, LaunchDialogComponent],
-                    imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule],
-                    exports: [MatDialogModule],
-                    providers: [DialogService],
+                    declarations: [FileUploadComponent, DragDropDirective],
+                    imports: [CommonModule, MatFormFieldModule, MatInputModule, IconComponentModule, ProgressBarComponentModule],
+                    exports: [FileUploadComponent],
+                    providers: [],
                 }]
         }] });
 
@@ -779,6 +1905,10 @@ const FORGOT_PASSWORD_i18n = {
 };
 
 class ForgotPasswordComponent {
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
     constructor(fb) {
         this.fb = fb;
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -812,10 +1942,6 @@ class ForgotPasswordComponent {
          */
         this.backToLoginEvent = new EventEmitter();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
     submit() {
         this.submitEvent.emit({
             email: this.forgotPasswordForm.get('email')?.value,
@@ -827,23 +1953,23 @@ class ForgotPasswordComponent {
     checkErrors(field) {
         if (this.forgotPasswordForm.controls[field].touched) {
             if (this.forgotPasswordForm.controls[field].hasError('required')) {
-                this.formErrors[field][0] = 'This field is required';
+                this.formErrors[field] = ['This field is required'];
                 return;
             }
             if (this.forgotPasswordForm.controls[field].hasError('email')) {
-                this.formErrors[field][0] = 'Enter a valid email';
+                this.formErrors[field] = ['Enter a valid email'];
                 return;
             }
         }
-        this.formErrors[field][0] = '';
+        this.formErrors[field] = [''];
     }
 }
-ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email[0]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
+ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email[0]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
+            args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"forgotPasswordForm\">\n    <div class=\"field\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div></div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"forgotPasswordForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"back-login\" (click)=\"backToLogin()\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>{{ i18n.back_to_login }}</span>\n    </div>\n  </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { formErrors: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -855,39 +1981,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }] } });
 
-class ForgotPasswordComponentModule {
+class ForgotPasswordComponentModule {
+}
+ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        MatIconModule,
+        LogoComponentModule], exports: [ForgotPasswordComponent] });
+ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponentModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        MatIconModule,
+        LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ForgotPasswordComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FieldComponentModule,
+                        ButtonComponentModule,
+                        MatIconModule,
+                        LogoComponentModule,
+                    ],
+                    exports: [ForgotPasswordComponent],
+                    providers: [],
+                }]
+        }] });
+
+class IconLabelComponent {
+    constructor() {
+        /**
+         * Icon size
+         *
+         * @type {IconSize}
+         * @memberof IconLabelComponent
+         */
+        this.iconSize = '16';
+        /**
+         * Label
+         *
+         * @memberof IconLabelComponent
+         */
+        this.text = '';
+    }
+    ngOnInit() { }
+}
+IconLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconLabelComponent, selector: "ui-icon-label", inputs: { iconSize: "iconSize", iconName: "iconName", text: "text" }, ngImport: i0, template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:8px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-icon-label', template: "<ui-icon [name]=\"iconName\" [size]=\"iconSize\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n", styles: [":host{display:flex;align-items:center}:host ui-icon{margin-right:8px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { iconSize: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
+class IconLabelComponentModule {
 }
-ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        FieldComponentModule,
-        ButtonComponentModule,
-        MatIconModule,
-        LogoComponentModule], exports: [ForgotPasswordComponent] });
-ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            FieldComponentModule,
-            ButtonComponentModule,
-            MatIconModule,
-            LogoComponentModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
+IconLabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IconLabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponentModule, declarations: [IconLabelComponent], imports: [CommonModule, IconComponentModule], exports: [IconLabelComponent] });
+IconLabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponentModule, imports: [CommonModule, IconComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconLabelComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ForgotPasswordComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        FieldComponentModule,
-                        ButtonComponentModule,
-                        MatIconModule,
-                        LogoComponentModule,
-                    ],
-                    exports: [ForgotPasswordComponent],
+                    declarations: [IconLabelComponent],
+                    imports: [CommonModule, IconComponentModule],
+                    exports: [IconLabelComponent],
                     providers: [],
                 }]
         }] });
@@ -944,9 +2114,9 @@ class LabelComponent {
         this.size = LabelSizeEnum.SMALL;
     }
 }
-LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", description: "description", size: "size" }, ngImport: i0, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, decorators: [{
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", description: "description", size: "size" }, ngImport: i0, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"label\"\n  [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n  [ngClass]=\"{\n    small: size === LabelSizeEnum.SMALL,\n    medium: size === LabelSizeEnum.MEDIUM,\n    large: size === LabelSizeEnum.LARGE,\n    big: size === LabelSizeEnum.BIG,\n    huge: size === LabelSizeEnum.HUGE\n  }\"\n>\n  <div [innerHTML]=\"title\"></div>\n  <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
@@ -963,10 +2133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class LabelComponentModule {
 }
-LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, declarations: [LabelComponent], imports: [CommonModule], exports: [LabelComponent] });
-LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, decorators: [{
+LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LabelComponentModule, declarations: [LabelComponent], imports: [CommonModule], exports: [LabelComponent] });
+LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LabelComponent],
@@ -988,6 +2158,10 @@ const LOGIN_i18n = {
 };
 
 class LoginComponent {
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
     constructor(fb) {
         this.fb = fb;
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -1033,10 +2207,6 @@ class LoginComponent {
          */
         this.createAccountEvent = new EventEmitter();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
     submit() {
         this.submitEvent.emit({
             username: this.loginForm.get('email')?.value,
@@ -1064,12 +2234,12 @@ class LoginComponent {
         this.formErrors[field] = '';
     }
 }
-LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:40px 24px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponent, decorators: [{
+LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.email]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.password]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div class=\"remember-me\">\n        <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [error]=\"formErrors.email\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [error]=\"formErrors.password\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div>\n        <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (onClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:40px 24px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
+            args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-login-container\">\n  <ui-logo></ui-logo>\n  <div class=\"title\">{{ i18n.title }}</div>\n  <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n    <div class=\"field-email\">\n      <ui-field\n        formControlName=\"email\"\n        [label]=\"i18n.email_label\"\n        [type]=\"'email'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.email]\"\n        (ngModelChange)=\"checkErrors('email')\"\n      ></ui-field>\n    </div>\n    <div class=\"field-password\">\n      <ui-field\n        formControlName=\"password\"\n        [label]=\"i18n.password_label\"\n        [type]=\"'password'\"\n        [required]=\"true\"\n        [errors]=\"[formErrors.password]\"\n        (ngModelChange)=\"checkErrors('password')\"\n      ></ui-field>\n    </div>\n    <div class=\"actions\">\n      <div class=\"remember-me\">\n        <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n      </div>\n      <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n    </div>\n    <div class=\"submit-button\">\n      <ui-button\n        [label]=\"i18n.button_label\"\n        [disabled]=\"loginForm.invalid\"\n        [fullWidth]=\"true\"\n        [loading]=\"loading\"\n        (buttonClickEvent)=\"submit()\"\n      ></ui-button>\n    </div>\n    <div class=\"create-account-wrapper\">\n      <p>\n        {{ i18n.not_have_account }}\n        <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n      </p>\n    </div>\n  </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { loading: [{
                 type: Input
             }], i18n: [{
                 type: Input
@@ -1083,24 +2253,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class LoginComponentModule {
 }
-LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, declarations: [LoginComponent], imports: [CommonModule,
+LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LoginComponentModule, declarations: [LoginComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         FieldComponentModule,
         ButtonComponentModule,
-        MatCheckboxModule,
+        CheckboxComponentModule,
         LogoComponentModule], exports: [LoginComponent] });
-LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            FieldComponentModule,
-            ButtonComponentModule,
-            MatCheckboxModule,
-            LogoComponentModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, decorators: [{
+LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponentModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FieldComponentModule,
+        ButtonComponentModule,
+        CheckboxComponentModule,
+        LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LoginComponent],
@@ -1110,7 +2278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         ReactiveFormsModule,
                         FieldComponentModule,
                         ButtonComponentModule,
-                        MatCheckboxModule,
+                        CheckboxComponentModule,
                         LogoComponentModule,
                     ],
                     exports: [LoginComponent],
@@ -1161,11 +2329,11 @@ class NavbarComponent {
         this.logoutEvent.emit();
     }
 }
-NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: LogoComponent, selector: "ui-logo" }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, decorators: [{
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon iconPositionEnd>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon iconPositionEnd>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>power_settings_new</mat-icon>\n        Log out\n    </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
@@ -1180,24 +2348,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class NavbarComponentModule {
 }
-NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
+NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
         MatToolbarModule,
         MatIconModule,
         MatButtonModule,
         MatRippleModule,
         MatMenuModule,
         LogoComponentModule], exports: [NavbarComponent] });
-NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[
-            CommonModule,
-            MatToolbarModule,
-            MatIconModule,
-            MatButtonModule,
-            MatRippleModule,
-            MatMenuModule,
-            LogoComponentModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, decorators: [{
+NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponentModule, imports: [CommonModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatRippleModule,
+        MatMenuModule,
+        LogoComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NavbarComponent],
@@ -1226,9 +2392,9 @@ class NavigationComponent {
         this.goBackClickedEvent.emit();
     }
 }
-NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n  <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span >{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "description", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, decorators: [{
+NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n  <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span >{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "description", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\">\n  <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n    <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n  </button>\n  <div class=\"content\">\n    <div class=\"title\">\n      <span >{{ title }}</span>\n      <div class=\"status\" *ngIf=\"labelItem\">\n        <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n          [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n        </ui-label>\n      </div>\n    </div>\n    <div class=\"subtitle\">\n      {{ subtitle }}\n    </div>\n  </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
@@ -1243,10 +2409,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class NavigationComponentModule {
 }
-NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, declarations: [NavigationComponent], imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule], exports: [NavigationComponent] });
-NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, providers: [], imports: [[CommonModule, MatIconModule, MatButtonModule, LabelComponentModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, decorators: [{
+NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponentModule, declarations: [NavigationComponent], imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule], exports: [NavigationComponent] });
+NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponentModule, imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavigationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NavigationComponent],
@@ -1257,6 +2423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 class PaginatorComponent {
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
     constructor() {
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
         // https://github.com/storybookjs/storybook/issues/16865
@@ -1287,19 +2457,15 @@ class PaginatorComponent {
          */
         this.paginatorChangedEvent = new EventEmitter();
     }
-    /**
-     * @ignore
-     */
-    ngOnInit() { }
     paginatorChanged(paginator) {
         this.paginatorChangedEvent.emit(paginator);
     }
 }
-PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
+PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: [".mat-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"pageSizeOptions\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: [".mat-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { length: [{
                 type: Input
             }], defaultPageSize: [{
@@ -1310,10 +2476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class PaginatorComponentModule {
 }
-PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, declarations: [PaginatorComponent], imports: [CommonModule, MatPaginatorModule], exports: [PaginatorComponent] });
-PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, providers: [], imports: [[CommonModule, MatPaginatorModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, decorators: [{
+PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponentModule, declarations: [PaginatorComponent], imports: [CommonModule, MatPaginatorModule], exports: [PaginatorComponent] });
+PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponentModule, imports: [CommonModule, MatPaginatorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginatorComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PaginatorComponent],
@@ -1323,35 +2489,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-class ProgressBarComponent {
-    constructor() { }
+/* eslint-disable no-underscore-dangle */
+class RadioButtonComponent {
+    constructor() {
+        /**
+         * Determines whether the radio button is disabled.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof RadioButtonComponent
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the radio button is checked.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof RadioButtonComponent
+         */
+        //@Input() selected = false;
+        this._selected = false;
+        /**
+         * Determines whether the radio button can be unchecked.
+         * Default: false.
+         *
+         * @type {boolean}
+         * @memberof RadioButtonComponent
+         */
+        this.allowUnselect = false;
+        /**
+         * Determines the radio button color.
+         * Default: Test Gorilla primary color.
+         *
+         * @type {string}
+         * @memberof RadioButtonComponent
+         */
+        this.color = '#46A997';
+        /**
+         * Used to group radios for unique selection.
+         *
+         * @type {string}
+         * @memberof RadioButtonComponent
+         */
+        this.name = '';
+        /**
+         * Text content will be applied to the input element if present.
+         *
+         * @type {string}
+         * @memberof RadioButtonComponent
+         */
+        this.label = '';
+        /**
+         * Determines whether the radio button is a multiple choice cell.
+         * Default: false
+         *
+         * @type {boolean}
+         * @memberof RadioButtonComponent
+         */
+        this.multiple = false;
+        /**
+         * Event emitted when the checked state of the radio button changes.
+         *
+         * @type {boolean}
+         * @memberof RadioButtonComponent
+         */
+        this.changeRadio = new EventEmitter();
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(selected) {
+        this._selected = selected;
+    }
+    ngOnInit() {
+        this.classMultiple = this.setClass();
+    }
+    ngOnChanges(changes) {
+        if (changes['selected']) {
+            this.classMultiple = this.setClass();
+        }
+    }
+    //Click method
+    clickRadio(element, event) {
+        //event.preventDefault();
+        if (this.allowUnselect) {
+            element.checked = !element.checked;
+            this._selected = element.checked;
+            this.classMultiple = this.setClass();
+            this.changeRadio.emit({ optionName: element.value, optionChecked: element.checked });
+        }
+        else {
+            this._selected = true;
+            this.changeRadio.emit({ optionName: element.value, optionChecked: true });
+        }
+        if (this.disabled) {
+            this._selected = false;
+            this.changeRadio.emit({ optionName: '', optionChecked: false });
+        }
+    }
+    //Set class for multiple radio
+    setClass() {
+        if (this.multiple) {
+            return this._selected ? 'multiple-checked' : 'multiple-unchecked';
+        }
+        return '';
+    }
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", color: "color", name: "name", label: "label", multiple: "multiple", value: "value" }, outputs: { changeRadio: "changeRadio" }, host: { properties: { "style.--color": "this.color" } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classMultiple\">\n  <mat-radio-button\n    #radio\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [aria-label]=\"label\"\n    [value]=\"value\"\n    class=\"radio-button\"\n    (click)=\"clickRadio(radio, $event)\"\n  >\n    {{ label }}\n  </mat-radio-button>\n</div>", styles: ["::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}.multiple-checked{border:1px solid #46A997;display:flex;flex-direction:row;align-items:center;gap:16px;background:#46A997;border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#ffffff}.multiple-checked ::ng-deep label{color:#fff;padding:16px 0;height:100%;width:100%}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#ffffff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%}.multiple-unchecked:hover{background:#F6F6F6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{padding:16px 0;height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n  class=\"progress-bar\"\n  [color]=\"color ?? 'accent'\"\n  [mode]=\"mode\"\n  [value]=\"value\"\n  [bufferValue]=\"buffer\"\n  [ngClass]=\"{defaultColor: !color}\"\n  aria-label=\"Progress bar\"\n  title=\"progress-bar\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+            args: [{ selector: 'ui-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"classMultiple\">\n  <mat-radio-button\n    #radio\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [aria-label]=\"label\"\n    [value]=\"value\"\n    class=\"radio-button\"\n    (click)=\"clickRadio(radio, $event)\"\n  >\n    {{ label }}\n  </mat-radio-button>\n</div>", styles: ["::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}.multiple-checked{border:1px solid #46A997;display:flex;flex-direction:row;align-items:center;gap:16px;background:#46A997;border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#ffffff}.multiple-checked ::ng-deep label{color:#fff;padding:16px 0;height:100%;width:100%}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#ffffff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%}.multiple-unchecked:hover{background:#F6F6F6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{padding:16px 0;height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}\n"] }]
+        }], propDecorators: { disabled: [{
                 type: Input
-            }], mode: [{
+            }], selected: [{
+                type: Input
+            }], allowUnselect: [{
+                type: Input
+            }], color: [{
+                type: HostBinding,
+                args: ['style.--color']
+            }, {
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], multiple: [{
                 type: Input
             }], value: [{
                 type: Input
-            }], buffer: [{
+            }], changeRadio: [{
+                type: Output
+            }] } });
+
+class RadioButtonComponentModule {
+}
+RadioButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponentModule, declarations: [RadioButtonComponent], imports: [CommonModule, MatRadioModule, FormsModule, ReactiveFormsModule], exports: [RadioButtonComponent] });
+RadioButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponentModule, imports: [CommonModule, MatRadioModule, FormsModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RadioButtonComponent],
+                    imports: [CommonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
+                    exports: [RadioButtonComponent],
+                }]
+        }] });
+
+class SnackbarComponent {
+    constructor() {
+        /**
+         * Background color of the button while in active state
+         *
+         * @type {SnackbarType}
+         * @memberof SnackbarComponent
+         */
+        this.snackbarType = 'success';
+        /**
+         * Snackbar message
+         *
+         * @memberof SnackbarComponent
+         */
+        this.message = '';
+        /**
+         * Set the time that the snackbar will be visible
+         *
+         * @memberof SnackbarComponent
+         */
+        this.seconds = 5;
+        /**
+         * Include dismmiss button
+         *
+         * @memberof SnackbarComponent
+         */
+        this.includeDismissButton = true;
+        /**
+         * Static or fixed position
+         *
+         * @memberof SnackbarComponent
+         */
+        this.fixed = true;
+        this.showSnackbar = true;
+        this.visible = false;
+        this.timerStartedAt = 0;
+        this.timerPausedAt = 0;
+    }
+    ngOnInit() {
+        this.milisenconds = this.seconds * 1000;
+        this.iconName = alertBarsUtil.setIcon(this.snackbarType);
+        this.show();
+        this.position = alertBarsUtil.setPosition(this.fixed);
+    }
+    //Show snackbar
+    show() {
+        this.timerStartedAt = Date.now();
+        this.visible = true;
+        this.timer = setTimeout(() => this.hide(), this.milisenconds);
+    }
+    //Hide snackbar
+    hide() {
+        this.visible = false;
+        this.timerPausedAt = 0;
+        this.timerStartedAt = 0;
+        clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    //Pause timer when mouse enter
+    onMouseEnter() {
+        this.visible = true;
+        this.timerPausedAt = Date.now();
+        clearTimeout(this.timer);
+    }
+    //Continue timer when mouse leave
+    onMouseLeave() {
+        const diff = this.timerPausedAt - this.timerStartedAt;
+        if (diff <= 0) {
+            return this.hide();
+        }
+        this.timer = setTimeout(() => this.hide(), this.milisenconds - diff);
+    }
+    //Hide snackbar when dismiss button is clicked
+    dismissClick() {
+        this.visible = false;
+    }
+}
+SnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed" }, ngImport: i0, template: "<div [ngClass]=\"snackbarType + ' ' + position\" [@openClose] *ngIf=\"visible\" class=\"snackbar-container\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <div class=\"snackbar-text\">\n    <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n    {{ message }}\n  </div>\n  <ui-button *ngIf=\"includeDismissButton\" type=\"text\" label=\"Dismiss\" (buttonClickEvent)=\"dismissClick()\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:10px;z-index:98}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], animations: [
+        trigger('openClose', [
+            transition(':enter', [
+                style({ bottom: '-55px', opacity: 0 }),
+                animate('0.2s ease-out', style({ opacity: 1, bottom: '10px' })),
+            ]),
+            transition(':leave', [
+                style({ bottom: '10px', opacity: 1 }),
+                animate('0.2s ease-in', style({ bottom: '-55px', opacity: 0 })),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-snackbar', animations: [
+                        trigger('openClose', [
+                            transition(':enter', [
+                                style({ bottom: '-55px', opacity: 0 }),
+                                animate('0.2s ease-out', style({ opacity: 1, bottom: '10px' })),
+                            ]),
+                            transition(':leave', [
+                                style({ bottom: '10px', opacity: 1 }),
+                                animate('0.2s ease-in', style({ bottom: '-55px', opacity: 0 })),
+                            ]),
+                        ]),
+                    ], template: "<div [ngClass]=\"snackbarType + ' ' + position\" [@openClose] *ngIf=\"visible\" class=\"snackbar-container\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <div class=\"snackbar-text\">\n    <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n    {{ message }}\n  </div>\n  <ui-button *ngIf=\"includeDismissButton\" type=\"text\" label=\"Dismiss\" (buttonClickEvent)=\"dismissClick()\"></ui-button>\n</div>", styles: [":host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:10px;z-index:98}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { snackbarType: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], seconds: [{
+                type: Input
+            }], includeDismissButton: [{
+                type: Input
+            }], fixed: [{
                 type: Input
             }] } });
 
-class ProgressBarComponentModule {
+class SnackbarComponentModule {
 }
-ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] });
-ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, providers: [], imports: [[CommonModule, MatProgressBarModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
+SnackbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SnackbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponentModule, declarations: [SnackbarComponent], imports: [CommonModule, ButtonComponentModule, IconComponentModule], exports: [SnackbarComponent] });
+SnackbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponentModule, imports: [CommonModule, ButtonComponentModule, IconComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SnackbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ProgressBarComponent],
-                    imports: [CommonModule, MatProgressBarModule],
-                    exports: [ProgressBarComponent],
+                    declarations: [SnackbarComponent],
+                    imports: [CommonModule, ButtonComponentModule, IconComponentModule],
+                    exports: [SnackbarComponent],
                     providers: [],
                 }]
         }] });
@@ -1377,9 +2789,9 @@ class DataPropertyGetterPipe {
         return obj;
     }
 }
-DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, name: "dataPropertyGetter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
+DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DataPropertyGetterPipe, name: "dataPropertyGetter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataPropertyGetter',
@@ -1400,10 +2812,6 @@ var ColumnAlignmentEnum;
 })(ColumnAlignmentEnum || (ColumnAlignmentEnum = {}));
 
 class DynamicComponentDirective {
-    constructor(vcr) {
-        this.vcr = vcr;
-        this.subscription = new Subscription();
-    }
     set dynamicComponent(componentRenderer) {
         if (componentRenderer.component) {
             this.compRef = this.vcr.createComponent(componentRenderer.component);
@@ -1417,6 +2825,10 @@ class DynamicComponentDirective {
             }
         }
     }
+    constructor(vcr) {
+        this.vcr = vcr;
+        this.subscription = new Subscription();
+    }
     ngOnDestroy() {
         if (this.compRef) {
             this.compRef.destroy();
@@ -1424,9 +2836,9 @@ class DynamicComponentDirective {
         this.subscription.unsubscribe();
     }
 }
-DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, decorators: [{
+DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dynamicComponent]',
@@ -1436,6 +2848,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 class TableComponent {
+    /**
+     * @ignore
+     */
+    set matSort(matSort) {
+        this.dataSource.sort = matSort;
+        this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);
+    }
+    /**
+     * Data to be rendered
+     *
+     * @ignore
+     * @type {IDataSource}
+     * @memberof TableComponent
+     */
+    set tableData(data) {
+        if (data?.length) {
+            this.setTableDataSource(data);
+        }
+    }
+    ngOnInit() {
+        this.columnsToDisplay = this.tableColumns.map((tableColumn) => tableColumn.headerName);
+        if (this.tableDetailColumns) {
+            this.columnsDetailToDisplay = this.tableDetailColumns.columnDefs.map((tableColumn) => tableColumn.headerName);
+        }
+    }
     constructor(dataPropertyGetterPipe) {
         this.dataPropertyGetterPipe = dataPropertyGetterPipe;
         /**
@@ -1482,31 +2919,6 @@ class TableComponent {
          */
         this.DataType = ColumnTypeEnum;
     }
-    /**
-     * @ignore
-     */
-    set matSort(matSort) {
-        this.dataSource.sort = matSort;
-        this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);
-    }
-    /**
-     * Data to be rendered
-     *
-     * @ignore
-     * @type {IDataSource}
-     * @memberof TableComponent
-     */
-    set tableData(data) {
-        if (data?.length) {
-            this.setTableDataSource(data);
-        }
-    }
-    ngOnInit() {
-        this.columnsToDisplay = this.tableColumns.map((tableColumn) => tableColumn.headerName);
-        if (this.tableDetailColumns) {
-            this.columnsDetailToDisplay = this.tableDetailColumns.columnDefs.map((tableColumn) => tableColumn.headerName);
-        }
-    }
     onSort(sortParams) {
         const columnSort = this.tableColumns.find((column) => column.headerName === sortParams.active);
         if (columnSort?.field) {
@@ -1542,8 +2954,8 @@ class TableComponent {
         this.dataSourceDetail = new MatTableDataSource(rowData);
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n      <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n      <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <div class=\"align-wrapper\">\n    <ng-container [ngSwitch]=\"tableColumn.type\">\n      <ng-container *ngSwitchCase=\"DataType.FIELD\">\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n        {{tableColumn.function?.(element)}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n        <ng-template\n          [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n      <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n      <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <div class=\"align-wrapper\">\n    <ng-container [ngSwitch]=\"tableColumn.type\">\n      <ng-container *ngSwitchCase=\"DataType.FIELD\">\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n        {{tableColumn.function?.(element)}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n        <ng-template\n          [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
         trigger('expandDetail', [
             state('collapsed, void', style({ height: '0px' })),
             state('expanded', style({ height: '*' })),
@@ -1551,7 +2963,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('expandDetail', [
@@ -1560,7 +2972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n      <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n      <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <div class=\"align-wrapper\">\n    <ng-container [ngSwitch]=\"tableColumn.type\">\n      <ng-container *ngSwitchCase=\"DataType.FIELD\">\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n        {{tableColumn.function?.(element)}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n        <ng-template\n          [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000;padding:16px}table .mat-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
+                    ], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n          <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n      <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n  multiTemplateDataRows>\n  <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n        arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n        [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n        <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n      [align]=\"tableColumn.styles?.alignment\"\n      [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n      <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n      <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n      <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n        [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n        <table mat-table [dataSource]=\"dataSourceDetail\">\n          <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n            [matColumnDef]=\"tableColumn.headerName\">\n            <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n              [ngStyle]=\"{width: tableColumn.styles?.width}\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n              {{tableColumn.headerName | uppercase}}\n            </th>\n            <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n              [align]=\"tableColumn.styles?.alignment\"\n              [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n              [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n              <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n          <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n        </table>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n  <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n    [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n    (click)=\"toggleRow(element)\">\n  </tr>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n  <div class=\"align-wrapper\">\n    <ng-container [ngSwitch]=\"tableColumn.type\">\n      <ng-container *ngSwitchCase=\"DataType.FIELD\">\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n        {{tableColumn.function?.(element)}}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n        <ng-template\n          [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        {{element | dataPropertyGetter: tableColumn.field}}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n  <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n    <span>{{tableColumn.headerName | uppercase}}</span>\n    <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n  </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\n"] }]
         }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -1582,10 +2994,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class TableComponentModule {
 }
-TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule], exports: [TableComponent] });
-TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, decorators: [{
+TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule], exports: [TableComponent] });
+TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective],
@@ -1595,11 +3007,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+class TagComponent {
+    constructor() {
+        /**
+         * Color
+         *
+         * @type {TagColor}
+         * @memberof TagComponent
+         */
+        this.color = 'teal';
+    }
+}
+TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagComponent, selector: "ui-tag", inputs: { text: "text", color: "color" }, ngImport: i0, template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tag', template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class TagComponentModule {
+}
+TagComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TagComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule], exports: [TagComponent] });
+TagComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TagComponent],
+                    imports: [CommonModule],
+                    exports: [TagComponent],
+                    providers: [],
+                }]
+        }] });
+
+var TooltipPositionType;
+(function (TooltipPositionType) {
+    TooltipPositionType["TOP"] = "top";
+    TooltipPositionType["BOTTOM"] = "bottom";
+    TooltipPositionType["LEFT"] = "left";
+    TooltipPositionType["RIGHT"] = "right";
+})(TooltipPositionType || (TooltipPositionType = {}));
+
+class TooltipComponent {
+    constructor() {
+        /**
+         * Allows the user to define the position of the tooltip relative to the parent element.
+         *
+         * @type {TooltipPositionType}
+         * @memberof TooltipComponent
+         */
+        this.position = TooltipPositionType.TOP;
+        /**
+         * The message to be displayed in the tooltip.
+         *
+         * @type {string}
+         * @memberof TooltipComponent
+         */
+        this.message = '';
+    }
+    ngOnInit() {
+        this.setPosition();
+    }
+    //set position
+    setPosition() {
+        switch (this.position) {
+            case TooltipPositionType.TOP:
+                this.matPosition = 'above';
+                break;
+            case TooltipPositionType.BOTTOM:
+                this.matPosition = 'below';
+                break;
+            default:
+                this.matPosition = this.position;
+                break;
+        }
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ui-tooltip", inputs: { position: "position", message: "message" }, ngImport: i0, template: "<div [matTooltip]=\"message\" [matTooltipPosition]=\"matPosition\" matTooltipClass=\"tooltip\" aria-label=\"tooltip\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [matTooltip]=\"message\" [matTooltipPosition]=\"matPosition\" matTooltipClass=\"tooltip\" aria-label=\"tooltip\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+class TooltipComponentModule {
+}
+TooltipComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TooltipComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponentModule, declarations: [TooltipComponent], imports: [MatTooltipModule], exports: [TooltipComponent] });
+TooltipComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponentModule, imports: [MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TooltipComponent],
+                    imports: [MatTooltipModule],
+                    exports: [TooltipComponent],
+                }]
+        }] });
+
 /* eslint-disable */
+/* Components */
+// Alert Banner
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponentModule, DialogService, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, TableComponent, TableComponentModule };
+export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponent, DialogComponentModule, DialogService, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, SnackbarComponent, SnackbarComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map