@testgorilla/tgo-ui 2.23.27 → 2.23.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/dialog/dialog.component.d.ts +29 -3
- package/components/dialog/dialog.service.d.ts +1 -1
- package/components/field/field.component.d.ts +3 -2
- package/components/file-upload/file-upload.component.d.ts +4 -1
- package/components/scale/scale.component.d.ts +18 -3
- package/components/side-sheet/side-sheet.component.d.ts +1 -0
- package/esm2022/assets/i18n/en.json +4 -2
- package/esm2022/components/button/button.component.mjs +2 -2
- package/esm2022/components/confirm-dialog/confirm-dialog.component.mjs +1 -1
- package/esm2022/components/dialog/dialog.component.mjs +51 -10
- package/esm2022/components/dialog/dialog.service.mjs +3 -2
- package/esm2022/components/field/field.component.mjs +8 -5
- package/esm2022/components/file-upload/file-upload.component.mjs +38 -17
- package/esm2022/components/overflow-menu/overflow-menu.component.mjs +8 -8
- package/esm2022/components/scale/scale.component.mjs +32 -4
- package/esm2022/components/side-sheet/side-sheet.component.mjs +10 -4
- package/esm2022/utils/hex-to-rgb.mjs +9 -0
- package/fesm2022/testgorilla-tgo-ui.mjs +154 -44
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/assets/i18n/en.json +4 -2
- package/projects/tgo-canopy-ui/theme/_button.scss +2 -2
- package/utils/hex-to-rgb.d.ts +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { trigger, transition, animate, style, state } from '@angular/animations';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, Directive, Output, HostListener, Pipe, booleanAttribute, ViewChild, ChangeDetectionStrategy, NgModule, Self, signal, forwardRef, ViewContainerRef, Host, InjectionToken, inject, PLATFORM_ID, input, TemplateRef, effect, DestroyRef, ViewChildren
|
|
3
|
+
import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, Directive, Output, HostListener, Pipe, booleanAttribute, ViewChild, ChangeDetectionStrategy, NgModule, Self, signal, ElementRef, forwardRef, ViewContainerRef, Host, InjectionToken, inject, PLATFORM_ID, input, TemplateRef, effect, DestroyRef, ViewChildren } from '@angular/core';
|
|
4
4
|
import * as i2 from '@angular/platform-browser';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
6
|
import { CommonModule, NgIf, NgForOf, NgClass, NgTemplateOutlet, formatDate, isPlatformBrowser, NgOptimizedImage } from '@angular/common';
|
|
@@ -1360,7 +1360,8 @@ var COMMON$b = {
|
|
|
1360
1360
|
OFF: "Off"
|
|
1361
1361
|
};
|
|
1362
1362
|
var DIALOG$b = {
|
|
1363
|
-
CLOSE_LABEL: "Close dialog"
|
|
1363
|
+
CLOSE_LABEL: "Close dialog",
|
|
1364
|
+
CLOSED: "Dialog closed"
|
|
1364
1365
|
};
|
|
1365
1366
|
var FIELD$b = {
|
|
1366
1367
|
VIEW_PASSWORD: "View password"
|
|
@@ -1375,7 +1376,8 @@ var FILE_UPLOAD$b = {
|
|
|
1375
1376
|
MIN_SIZE_ERROR: "Upload a file larger than ({{min}} MB)",
|
|
1376
1377
|
UPLOADING: "Uploading",
|
|
1377
1378
|
SUPPORTED_FILE_TYPES: "Supported file types:",
|
|
1378
|
-
CHANGE: "Change"
|
|
1379
|
+
CHANGE: "Change",
|
|
1380
|
+
FILE_UPLOADING_SUCCESS: "File uploaded successfully"
|
|
1379
1381
|
};
|
|
1380
1382
|
var NAVBAR$b = {
|
|
1381
1383
|
LOG_OUT: "Log out"
|
|
@@ -2889,11 +2891,11 @@ class ButtonComponent {
|
|
|
2889
2891
|
this.labelEllipsis = state;
|
|
2890
2892
|
}
|
|
2891
2893
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", 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", applicationTheme: "applicationTheme", disabledScaleOnClick: "disabledScaleOnClick", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", language: "language", preventDefault: ["preventDefault", "preventDefault", booleanAttribute], tooltipPosition: "tooltipPosition" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.pointer-events": "this.enabled", "attr.btn-variant": "this.variant", "attr.theme": "this.applicationTheme", "style.--color": "this.compColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltipElement"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\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 (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\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 (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{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 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}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.ghost,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.ghost,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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}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{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}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:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .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.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}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{border-color:#919191;color:#919191;background:transparent}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:#e02800}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:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .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{opacity:.75;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:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}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:#d3d3d3}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.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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: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:#d3d3d3}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:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}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:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .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.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.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.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}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:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.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 .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\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", "filled", "applicationTheme"] }, { 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", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
2894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", 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", applicationTheme: "applicationTheme", disabledScaleOnClick: "disabledScaleOnClick", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", language: "language", preventDefault: ["preventDefault", "preventDefault", booleanAttribute], tooltipPosition: "tooltipPosition" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.pointer-events": "this.enabled", "attr.btn-variant": "this.variant", "attr.theme": "this.applicationTheme", "style.--color": "this.compColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltipElement"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\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 (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\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 (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{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 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}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.ghost,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.ghost,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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}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{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}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:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .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.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}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{border-color:#919191;color:#919191;background:transparent}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:#e02800}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:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .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{opacity:.75;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:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px}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:#d3d3d3}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.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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: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:#d3d3d3}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:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}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:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .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.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.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.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}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:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.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 .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\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", "filled", "applicationTheme"] }, { 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", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
2893
2895
|
}
|
|
2894
2896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
2895
2897
|
type: Component,
|
|
2896
|
-
args: [{ selector: 'ui-button', template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\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 (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\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 (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{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 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}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.ghost,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.ghost,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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}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{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}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:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .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.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}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{border-color:#919191;color:#919191;background:transparent}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:#e02800}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:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .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{opacity:.75;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:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}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:#d3d3d3}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.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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: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:#d3d3d3}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:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}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:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .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.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.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.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}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:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.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 .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\n"] }]
|
|
2898
|
+
args: [{ selector: 'ui-button', template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\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 (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\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 (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{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 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}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.ghost,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.ghost,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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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.ghost.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,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}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{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}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:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .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.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}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{border-color:#919191;color:#919191;background:transparent}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:#e02800}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:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .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{opacity:.75;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:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px}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:#d3d3d3}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.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}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: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:#d3d3d3}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:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}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:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .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.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.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.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}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:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.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 .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\n"] }]
|
|
2897
2899
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2898
2900
|
type: Optional
|
|
2899
2901
|
}, {
|
|
@@ -3770,6 +3772,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
3770
3772
|
}] });
|
|
3771
3773
|
|
|
3772
3774
|
class DialogComponent {
|
|
3775
|
+
onEsc(_) {
|
|
3776
|
+
this.dismiss();
|
|
3777
|
+
}
|
|
3773
3778
|
constructor(defaultAppTheme, dialogRef, data) {
|
|
3774
3779
|
this.defaultAppTheme = defaultAppTheme;
|
|
3775
3780
|
this.dialogRef = dialogRef;
|
|
@@ -3863,9 +3868,31 @@ class DialogComponent {
|
|
|
3863
3868
|
* @memberof DialogComponent
|
|
3864
3869
|
*/
|
|
3865
3870
|
this.shouldDisableButtons = true;
|
|
3871
|
+
/**
|
|
3872
|
+
* A string representing the ARIA requirement for accessibility.
|
|
3873
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
3874
|
+
* @type {string}
|
|
3875
|
+
* @memberof DialogComponent
|
|
3876
|
+
*/
|
|
3877
|
+
this.ariaLabelledby = '';
|
|
3878
|
+
/**
|
|
3879
|
+
* A string representing the ARIA requirement for accessibility.
|
|
3880
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
3881
|
+
* @type {string}
|
|
3882
|
+
* @memberof DialogComponent
|
|
3883
|
+
*/
|
|
3884
|
+
this.ariaDescribedby = '';
|
|
3885
|
+
/**
|
|
3886
|
+
* Defines how modal was opened (with keyboard or not)
|
|
3887
|
+
*
|
|
3888
|
+
* @type {boolean}
|
|
3889
|
+
* @memberof DialogComponent
|
|
3890
|
+
*/
|
|
3891
|
+
this.keyboardOpen = false;
|
|
3866
3892
|
this.closeEvent = new EventEmitter();
|
|
3867
3893
|
this.secondaryButtonClickEvent = new EventEmitter();
|
|
3868
3894
|
this.primaryButtonClickEvent = new EventEmitter();
|
|
3895
|
+
this.modalClosed = false;
|
|
3869
3896
|
this.disableButtons = false;
|
|
3870
3897
|
this.translationContext = 'DIALOG.';
|
|
3871
3898
|
if (defaultAppTheme) {
|
|
@@ -3891,24 +3918,28 @@ class DialogComponent {
|
|
|
3891
3918
|
this.areButtonsDisabled();
|
|
3892
3919
|
}
|
|
3893
3920
|
}
|
|
3921
|
+
ngAfterViewInit() {
|
|
3922
|
+
if (this.keyboardOpen) {
|
|
3923
|
+
setTimeout(() => {
|
|
3924
|
+
this.closeButton.buttonElement.focus('keyboard');
|
|
3925
|
+
}, 100);
|
|
3926
|
+
}
|
|
3927
|
+
}
|
|
3894
3928
|
//Disable primary button when canClose is false
|
|
3895
3929
|
areButtonsDisabled() {
|
|
3896
|
-
|
|
3897
|
-
this.disableButtons = true;
|
|
3898
|
-
}
|
|
3899
|
-
else {
|
|
3900
|
-
this.disableButtons = false;
|
|
3901
|
-
}
|
|
3930
|
+
this.disableButtons = !this.canCloseFn() && this.shouldDisableButtons;
|
|
3902
3931
|
}
|
|
3903
3932
|
//Close modal
|
|
3904
3933
|
dismiss() {
|
|
3905
3934
|
if (this.canCloseFn()) {
|
|
3906
3935
|
this.dialogRef.disableClose = false;
|
|
3907
3936
|
this.dialogRef.close();
|
|
3937
|
+
this.modalClosed = true;
|
|
3908
3938
|
}
|
|
3909
3939
|
}
|
|
3910
3940
|
onClose(event) {
|
|
3911
3941
|
this.closeEvent.emit(event);
|
|
3942
|
+
this.modalClosed = true;
|
|
3912
3943
|
}
|
|
3913
3944
|
onSecondaryButtonClick(event) {
|
|
3914
3945
|
this.secondaryButtonClickEvent.emit(event);
|
|
@@ -3917,11 +3948,11 @@ class DialogComponent {
|
|
|
3917
3948
|
this.primaryButtonClickEvent.emit(event);
|
|
3918
3949
|
}
|
|
3919
3950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", language: "language", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div
|
|
3951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", language: "language", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3921
3952
|
}
|
|
3922
3953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, decorators: [{
|
|
3923
3954
|
type: Component,
|
|
3924
|
-
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div
|
|
3955
|
+
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;flex-flow:column}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
|
|
3925
3956
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3926
3957
|
type: Optional
|
|
3927
3958
|
}, {
|
|
@@ -3959,12 +3990,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
3959
3990
|
type: Input
|
|
3960
3991
|
}], shouldDisableButtons: [{
|
|
3961
3992
|
type: Input
|
|
3993
|
+
}], ariaLabelledby: [{
|
|
3994
|
+
type: Input
|
|
3995
|
+
}], ariaDescribedby: [{
|
|
3996
|
+
type: Input
|
|
3997
|
+
}], keyboardOpen: [{
|
|
3998
|
+
type: Input
|
|
3962
3999
|
}], closeEvent: [{
|
|
3963
4000
|
type: Output
|
|
3964
4001
|
}], secondaryButtonClickEvent: [{
|
|
3965
4002
|
type: Output
|
|
3966
4003
|
}], primaryButtonClickEvent: [{
|
|
3967
4004
|
type: Output
|
|
4005
|
+
}], closeButton: [{
|
|
4006
|
+
type: ViewChild,
|
|
4007
|
+
args: ['closeButton']
|
|
4008
|
+
}], onEsc: [{
|
|
4009
|
+
type: HostListener,
|
|
4010
|
+
args: ['keydown.esc', ['$event']]
|
|
3968
4011
|
}] } });
|
|
3969
4012
|
|
|
3970
4013
|
class DialogService {
|
|
@@ -3972,12 +4015,13 @@ class DialogService {
|
|
|
3972
4015
|
this.matDialog = matDialog;
|
|
3973
4016
|
this.defaultAppTheme = defaultAppTheme;
|
|
3974
4017
|
}
|
|
3975
|
-
open(dialogComponent, applicationTheme = 'light', size = 'small', panelClass = '', extraData, backdropClass = '') {
|
|
4018
|
+
open(dialogComponent, applicationTheme = 'light', size = 'small', panelClass = '', extraData, backdropClass = '', keyboardOpen = false) {
|
|
3976
4019
|
// Open the dialog using UI custom styles
|
|
3977
4020
|
return this.matDialog.open(dialogComponent, {
|
|
3978
4021
|
data: {
|
|
3979
4022
|
applicationTheme: this.defaultAppTheme ?? applicationTheme,
|
|
3980
4023
|
...extraData,
|
|
4024
|
+
keyboardOpen,
|
|
3981
4025
|
},
|
|
3982
4026
|
backdropClass: backdropClass || '',
|
|
3983
4027
|
panelClass: applicationTheme === 'classic'
|
|
@@ -4255,7 +4299,7 @@ class FieldComponent {
|
|
|
4255
4299
|
* @type {Boolean}
|
|
4256
4300
|
* @memberof FieldComponent
|
|
4257
4301
|
*/
|
|
4258
|
-
this.allowNegative =
|
|
4302
|
+
this.allowNegative = false;
|
|
4259
4303
|
/**
|
|
4260
4304
|
* The language to be used
|
|
4261
4305
|
* @property language
|
|
@@ -4515,8 +4559,11 @@ class FieldComponent {
|
|
|
4515
4559
|
onBlur() {
|
|
4516
4560
|
this.fieldBlur.emit();
|
|
4517
4561
|
}
|
|
4562
|
+
focus() {
|
|
4563
|
+
this.field.nativeElement.focus();
|
|
4564
|
+
}
|
|
4518
4565
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: "fullWidth", label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type", updateOnBlur: "updateOnBlur", allowOnlyDigits: "allowOnlyDigits", allowNegative: "allowNegative", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", loading: "loading", isValid: "isValid", maxCharacters: "maxCharacters", trimOnBlur: "trimOnBlur", trimOnSubmit: "trimOnSubmit", maxRows: "maxRows", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", max: "max", min: "min", textareaHeight: "textareaHeight", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", hasError: "hasError" }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line', 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"'ariaDescribedby'\">\n <span *ngIf=\"required\">{{ 'ERRORS.REQUIRED' | uiTranslate : language }}</span>\n {{ ariaDescribedby }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"'ariaLabelledby'\">\n {{ ariaLabelledby || label }}\n </span>\n <mat-label [id]=\"'label'\" *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }}</mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [ngIf]=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-template>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.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: "directive", type: i8.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: "fullWidth", label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type", updateOnBlur: "updateOnBlur", allowOnlyDigits: "allowOnlyDigits", allowNegative: "allowNegative", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", loading: "loading", isValid: "isValid", maxCharacters: "maxCharacters", trimOnBlur: "trimOnBlur", trimOnSubmit: "trimOnSubmit", maxRows: "maxRows", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", max: "max", min: "min", textareaHeight: "textareaHeight", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", hasError: "hasError" }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line', 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"'ariaDescribedby'\">\n <span *ngIf=\"required\">{{ 'ERRORS.REQUIRED' | uiTranslate : language }}</span>\n {{ ariaDescribedby }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"'ariaLabelledby'\">\n {{ ariaLabelledby || label }}\n </span>\n <mat-label [id]=\"'label'\" *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }}</mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [ngIf]=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-template>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.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: "directive", type: i8.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4520
4567
|
}
|
|
4521
4568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldComponent, decorators: [{
|
|
4522
4569
|
type: Component,
|
|
@@ -4611,7 +4658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
4611
4658
|
type: Output
|
|
4612
4659
|
}], field: [{
|
|
4613
4660
|
type: ViewChild,
|
|
4614
|
-
args: ['inputElement']
|
|
4661
|
+
args: ['inputElement', { read: ElementRef }]
|
|
4615
4662
|
}] } });
|
|
4616
4663
|
|
|
4617
4664
|
class FieldComponentModule {
|
|
@@ -4847,6 +4894,7 @@ class FileUploadComponent {
|
|
|
4847
4894
|
this.isMissedMinSize = false;
|
|
4848
4895
|
this.progress = false;
|
|
4849
4896
|
this.success = false;
|
|
4897
|
+
this.isCanceled = false;
|
|
4850
4898
|
if (defaultAppTheme) {
|
|
4851
4899
|
this.applicationTheme = defaultAppTheme;
|
|
4852
4900
|
}
|
|
@@ -4860,6 +4908,7 @@ class FileUploadComponent {
|
|
|
4860
4908
|
}
|
|
4861
4909
|
//When input changes
|
|
4862
4910
|
onChangeUpload(event) {
|
|
4911
|
+
this.isCanceled = false;
|
|
4863
4912
|
const element = event.currentTarget;
|
|
4864
4913
|
this.emitFile(element.files || new FileList());
|
|
4865
4914
|
}
|
|
@@ -4890,18 +4939,20 @@ class FileUploadComponent {
|
|
|
4890
4939
|
return !!(this.errors || this.isMissedMinSize);
|
|
4891
4940
|
}
|
|
4892
4941
|
ngOnChanges(changes) {
|
|
4893
|
-
if (
|
|
4894
|
-
|
|
4895
|
-
|
|
4896
|
-
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4942
|
+
if (!this.isCanceled) {
|
|
4943
|
+
if (changes['uploadProgress'] || changes['file']) {
|
|
4944
|
+
this.progress = this.showProgress();
|
|
4945
|
+
this.success = this.showSuccess();
|
|
4946
|
+
this.browse = this.showBrowse();
|
|
4947
|
+
}
|
|
4948
|
+
if (changes['errors']) {
|
|
4949
|
+
this.progress = this.showProgress();
|
|
4950
|
+
this.success = this.showSuccess();
|
|
4951
|
+
this.browse = this.showBrowse();
|
|
4952
|
+
}
|
|
4953
|
+
if (changes['applicationTheme']) {
|
|
4954
|
+
this.compColor = this.getCompanyColor();
|
|
4955
|
+
}
|
|
4905
4956
|
}
|
|
4906
4957
|
}
|
|
4907
4958
|
writeValue(value) {
|
|
@@ -4927,14 +4978,28 @@ class FileUploadComponent {
|
|
|
4927
4978
|
fileSizeToMB(fileSize) {
|
|
4928
4979
|
return fileSize / 1024 / 1024;
|
|
4929
4980
|
}
|
|
4981
|
+
onKeydown(ev) {
|
|
4982
|
+
if (ev.key === 'Enter' || ev.key === ' ') {
|
|
4983
|
+
this.fileDrop.nativeElement.click();
|
|
4984
|
+
}
|
|
4985
|
+
else if (ev.key === 'Escape') {
|
|
4986
|
+
this.file = null;
|
|
4987
|
+
this.success = false;
|
|
4988
|
+
this.progress = false;
|
|
4989
|
+
this.errors = null;
|
|
4990
|
+
this.isMissedMinSize = false;
|
|
4991
|
+
this.browse = true;
|
|
4992
|
+
this.isCanceled = true;
|
|
4993
|
+
}
|
|
4994
|
+
}
|
|
4930
4995
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FileUploadComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: FileUploadComponent, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", minFileSizeMB: "minFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", errors: "errors", disabled: "disabled", file: "file", language: "language", companyColor: "companyColor", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class", "style.--color": "this.compColor" } }, providers: [
|
|
4932
4997
|
{
|
|
4933
4998
|
provide: NG_VALUE_ACCESSOR,
|
|
4934
4999
|
useExisting: forwardRef(() => FileUploadComponent),
|
|
4935
5000
|
multi: true,
|
|
4936
5001
|
},
|
|
4937
|
-
], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n >\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>{{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n id=\"fileDrop\"\n (change)=\"onChangeUpload($event)\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <label for=\"fileDrop\"\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileDrop\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <label\n for=\"fileDrop\"\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n </div>\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\">\n <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
5002
|
+
], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate : language) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate : language) : '' }}\n </span>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n >\n <span [style.display]=\"'none'\" id=\"supported-file-types\" [attr.aria-live]=\"'polite'\">\n @if (errors?.length || isMissedMinSize) {\n @if (isMissedMinSize) {\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n } @else {\n {{ errors }}\n }\n } @else {\n {{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }} {{ supportedFileTypes }}\n }\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n id=\"fileDrop\"\n (change)=\"onChangeUpload($event)\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <label for=\"fileDrop\"\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileDrop\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <label\n for=\"fileDrop\"\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n </div>\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\">\n <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container:focus-visible{border-color:transparent!important;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
4938
5003
|
trigger('inOutAnimation', [
|
|
4939
5004
|
transition(':enter', [
|
|
4940
5005
|
style({ opacity: 0, height: 0 }),
|
|
@@ -5006,7 +5071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5006
5071
|
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
5007
5072
|
])
|
|
5008
5073
|
])
|
|
5009
|
-
], template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n >\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>{{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n id=\"fileDrop\"\n (change)=\"onChangeUpload($event)\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <label for=\"fileDrop\"\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileDrop\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <label\n for=\"fileDrop\"\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p>{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n </div>\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\">\n <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}\n"] }]
|
|
5074
|
+
], template: "<ng-container>\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate : language) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate : language) : '' }}\n </span>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n >\n <span [style.display]=\"'none'\" id=\"supported-file-types\" [attr.aria-live]=\"'polite'\">\n @if (errors?.length || isMissedMinSize) {\n @if (isMissedMinSize) {\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n } @else {\n {{ errors }}\n }\n } @else {\n {{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }} {{ supportedFileTypes }}\n }\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n id=\"fileDrop\"\n (change)=\"onChangeUpload($event)\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <label for=\"fileDrop\"\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileDrop\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <label\n for=\"fileDrop\"\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</label> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n </div>\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\">\n <span>{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container:focus-visible{border-color:transparent!important;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}\n"] }]
|
|
5010
5075
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5011
5076
|
type: Optional
|
|
5012
5077
|
}, {
|
|
@@ -5043,6 +5108,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5043
5108
|
type: Input
|
|
5044
5109
|
}], OnDrop: [{
|
|
5045
5110
|
type: Output
|
|
5111
|
+
}], fileDrop: [{
|
|
5112
|
+
type: ViewChild,
|
|
5113
|
+
args: ['fileDrop']
|
|
5046
5114
|
}] } });
|
|
5047
5115
|
|
|
5048
5116
|
class ProgressBarComponentModule {
|
|
@@ -5782,6 +5850,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5782
5850
|
}], ctorParameters: () => [{ type: i0.ApplicationRef }] });
|
|
5783
5851
|
|
|
5784
5852
|
class SideSheetComponent {
|
|
5853
|
+
onEscPress(_) {
|
|
5854
|
+
void this.drawer.close();
|
|
5855
|
+
}
|
|
5785
5856
|
constructor(defaultAppTheme, sideSheetService, destroyRef) {
|
|
5786
5857
|
this.defaultAppTheme = defaultAppTheme;
|
|
5787
5858
|
this.sideSheetService = sideSheetService;
|
|
@@ -5853,11 +5924,11 @@ class SideSheetComponent {
|
|
|
5853
5924
|
this.openChange.emit(isOpened);
|
|
5854
5925
|
}
|
|
5855
5926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SideSheetComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, 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\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #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]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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;background:transparent}.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;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px
|
|
5927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, host: { listeners: { "keydown.esc": "onEscPress($event)" } }, 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\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #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]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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;background:transparent}.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;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 5px;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:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::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", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
5857
5928
|
}
|
|
5858
5929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SideSheetComponent, decorators: [{
|
|
5859
5930
|
type: Component,
|
|
5860
|
-
args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #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]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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;background:transparent}.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;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px
|
|
5931
|
+
args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #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]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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;background:transparent}.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;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 5px;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:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::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"] }]
|
|
5861
5932
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5862
5933
|
type: Optional
|
|
5863
5934
|
}, {
|
|
@@ -5877,6 +5948,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5877
5948
|
}], container: [{
|
|
5878
5949
|
type: ViewChild,
|
|
5879
5950
|
args: ['container', { read: ViewContainerRef, static: false }]
|
|
5951
|
+
}], onEscPress: [{
|
|
5952
|
+
type: HostListener,
|
|
5953
|
+
args: ['keydown.esc', ['$event']]
|
|
5880
5954
|
}] } });
|
|
5881
5955
|
|
|
5882
5956
|
class NavbarComponent {
|
|
@@ -7787,7 +7861,7 @@ class ConfirmDialogComponent {
|
|
|
7787
7861
|
}
|
|
7788
7862
|
}
|
|
7789
7863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate : lang)\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate : lang)\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate : lang)\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"false\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "language", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
7864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate : lang)\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate : lang)\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate : lang)\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"false\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "language", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
7791
7865
|
}
|
|
7792
7866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
7793
7867
|
type: Component,
|
|
@@ -8356,6 +8430,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8356
8430
|
}]
|
|
8357
8431
|
}] });
|
|
8358
8432
|
|
|
8433
|
+
const hexToRgbWithAlpha = (hex, alpha = 0.3) => {
|
|
8434
|
+
hex = hex.replace(/^#/, '');
|
|
8435
|
+
let bigint = parseInt(hex, 16);
|
|
8436
|
+
let r = (bigint >> 16) & 255;
|
|
8437
|
+
let g = (bigint >> 8) & 255;
|
|
8438
|
+
let b = bigint & 255;
|
|
8439
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
8440
|
+
};
|
|
8441
|
+
|
|
8359
8442
|
class ScaleComponent {
|
|
8360
8443
|
/**
|
|
8361
8444
|
* The max number of items in the scale.
|
|
@@ -8380,22 +8463,47 @@ class ScaleComponent {
|
|
|
8380
8463
|
* @memberof ScaleComponent
|
|
8381
8464
|
*/
|
|
8382
8465
|
this.applicationTheme = 'light';
|
|
8466
|
+
/**
|
|
8467
|
+
* Color of the option hover.
|
|
8468
|
+
* Defaults to Test Gorilla primary color.
|
|
8469
|
+
*
|
|
8470
|
+
* @type {string}
|
|
8471
|
+
* @memberof ScaleComponent
|
|
8472
|
+
*/
|
|
8473
|
+
this.companyColor = '';
|
|
8383
8474
|
this.selectedIndexChange = new EventEmitter();
|
|
8475
|
+
this.styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' });
|
|
8384
8476
|
if (defaultAppTheme) {
|
|
8385
8477
|
this.applicationTheme = defaultAppTheme;
|
|
8386
8478
|
}
|
|
8387
8479
|
this.length = this.DEFAULT_LENGTH;
|
|
8388
8480
|
}
|
|
8481
|
+
ngOnInit() {
|
|
8482
|
+
if (this.companyColor) {
|
|
8483
|
+
this.setCompanyColor();
|
|
8484
|
+
}
|
|
8485
|
+
}
|
|
8486
|
+
ngOnChanges(changes) {
|
|
8487
|
+
if (changes['companyColor']) {
|
|
8488
|
+
this.setCompanyColor();
|
|
8489
|
+
}
|
|
8490
|
+
}
|
|
8389
8491
|
select(index) {
|
|
8390
8492
|
this.selectedIndex = index;
|
|
8391
8493
|
this.selectedIndexChange.emit(this.selectedIndex);
|
|
8392
8494
|
}
|
|
8495
|
+
setCompanyColor() {
|
|
8496
|
+
const styles = this.styles();
|
|
8497
|
+
styles['--hover-color'] = hexToRgbWithAlpha(this.companyColor);
|
|
8498
|
+
styles['--selected-color'] = this.companyColor;
|
|
8499
|
+
this.styles.set(styles);
|
|
8500
|
+
}
|
|
8393
8501
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color
|
|
8502
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, outputs: { selectedIndexChange: "selectedIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8395
8503
|
}
|
|
8396
8504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScaleComponent, decorators: [{
|
|
8397
8505
|
type: Component,
|
|
8398
|
-
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color
|
|
8506
|
+
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
|
|
8399
8507
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8400
8508
|
type: Optional
|
|
8401
8509
|
}, {
|
|
@@ -8407,6 +8515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8407
8515
|
type: Input
|
|
8408
8516
|
}], applicationTheme: [{
|
|
8409
8517
|
type: Input
|
|
8518
|
+
}], companyColor: [{
|
|
8519
|
+
type: Input
|
|
8410
8520
|
}], selectedIndexChange: [{
|
|
8411
8521
|
type: Output
|
|
8412
8522
|
}] } });
|
|
@@ -11662,9 +11772,7 @@ class OverflowMenuComponent {
|
|
|
11662
11772
|
this.reindex();
|
|
11663
11773
|
}
|
|
11664
11774
|
ngAfterViewInit() {
|
|
11665
|
-
|
|
11666
|
-
this.isMenuRendered.set(true);
|
|
11667
|
-
});
|
|
11775
|
+
this.isMenuRendered.set(true);
|
|
11668
11776
|
setTimeout(() => {
|
|
11669
11777
|
this.focusMonitor.monitor(this.buttonElement).subscribe(origin => this.ngZone.run(() => {
|
|
11670
11778
|
if (origin === 'keyboard') {
|
|
@@ -11676,7 +11784,7 @@ class OverflowMenuComponent {
|
|
|
11676
11784
|
}
|
|
11677
11785
|
}
|
|
11678
11786
|
}));
|
|
11679
|
-
},
|
|
11787
|
+
}, 300);
|
|
11680
11788
|
}
|
|
11681
11789
|
onSelectItem(event, value) {
|
|
11682
11790
|
if (!!value) {
|
|
@@ -11744,9 +11852,11 @@ class OverflowMenuComponent {
|
|
|
11744
11852
|
}
|
|
11745
11853
|
onSubmenuOpened() {
|
|
11746
11854
|
this.isMenuOpened.set(!this.isMenuOpened);
|
|
11747
|
-
|
|
11748
|
-
|
|
11749
|
-
|
|
11855
|
+
if (this.isFocused()) {
|
|
11856
|
+
setTimeout(() => {
|
|
11857
|
+
this.matmenus.last._allItems.first.focus('keyboard');
|
|
11858
|
+
}, 300);
|
|
11859
|
+
}
|
|
11750
11860
|
}
|
|
11751
11861
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11752
11862
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: { buttons: "buttons", iconTrigger: "iconTrigger", menuLabel: "menuLabel", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", describedby: "describedby", language: "language" }, outputs: { selectItem: "selectItem", menuOpened: "menuOpened", menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }, { propertyName: "matmenus", predicate: MatMenu, descendants: true }, { propertyName: "matTrigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n\n <button\n #buttonElement\n mat-icon-button\n *ngIf=\"isMenuRendered()\"\n [matMenuTriggerFor]=\"matmenus.first\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"isMenuOpened()\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n [matTooltip]=\"menuLabel\"\n >\n <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n <ui-icon\n [name]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n ></ui-icon>\n </button>\n\n @for (menu of submenus; track menu) {\n <mat-menu #matMenu class=\"overflow-menu\" [overlapTrigger]=\"false\" backdropClass=\"overflow-menu-backdrop\">\n <ng-container *ngFor=\"let button of menu; index as id\">\n <ng-container\n *ngIf=\"button.btnTemplate; else uiButton\"\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n\n <ng-template #uiButton>\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n (menuOpened)=\"onSubmenuOpened()\"\n (focus)=\"onButtonFocus(button);\"\n (blur)=\"onButtonBlur(button)\"\n [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n [disableRipple]=\"true\"\n (click)=\"onButtonClick(button, $event)\"\n [matTooltip]=\"button.isTextEllipsed ? button.label : ''\"\n [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n [attr.aria-label]=\"button.ariaLabel || null\"\n role=\"menuitem\"\n matTooltipPosition=\"right\"\n >\n <span\n [id]=\"'describedby-' + button.label + id\"\n [style.display]=\"'none'\"\n >\n {{ button.disabled ? ('MENU.MENUITEM_DISABLED' | uiTranslate : language) + ' ' + (button.describedby || '') : button.describedby }}\n </span>\n <ui-icon\n [name]=\"button.icon\"\n [filled]=\"button.disabled ? false : !!button.isFocused\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"button.isDestructive ? 'red' : button.disabled ? 'dark' : 'rebrand-black'\"\n ></ui-icon>\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}</span>\n </button>\n </ng-template>\n </ng-container>\n\n <ng-content select=\"[menu-content]\"></ng-content>\n\n </mat-menu>\n }\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.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 ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;height:40px;width:40px;border-radius:50px;border:unset;display:flex;align-items:center;justify-content:center;cursor:pointer}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|