@testgorilla/tgo-ui 1.11.13 → 1.11.14

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -708,11 +708,11 @@ class ButtonComponent {
         this.buttonElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", variant: "variant", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value", tooltip: "tooltip", isPremium: "isPremium", type: "type", companyColor: "companyColor", buttonBadgeConfig: "buttonBadgeConfig" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"button-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n   <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n     <img [attr.src]=\"'/assets/images/premium.svg'\" [alt]=\"'premium-icon'\">\n   </span>\n  <ui-badge\n    *ngIf=\"buttonBadgeConfig?.badgeType\"\n    [variant]=\"buttonBadgeConfig?.badgeType ?? 'primary'\"\n    [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n    [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n    class=\"right-top\"\n  ></ui-badge>\n  <button\n    [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($event)\"\n    *ngIf=\"isButtonLink\"\n    [type]=\"type\"\n    #buttonElement\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    #buttonElement\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($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</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex}:host .button-wrapper.full-width{width:100%}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.cdk-focused,button.mat-mdc-unelevated-button.secondary:focus.cdk-focused,button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,button.mat-mdc-unelevated-button.destructive:focus.cdk-focused,button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,button.mat-mdc-unelevated-button.link:focus.cdk-focused,button.mat-mdc-unelevated-button.tab:focus.cdk-focused,button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}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 ::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 .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,a.mat-mdc-unelevated-button.outlined:focus.cdk-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 ::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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}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,a.mat-mdc-unelevated-button.text:focus.cdk-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 .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:-moz-fit-content;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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"] }, { 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"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", variant: "variant", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value", tooltip: "tooltip", isPremium: "isPremium", type: "type", companyColor: "companyColor", buttonBadgeConfig: "buttonBadgeConfig" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"button-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n   <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n     <img [attr.src]=\"'/assets/images/premium.svg'\" [alt]=\"'premium-icon'\">\n   </span>\n  <ui-badge\n    *ngIf=\"buttonBadgeConfig?.badgeType\"\n    [variant]=\"buttonBadgeConfig?.badgeType ?? 'primary'\"\n    [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n    [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n    class=\"right-top\"\n  ></ui-badge>\n  <button\n    [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($event)\"\n    *ngIf=\"isButtonLink\"\n    [type]=\"type\"\n    #buttonElement\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    #buttonElement\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($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</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex}:host .button-wrapper.full-width{width:100%}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.cdk-focused,button.mat-mdc-unelevated-button.secondary:focus.cdk-focused,button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,button.mat-mdc-unelevated-button.destructive:focus.cdk-focused,button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,button.mat-mdc-unelevated-button.link:focus.cdk-focused,button.mat-mdc-unelevated-button.tab:focus.cdk-focused,button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}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 ::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 .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,a.mat-mdc-unelevated-button.outlined:focus.cdk-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 ::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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}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,a.mat-mdc-unelevated-button.text:focus.cdk-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 .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:-moz-fit-content;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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"] }, { 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"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-button', template: "<div class=\"button-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n   <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n     <img [attr.src]=\"'/assets/images/premium.svg'\" [alt]=\"'premium-icon'\">\n   </span>\n  <ui-badge\n    *ngIf=\"buttonBadgeConfig?.badgeType\"\n    [variant]=\"buttonBadgeConfig?.badgeType ?? 'primary'\"\n    [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n    [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n    class=\"right-top\"\n  ></ui-badge>\n  <button\n    [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($event)\"\n    *ngIf=\"isButtonLink\"\n    [type]=\"type\"\n    #buttonElement\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    #buttonElement\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($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</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex}:host .button-wrapper.full-width{width:100%}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.cdk-focused,button.mat-mdc-unelevated-button.secondary:focus.cdk-focused,button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,button.mat-mdc-unelevated-button.destructive:focus.cdk-focused,button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,button.mat-mdc-unelevated-button.link:focus.cdk-focused,button.mat-mdc-unelevated-button.tab:focus.cdk-focused,button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}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 ::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 .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,a.mat-mdc-unelevated-button.outlined:focus.cdk-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 ::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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}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,a.mat-mdc-unelevated-button.text:focus.cdk-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 .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:-moz-fit-content;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-button', template: "<div class=\"button-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n   <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n     <img [attr.src]=\"'/assets/images/premium.svg'\" [alt]=\"'premium-icon'\">\n   </span>\n  <ui-badge\n    *ngIf=\"buttonBadgeConfig?.badgeType\"\n    [variant]=\"buttonBadgeConfig?.badgeType ?? 'primary'\"\n    [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n    [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n    class=\"right-top\"\n  ></ui-badge>\n  <button\n    [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($event)\"\n    *ngIf=\"isButtonLink\"\n    [type]=\"type\"\n    #buttonElement\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    #buttonElement\n    [ngClass]=\"classCss\"\n    [ngStyle]=\"styleCss\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick($event)\"\n    (mouseenter)=\"buttonHover($event)\"\n    (mouseleave)=\"buttonHover($event)\"\n    (mousedown)=\"onPressed($event)\"\n    (mouseup)=\"onPressed($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</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex}:host .button-wrapper.full-width{width:100%}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.cdk-focused,button.mat-mdc-unelevated-button.secondary:focus.cdk-focused,button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,button.mat-mdc-unelevated-button.destructive:focus.cdk-focused,button.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,button.mat-mdc-unelevated-button.link:focus.cdk-focused,button.mat-mdc-unelevated-button.tab:focus.cdk-focused,button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}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 ::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 .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,a.mat-mdc-unelevated-button.outlined:focus.cdk-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 ::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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}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 ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}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,a.mat-mdc-unelevated-button.text:focus.cdk-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 .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:-moz-fit-content;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }], variant: [{
@@ -3417,11 +3417,11 @@ class TagComponent {
         return this.readOnly || this.allowClose || this.isSelected;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -4242,7 +4242,7 @@ class ToggleComponent {
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled  }\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    [tabIndex]=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ 'active': selected }\"\n    (click)=\"onToggle()\"\n  >\n    <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n         (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n    </div>\n    <div class=\"knob\"></div>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }] }); }
+        ], ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled  }\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    [tabIndex]=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ 'active': selected }\"\n    (click)=\"onToggle()\"\n  >\n    <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n         (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n    </div>\n    <div class=\"knob\"></div>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -4252,7 +4252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled  }\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    [tabIndex]=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ 'active': selected }\"\n    (click)=\"onToggle()\"\n  >\n    <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n         (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n    </div>\n    <div class=\"knob\"></div>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+                    ], template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled  }\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    [tabIndex]=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ 'active': selected }\"\n    (click)=\"onToggle()\"\n  >\n    <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n         (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n    </div>\n    <div class=\"knob\"></div>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { selected: [{
                 type: Input
             }], disabled: [{
@@ -4362,11 +4362,11 @@ class AvatarComponent {
         this.editClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size]\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n  <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n    <ui-button\n      [size]=\"'small'\"\n      [iconName]=\"'Edit'\"\n      [variant]=\"'icon-button'\"\n      [tooltip]=\"tooltipText\"\n      (buttonClickEvent)=\"onEditClick($event)\"\n    ></ui-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: NameInitialsPipe, name: "nameInitials" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size]\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n  <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n    <ui-button\n      [size]=\"'small'\"\n      [iconName]=\"'Edit'\"\n      [variant]=\"'icon-button'\"\n      [tooltip]=\"tooltipText\"\n      (buttonClickEvent)=\"onEditClick($event)\"\n    ></ui-button>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: NameInitialsPipe, name: "nameInitials" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-avatar', template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size]\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n  <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n    <ui-button\n      [size]=\"'small'\"\n      [iconName]=\"'Edit'\"\n      [variant]=\"'icon-button'\"\n      [tooltip]=\"tooltipText\"\n      (buttonClickEvent)=\"onEditClick($event)\"\n    ></ui-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-avatar', template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size]\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n  <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n    <ui-button\n      [size]=\"'small'\"\n      [iconName]=\"'Edit'\"\n      [variant]=\"'icon-button'\"\n      [tooltip]=\"tooltipText\"\n      (buttonClickEvent)=\"onEditClick($event)\"\n    ></ui-button>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], imageUrl: [{
@@ -5484,11 +5484,11 @@ class TableComponent {
         this.sortChange.emit(sortState);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading" }, outputs: { paginatorChange: "paginatorChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n  <div class=\"table-wrapper\">\n    <table\n      mat-table\n      [dataSource]=\"tableData\"\n      matSort\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n      (matSortChange)=\"onSortChange($event)\"\n    >\n\n      <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                mat-sort-header\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n  <ui-paginator\n    [disabled]=\"loading\"\n    [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n    [length]=\"tableConfig.pagination.totalItems\"\n    [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n    (paginatorChange)=\"onPaginatorChange($event)\"\n  ></ui-paginator>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: "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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled"], outputs: ["paginatorChange"] }, { 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: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading" }, outputs: { paginatorChange: "paginatorChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n  <div class=\"table-wrapper\">\n    <table\n      mat-table\n      [dataSource]=\"tableData\"\n      matSort\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n      (matSortChange)=\"onSortChange($event)\"\n    >\n\n      <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                mat-sort-header\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n  <ui-paginator\n    [disabled]=\"loading\"\n    [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n    [length]=\"tableConfig.pagination.totalItems\"\n    [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n    (paginatorChange)=\"onPaginatorChange($event)\"\n  ></ui-paginator>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: "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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled"], outputs: ["paginatorChange"] }, { 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: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n  <div class=\"table-wrapper\">\n    <table\n      mat-table\n      [dataSource]=\"tableData\"\n      matSort\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n      (matSortChange)=\"onSortChange($event)\"\n    >\n\n      <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                mat-sort-header\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n  <ui-paginator\n    [disabled]=\"loading\"\n    [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n    [length]=\"tableConfig.pagination.totalItems\"\n    [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n    (paginatorChange)=\"onPaginatorChange($event)\"\n  ></ui-paginator>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n  <div class=\"table-wrapper\">\n    <table\n      mat-table\n      [dataSource]=\"tableData\"\n      matSort\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n      (matSortChange)=\"onSortChange($event)\"\n    >\n\n      <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n            <th mat-header-cell\n                *matHeaderCellDef\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                mat-sort-header\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n            <th mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                mat-sort-header\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n          <ng-container [matColumnDef]=\"column.key\">\n            <th mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n            >\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n                <ng-container\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n              </ng-container>\n              <ng-template #configValue>\n                 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n                       class=\"column-title\">{{ column.title }}</span>\n              </ng-template>\n            </th>\n\n            <td mat-cell\n                *matCellDef=\"let element\"\n                [style.width]=\"column.widthPerc + '%'\"\n                [style.min-width]=\"column.minWidthPx + 'px'\"\n            >\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n                           *ngIf=\"loading; else value\"></ui-skeleton>\n              <ng-template #value>\n                <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n                  <ng-container\n                    *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n                </ng-container>\n                <ng-template #configData>\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </ng-container>\n\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n  <ui-paginator\n    [disabled]=\"loading\"\n    [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n    [length]=\"tableConfig.pagination.totalItems\"\n    [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n    (paginatorChange)=\"onPaginatorChange($event)\"\n  ></ui-paginator>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5631,11 +5631,11 @@ class SideSheetComponent {
         this.drawer.toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideSheetComponent, deps: [{ token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow_left'\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span [matTooltip]=\"showTitleTooltip ? title : ''\">{{ title }}</span>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#F6F6F6}.side-sheet-container .side-sheet-content .header{background:#F6F6F6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:16px 0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5$4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow_left'\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span [matTooltip]=\"showTitleTooltip ? title : ''\">{{ title }}</span>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#F6F6F6}.side-sheet-container .side-sheet-content .header{background:#F6F6F6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:16px 0}}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5$4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow_left'\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span [matTooltip]=\"showTitleTooltip ? title : ''\">{{ title }}</span>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#F6F6F6}.side-sheet-container .side-sheet-content .header{background:#F6F6F6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:16px 0}}\n"] }]
+            args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow_left'\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span [matTooltip]=\"showTitleTooltip ? title : ''\">{{ title }}</span>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#F6F6F6}.side-sheet-container .side-sheet-content .header{background:#F6F6F6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:16px 0}}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: function () { return [{ type: SideSheetService }, { type: i0.DestroyRef }]; }, propDecorators: { position: [{
                 type: Input
             }], language: [{
@@ -5804,7 +5804,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: i5$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: i5$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -5814,7 +5814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:600;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"slider-container\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n    <div class=\"slider\">\n      <div class=\"min-value\">{{ percentage ? min + '%' : min }}</div>\n      <mat-slider #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderStart\"\n          matSliderStartThumb\n        >\n        <input\n          [disabled]=\"disabled\"\n          (valueChange)=\"onValueChange()\"\n          [(ngModel)]=\"sliderEnd\"\n          matSliderEndThumb\n        >\n      </mat-slider>\n      <div class=\"max-value\">{{ percentage ? max + '%' : max }}</div>\n    </div>\n\n    <div class=\"slider-input\" *ngIf=\"showInputs\">\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderStart\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('start')\"\n          (keydown.enter)=\"onInputBlur('start')\"\n        >\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"'outline'\">\n        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\n        <input\n          matInput\n          [type]=\"'number'\"\n          [(ngModel)]=\"sliderEnd\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur('end')\"\n          (keydown.enter)=\"onInputBlur('end')\"\n        >\n      </mat-form-field>\n    </div>\n\n    <mat-error *ngIf=\"hasError && touchedControlName\">\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n      </div>\n\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n      </div>\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n        <ui-icon [name]=\"'Info'\"></ui-icon>\n        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n      </div>\n    </mat-error>\n  </div>\n</ng-container>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled{pointer-events:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#A9C2C9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { max: [{
                 type: Input
             }], min: [{
@@ -5899,11 +5899,11 @@ class SegmentedBarComponent {
         this.segments = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedBarComponent, selector: "ui-segmented-bar", inputs: { width: "width", size: "size", segments: "segments" }, ngImport: i0, template: "<div class=\"segmented-bar-container\" [ngClass]=\"'segment-size-' + size\" [style.width]=\"width\">\n  <div\n    class=\"segmented-bar\"\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"segment.color\"\n    [ngStyle]=\"{ flex: segment.value }\"\n    [matTooltip]=\"segment.tooltip ?? ''\"\n  >\n    <span>{{ segment.value }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46A997}.segmented-bar-container .segmented-bar.teal{background:#46A997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#CBD6CB}.segmented-bar-container .segmented-bar.grey{background:#EDEDED}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedBarComponent, selector: "ui-segmented-bar", inputs: { width: "width", size: "size", segments: "segments" }, ngImport: i0, template: "<div class=\"segmented-bar-container\" [ngClass]=\"'segment-size-' + size\" [style.width]=\"width\">\n  <div\n    class=\"segmented-bar\"\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"segment.color\"\n    [ngStyle]=\"{ flex: segment.value }\"\n    [matTooltip]=\"segment.tooltip ?? ''\"\n  >\n    <span>{{ segment.value }}</span>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46A997}.segmented-bar-container .segmented-bar.teal{background:#46A997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#CBD6CB}.segmented-bar-container .segmented-bar.grey{background:#EDEDED}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-segmented-bar', template: "<div class=\"segmented-bar-container\" [ngClass]=\"'segment-size-' + size\" [style.width]=\"width\">\n  <div\n    class=\"segmented-bar\"\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"segment.color\"\n    [ngStyle]=\"{ flex: segment.value }\"\n    [matTooltip]=\"segment.tooltip ?? ''\"\n  >\n    <span>{{ segment.value }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46A997}.segmented-bar-container .segmented-bar.teal{background:#46A997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#CBD6CB}.segmented-bar-container .segmented-bar.grey{background:#EDEDED}\n"] }]
