@testgorilla/tgo-ui 2.23.13 → 2.23.15

package/components/validation-error/validation-error.component.d.ts

@@ -5,6 +5,7 @@ import * as i0 from "@angular/core";
 export declare class ValidationErrorComponent {
     ngControl: NgControl;
     touchedOn: boolean;
+    errorMessage: string;
     label: string | undefined | null;
     /**
      *
@@ -24,5 +25,5 @@ export declare class ValidationErrorComponent {
     getErrorValue(type: errorType): number;
     translationContextErrors: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ValidationErrorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationErrorComponent, "ui-validation-error", never, { "ngControl": { "alias": "ngControl"; "required": false; }; "touchedOn": { "alias": "touchedOn"; "required": false; }; "label": { "alias": "label"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "language": { "alias": "language"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationErrorComponent, "ui-validation-error", never, { "ngControl": { "alias": "ngControl"; "required": false; }; "touchedOn": { "alias": "touchedOn"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "label": { "alias": "label"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "language": { "alias": "language"; "required": false; }; }, {}, never, never, false, never>;
 }

package/esm2022/components/autocomplete/autocomplete.component.mjs

@@ -564,7 +564,7 @@ export class AutocompleteComponent {
         return this.value ? !!Object.keys(this.value).length : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }, { token: i2.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"isOverLapping && i || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length }) }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value | slice: (!overlapIndex && isOverLapping ? 1 : overlapIndex )  ).length\"></ui-tag>\n            </div>\n          }\n        </div>\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"suggestionsList.length\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                *ngFor=\"let suggested of suggestionsList\"\n                [value]=\"suggested\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of value\"\n                [value]=\"item\"\n              >\n                <span>{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [class]=\"'selected-option'\"\n                [value]=\"value\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n          </ng-container>\n\n          <ng-template #dropdownList>\n            <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                         [style.height]=\"'200px'\" class=\"virtual-scroll\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *cdkVirtualFor=\"let item of itemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </cdk-virtual-scroll-viewport>\n\n            <ng-template #defaultViewPort>\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of itemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </ng-template>\n\n          </ng-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"filteredSuggestionList.length\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of filteredSuggestionList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of filteredItemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </ng-container>\n\n            <ng-template #showItemListWithGroup>\n              <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\"\n                            *ngIf=\"filteredItemsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-template>\n\n            <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n              <ng-container *ngIf=\"allowAdd; else notFound\">\n                <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n                  <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #notFound>\n                <mat-option [style.pointer-events]=\"'none'\">\n                  <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n                </mat-option>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </mat-autocomplete>\n      <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\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}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i10.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "label", "applicationTheme", "language"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i12.PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "directive", type: i13.SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i15.HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: i16.TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: i17.IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"isOverLapping && i || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length }) }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value | slice: (!overlapIndex && isOverLapping ? 1 : overlapIndex )  ).length\"></ui-tag>\n            </div>\n          }\n        </div>\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        <ng-container *ngIf=\"!(searchResult$ | async)\">\n          <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"suggestionsList.length\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                *ngFor=\"let suggested of suggestionsList\"\n                [value]=\"suggested\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of value\"\n                [value]=\"item\"\n              >\n                <span>{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [class]=\"'selected-option'\"\n                [value]=\"value\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n          </ng-container>\n\n          <ng-template #dropdownList>\n            <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                         [style.height]=\"'200px'\" class=\"virtual-scroll\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *cdkVirtualFor=\"let item of itemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </cdk-virtual-scroll-viewport>\n\n            <ng-template #defaultViewPort>\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of itemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </ng-template>\n\n          </ng-template>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n          <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n            <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\"\n                          *ngIf=\"filteredSuggestionList.length\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of filteredSuggestionList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </mat-optgroup>\n\n            <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n              <mat-option\n                (mousedown)=$event.preventDefault()\n                [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                *ngFor=\"let item of filteredItemsList\"\n                [value]=\"item\"\n              >\n                <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                <ui-icon [applicationTheme]=\"applicationTheme\"\n                         [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n              </mat-option>\n            </ng-container>\n\n            <ng-template #showItemListWithGroup>\n              <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\"\n                            *ngIf=\"filteredItemsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-template>\n\n            <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n              <ng-container *ngIf=\"allowAdd; else notFound\">\n                <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                  <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n                  <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #notFound>\n                <mat-option [style.pointer-events]=\"'none'\">\n                  <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n                </mat-option>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </mat-autocomplete>\n      <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\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}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i10.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i12.PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "directive", type: i13.SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i14.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i15.HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: i16.TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: i17.IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,

package/esm2022/components/checkbox/checkbox.component.mjs

@@ -234,7 +234,7 @@ export class CheckboxComponent {
         this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #checkboxContainer\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    <span\n      #tooltip=\"matTooltip\"\n      class=\"label\"\n      uiEllipseText\n      (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n      [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n      [matTooltipClass]=\"applicationTheme\"\n    >\n      {{ label }}\n    </span>\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n    <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n  </mat-hint>\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "label", "applicationTheme", "language"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i9.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #checkboxContainer\n  [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n  (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n  <mat-checkbox\n    #checkbox\n    (mouseleave)=\"checkbox.disableRipple = true\"\n    (mouseenter)=\"checkbox.disableRipple = false\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n    (click)=\"toggleChecked()\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    class=\"checkbox\"\n  >\n    <span\n      #tooltip=\"matTooltip\"\n      class=\"label\"\n      uiEllipseText\n      (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n      [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n      [matTooltipClass]=\"applicationTheme\"\n    >\n      {{ label }}\n    </span>\n    <ng-content select=\"[checkbox-label]\"></ng-content>\n  </mat-checkbox>\n\n  <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n    <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n  </mat-hint>\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}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i9.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,

package/esm2022/components/datepicker/datepicker.component.mjs

@@ -240,7 +240,7 @@ export class DatepickerComponent {
         this.onValueChange(fullDate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", language: "language", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    *ngIf=\"!monthPicker; else dateYearPicker\"\n    #uiDatepicker\n    appearance=\"outline\"\n    [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ))  ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n    <ng-container *ngIf=\"!isRange\">\n      <input *ngIf=\"!isRange\" matInput\n             [matDatepicker]=\"picker\"\n             (blur)=\"onTouch()\"\n             (dateChange)=\"onValueChange($event.value)\"\n             [id]=\"id!\"\n             [placeholder]=\"placeholder!\"\n             [value]=\"value\"\n             [disabled]=\"disabled\"\n             [name]=\"fieldName!\"\n             [readonly]=\"preventUserInput\"\n             [min]=\"minDate\"\n             [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </ng-container>\n\n    <ng-container *ngIf=\"isRange\">\n      <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\" >\n        <input matStartDate #dateRangeStart formControlName=\"start\" [placeholder]=\"(translationContext + 'START_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n        <input matEndDate  #dateRangeEnd formControlName=\"end\" [placeholder]=\"(translationContext + 'END_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\n    </ng-container>\n\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of _errors\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n          <span [innerHTML]=\"error\"></span>\n        </div>\n      </ng-container>\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\n  <ng-template #dateYearPicker>\n    <mat-form-field\n      appNoDateFormat\n      #uiDatepicker\n      appearance=\"outline\"\n      [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ))  ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n\n      <ng-container >\n        <input matInput\n               [id]=\"id!\"\n               (blur)=\"onTouch()\"\n               [placeholder]=\"placeholder!\"\n               [matDatepicker]=\"dp\"\n               [value]=\"value\"\n               [disabled]=\"disabled\"\n               [name]=\"fieldName!\"\n               [min]=\"minDate\"\n               [max]=\"maxDate\"\n               [readonly]=\"preventUserInput\"\n               (change)=\"onInput($event)\"\n               (dateChange)=\"onValueChange($event.value)\"\n        >\n        <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n          <ui-icon *ngIf=\"applicationTheme !== 'classic'\" matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n        </mat-datepicker-toggle>\n        <mat-datepicker panelClass=\"month-picker\" #dp startView=\"multi-year\" (monthSelected)=\"setMonthAndYear($event, dp)\"></mat-datepicker>\n      </ng-container>\n\n      <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container *ngIf=\"errorsLength\">\n          <div class=\"errors\" *ngFor=\"let error of _errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n      </mat-hint>\n\n    </mat-form-field>\n  </ng-template>\n\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .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-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .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-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff2fc}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#fff2fc}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:#d410aa}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: $brand-10}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i8.NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i11.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", language: "language", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    *ngIf=\"!monthPicker; else dateYearPicker\"\n    #uiDatepicker\n    appearance=\"outline\"\n    [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ))  ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n    <ng-container *ngIf=\"!isRange\">\n      <input *ngIf=\"!isRange\" matInput\n             [matDatepicker]=\"picker\"\n             (blur)=\"onTouch()\"\n             (dateChange)=\"onValueChange($event.value)\"\n             [id]=\"id!\"\n             [placeholder]=\"placeholder!\"\n             [value]=\"value\"\n             [disabled]=\"disabled\"\n             [name]=\"fieldName!\"\n             [readonly]=\"preventUserInput\"\n             [min]=\"minDate\"\n             [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </ng-container>\n\n    <ng-container *ngIf=\"isRange\">\n      <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\" >\n        <input matStartDate #dateRangeStart formControlName=\"start\" [placeholder]=\"(translationContext + 'START_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n        <input matEndDate  #dateRangeEnd formControlName=\"end\" [placeholder]=\"(translationContext + 'END_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\n    </ng-container>\n\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of _errors\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n          <span [innerHTML]=\"error\"></span>\n        </div>\n      </ng-container>\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\n  <ng-template #dateYearPicker>\n    <mat-form-field\n      appNoDateFormat\n      #uiDatepicker\n      appearance=\"outline\"\n      [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ))  ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n\n      <ng-container >\n        <input matInput\n               [id]=\"id!\"\n               (blur)=\"onTouch()\"\n               [placeholder]=\"placeholder!\"\n               [matDatepicker]=\"dp\"\n               [value]=\"value\"\n               [disabled]=\"disabled\"\n               [name]=\"fieldName!\"\n               [min]=\"minDate\"\n               [max]=\"maxDate\"\n               [readonly]=\"preventUserInput\"\n               (change)=\"onInput($event)\"\n               (dateChange)=\"onValueChange($event.value)\"\n        >\n        <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n          <ui-icon *ngIf=\"applicationTheme !== 'classic'\" matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n        </mat-datepicker-toggle>\n        <mat-datepicker panelClass=\"month-picker\" #dp startView=\"multi-year\" (monthSelected)=\"setMonthAndYear($event, dp)\"></mat-datepicker>\n      </ng-container>\n\n      <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container *ngIf=\"errorsLength\">\n          <div class=\"errors\" *ngFor=\"let error of _errors\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n      </mat-hint>\n\n    </mat-form-field>\n  </ng-template>\n\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .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-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .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-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff2fc}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#fff2fc}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:#d410aa}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: $brand-10}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i8.NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i11.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,

package/esm2022/components/dropdown/dropdown.component.mjs

@@ -196,7 +196,7 @@ export class DropdownComponent {
         this.opened.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DropdownComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n  >\n    <mat-label>{{ label }}  <span *ngIf=\"required\">*</span></mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\">\n      <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n        <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n        <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\">\n          {{ textField ? section[textField] : section.displayValue ?? section.value }}\n        </mat-option>\n      </div>\n    </mat-select>\n    <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n    <ui-icon class=\"chevron-icon\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n    <ui-icon class=\"chevron-icon\" *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of errors\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n        </div>\n      </ng-container>\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\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-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:fixed!important;right:14px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i5.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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i10.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n  >\n    <mat-label>{{ label }}  <span *ngIf=\"required\">*</span></mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\">\n      <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n        <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n        <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\">\n          {{ textField ? section[textField] : section.displayValue ?? section.value }}\n        </mat-option>\n      </div>\n    </mat-select>\n    <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n    <ui-icon class=\"chevron-icon\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n    <ui-icon class=\"chevron-icon\" *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of errors\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n        </div>\n      </ng-container>\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\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-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:fixed!important;right:14px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i5.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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i10.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,