+            args: [{ selector: 'ui-segmented-bar', template: "<div class=\"segmented-bar-container\" [ngClass]=\"'segment-size-' + size\" [style.width]=\"width\">\n  <div\n    class=\"segmented-bar\"\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"segment.color\"\n    [ngStyle]=\"{ flex: segment.value }\"\n    [matTooltip]=\"segment.tooltip ?? ''\"\n  >\n    <span>{{ segment.value }}</span>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46A997}.segmented-bar-container .segmented-bar.teal{background:#46A997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#CBD6CB}.segmented-bar-container .segmented-bar.grey{background:#EDEDED}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], size: [{
@@ -6033,11 +6033,11 @@ class AccordionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionComponent, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText" }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n  <mat-expansion-panel [expanded]=\"open\"\n                       (opened)=\"toggle(true)\"\n                       (closed)=\"toggle(false)\">\n    <mat-expansion-panel-header >\n      <mat-panel-title>\n        <div class=\"accordion-label\">\n          {{ label }}\n          <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#EDEDED;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#F6F6F6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$3.MatExpansionPanelDescription, selector: "mat-panel-description" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionComponent, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText" }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n  <mat-expansion-panel [expanded]=\"open\"\n                       (opened)=\"toggle(true)\"\n                       (closed)=\"toggle(false)\">\n    <mat-expansion-panel-header >\n      <mat-panel-title>\n        <div class=\"accordion-label\">\n          {{ label }}\n          <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#EDEDED;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#F6F6F6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$3.MatExpansionPanelDescription, selector: "mat-panel-description" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-accordion', template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n  <mat-expansion-panel [expanded]=\"open\"\n                       (opened)=\"toggle(true)\"\n                       (closed)=\"toggle(false)\">\n    <mat-expansion-panel-header >\n      <mat-panel-title>\n        <div class=\"accordion-label\">\n          {{ label }}\n          <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: [".bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#EDEDED;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#F6F6F6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}\n"] }]
+            args: [{ selector: 'ui-accordion', template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n  <mat-expansion-panel [expanded]=\"open\"\n                       (opened)=\"toggle(true)\"\n                       (closed)=\"toggle(false)\">\n    <mat-expansion-panel-header >\n      <mat-panel-title>\n        <div class=\"accordion-label\">\n          {{ label }}\n          <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n        </div>\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1C443C}.bg-teal-30b{background:#31766A}.bg-teal-default{background:#46A997}.bg-teal-30w{background:#7EC3B6}.bg-teal-60w{background:#B5DDD5}.bg-teal-secondary{background:#CBD6CB}.bg-teal-90w{background:#ECF6F5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1B4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894A0}.bg-petrol-60w{background:#A9C2C9}.bg-petrol-secondary{background:#C8D7DE}.bg-petrol-90w{background:#E9F0F1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8E5655}.bg-error-60w{background:#E3C3C6}.bg-error-secondary{background:#F0DAD9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#F0D6BB}.bg-warning-default{background:#cca45f}.bg-black{background:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#EDEDED;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#F6F6F6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: [{ required: true }]