npm - @testgorilla/tgo-ui - Versions diffs - 9.3.3 → 10.1.0 - Mend

@testgorilla/tgo-ui 9.3.3 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-field.mjs","sources":["../../../components/field/field.component.ts","../../../components/field/field.component.html","../../../components/field/field.component.module.ts","../../../components/field/testgorilla-tgo-ui-components-field.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { CdkTextareaAutosize } from '@angular/cdk/text-field';\nimport { NgStyle, NgClass, AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n DoCheck,\n ElementRef,\n EventEmitter,\n HostBinding,\n inject,\n input,\n Input,\n NgZone,\n OnInit,\n Output,\n ProviderToken,\n signal,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';\nimport { MatIconRegistry, MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { BadgeVariant, BadgeComponent } from '@testgorilla/tgo-ui/components/badge';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport {\n ApplicationTheme,\n DigitsOnlyDirective,\n UiTranslatePipe,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { FieldType } from './field.model';\n\n/*\n A global counter used to generate unique field IDs.\n * This variable is incremented each time a new field ID is needed.\n \n @remarks\n * This is primarily used to ensure that each field component\n * has a unique identifier within the application / useful for their Aria Labels.\n /\nlet fieldID = 0;\n\n@Component({\n selector: 'ui-field',\n templateUrl: './field.component.html',\n styleUrls: ['./field.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n MatFormField,\n NgStyle,\n NgClass,\n MatLabel,\n IconComponentModule,\n MatIcon,\n MatPrefix,\n MatInput,\n DigitsOnlyDirective,\n CdkTextareaAutosize,\n ButtonComponent,\n MatHint,\n ValidationErrorModule,\n BadgeComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n ],\n})\nexport class FieldComponent implements OnInit, ControlValueAccessor, DoCheck, AfterViewInit {\n @HostBinding() class = 'ui-field';\n\n /\n Indicator of the autocomplete width\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @HostBinding('class.full-width')\n @Input()\n fullWidth = true;\n\n /\n Indicator of the field height\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @HostBinding('class.full-height')\n @Input()\n fullHeight = false;\n\n /\n Form field label\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() label? = '';\n\n /\n Form field label from html\n \n @memberof FieldComponent\n /\n labelHtml = input<string \| null>(null);\n\n /\n Icon to display alongside the label\n \n @type {IconName}\n * @memberof FieldComponent\n /\n @Input() labelIcon?: IconName;\n\n /\n Input name attribute\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() fieldName?: string;\n\n /\n Input placeholder\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() placeholder? = '';\n\n /\n Input id\n \n @type {string}\n * @memberof FieldComponent\n /\n id = input(`field-${fieldID++}`);\n\n /\n Input value\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() value = '';\n\n /\n Variant of badge to use\n \n @type {BadgeVariant}\n * @memberof FieldComponent\n /\n @Input() badgeVariant?: BadgeVariant \| undefined;\n\n _errors: string[];\n /\n Input field errors\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() set errors(errors: string[]) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n\n /\n Determines if input is disabled\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() disabled: boolean;\n\n /\n Input is required or not\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() required: boolean;\n\n /\n Input is readonly or not\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() readOnly = false;\n\n /\n Hint text\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() hintMessage = '';\n\n /\n Input type\n \n @type {FieldType}\n * @memberof FieldComponent\n /\n @HostBinding('attr.field-class')\n @Input()\n type: FieldType = 'text';\n\n /\n Input is update only on blur\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() updateOnBlur = false;\n\n /\n allow only digits in input\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() allowOnlyDigits = false;\n\n /\n allow autocomplete off in input\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() isAutocompleteOff = false;\n\n /\n allow negative numbers\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() allowNegative = true;\n\n /\n Show reserved content below form field\n * @property showBottomContent\n * @type {boolean}\n * @memberof FieldComponent\n /\n @Input() showBottomContent = true;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof FieldComponent\n /\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof FieldComponent\n /\n @Input() ariaLabel: string;\n\n /\n Show loading button. Only for text\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() loading = false;\n\n /\n Show icon when field is valid\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() isValid = false;\n\n /\n Max characters number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() maxCharacters = 255;\n\n /\n Trim text on blur\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() trimOnBlur = false;\n /\n Trim text on submit\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() trimOnSubmit = false;\n /\n Max rows for multi-line type\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() maxRows = 0;\n /\n has text area counter\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() hasTextAreaCounter = true;\n\n /\n Hide in build errors for Reactive Forms\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n Set maximum number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() max: number \| undefined;\n\n /\n Set minimum number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() min: number \| undefined;\n\n /\n Sets textarea height. Default 110\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() textareaHeight = 110;\n\n /\n Sets textarea borderless. Default false\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() borderless = false;\n\n @Input() autosizableTextarea = false;\n\n /\n Indicates if this field is filled by AI\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() isAIVariant = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria Labeled By Element Id.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaLabelledbyId = computed(() => `${this.id()}-labeledBy`);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria LabeledBy Text.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaLabelledby = input<string \| undefined>(undefined);\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria Described By Element Id.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaDescribedbyId = computed(() => `${this.id()}-describedBy`);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria DescribedBy Text.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaDescribedby = input<string \| undefined>(undefined);\n\n /\n Show state of error\n * @type {boolean}\n * @memberof FieldComponent\n /\n @Input() hasError = false;\n\n @Output() validateEvent = new EventEmitter<string>();\n @Output() fieldBlur = new EventEmitter<void>();\n\n @ViewChild('inputElement', { read: ElementRef }) field: ElementRef<HTMLInputElement>;\n @ViewChild('autosize') autosize: CdkTextareaAutosize;\n\n get getPasswordIcon(): IconName {\n if (this.applicationTheme === 'classic') {\n return this.showPassword ? 'Eye-hide' : 'Eye-view';\n } else {\n if (!this.isActiveField && !this.isActiveHover) {\n return this.showPassword ? 'View-in-line' : 'Hide-in-line';\n } else {\n return this.showPassword ? 'View-filled' : 'Hide-filled';\n }\n }\n }\n\n isActiveField = false;\n isActiveHover = false;\n\n keyboardFocused = signal(false);\n\n protected readonly translationContext = 'FIELD.';\n\n /\n @ignore\n /\n onChange: (value: string \| number) => void = () => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n private readonly matIconRegistry = inject(MatIconRegistry);\n private readonly domSanitizer = inject(DomSanitizer);\n private readonly cdr = inject(ChangeDetectorRef);\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngAfterViewInit(): void {\n this.focusMonitor\n .monitor(this.field)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(origin =>\n this.ngZone.run(() => {\n queueMicrotask(() => {\n this.keyboardFocused.set(origin === 'keyboard');\n });\n })\n );\n\n if (this.type === 'multi-line') {\n this.autosize.resizeToFitContent(true);\n }\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n showClose: boolean;\n showPassword: boolean;\n currentType: string;\n errorsLength: boolean;\n\n ngOnInit(): void {\n this.setSearchInput();\n this.currentType = this.getType();\n }\n\n validate(): void {\n this.validateEvent.emit(this.value);\n }\n\n //set search input initial value\n setSearchInput(): void {\n if (this.type === 'search' \|\| this.type === 'collapsed-search') {\n // eslint-disable-next-line no-restricted-syntax -- SECURITY: hardcoded first-party asset URL; MatIconRegistry.addSvgIcon requires SafeResourceUrl.\n this.matIconRegistry.addSvgIcon('Search', this.domSanitizer.bypassSecurityTrustResourceUrl('/icons/Search.svg'));\n if (this.value) {\n this.showClose = true;\n } else {\n this.showClose = false;\n }\n } else {\n this.showClose = false;\n }\n }\n\n //change type for reveal password\n getType(): string {\n if (this.type === 'password' && this.showPassword) {\n return 'text';\n }\n return this.type;\n }\n\n //Clear input value\n clearValue(): void {\n this.value = '';\n this.onChange(this.value);\n this.onChangeInputSearch();\n }\n\n //toggle for password\n showPasswordClick() {\n this.showPassword = !this.showPassword;\n this.currentType = this.getType();\n }\n\n //Set options for search input\n onChangeInputSearch() {\n if (this.type === 'search' \|\| this.type === 'collapsed-search') {\n if (!this.value) {\n this.showClose = false;\n }\n if (this.value) {\n this.showClose = true;\n }\n }\n }\n\n // Set errors length for validation\n // Consider only those errors which which are not empty\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0 ? true : false;\n }\n return false;\n }\n\n //Save input value\n onInput(event: Event) {\n this.value = (event.target as HTMLInputElement \| HTMLTextAreaElement).value;\n this.errorsLength = this.setErrorsLength();\n if (!this.updateOnBlur) {\n this.onTouch();\n }\n if (this.allowOnlyDigits && !this.allowNegative && Number(this.value) < 0) {\n this.value = '0';\n } else {\n this.onChange(this.type === 'number' && this.value !== '' ? Number(this.value) : this.value);\n }\n }\n\n writeValue(value?: string \| number): void {\n if (value !== null && value !== undefined) {\n // The internal <input> value is always a string; a numeric form value\n // renders identically once assigned (the input coerces it anyway).\n this.value = String(value);\n } else {\n this.value = '';\n }\n this.onChangeInputSearch();\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string \| number) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onActive(state: boolean, action: string): void {\n if (action === 'hover') {\n this.isActiveHover = state;\n } else if (action === 'focus') {\n this.isActiveField = state;\n\n if (!state && this.trimOnBlur) {\n this.clearSpace();\n }\n }\n }\n\n onSubmit(): void {\n if (this.trimOnSubmit) {\n this.clearSpace();\n }\n }\n\n private clearSpace(): void {\n this.value = this.value.trim();\n this.onChange(this.value);\n }\n\n onBlur(): void {\n this.fieldBlur.emit();\n }\n\n trackByFn = (index: number, value: string) => value;\n\n focus(): void {\n this.field.nativeElement.focus();\n }\n\n refocusPasswordButton(btn: ButtonComponent) {\n setTimeout(() => {\n btn.focus('keyboard');\n }, 0);\n }\n}\n","<ng-container>\n <mat-form-field\n [ngStyle]=\"{\n '--textarea-height': textareaHeight - 10 + 'px',\n '--textarea-height-container': textareaHeight + 'px',\n }\"\n #uiField\n appearance=\"outline\"\n hideRequiredMarker=\"true\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n textarea: type === 'textarea' \|\| type === 'textarea-scrollable',\n 'textarea-scrollable': type === 'textarea-scrollable',\n 'multi-line': type === 'multi-line',\n 'multi-line-textarea': type === 'multi-line' && autosizableTextarea && borderless,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n 'has-value': !!value,\n 'text-area-borderless': borderless && (type === 'textarea' \|\| type === 'textarea-scrollable'),\n }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n @if (required) {\n <span>{{ 'ERRORS.REQUIRED' \| uiTranslate \| async }}</span>\n }\n {{ ariaDescribedby() }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n {{ ariaLabelledby() ?? label }}\n </span>\n @if (\n (label \|\| labelHtml()) &&\n ((type !== 'search' && applicationTheme === 'classic') \|\| applicationTheme !== 'classic')\n ) {\n <mat-label class=\"label-with-icon\">\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n <span>\n @if (labelHtml()) {\n <span [innerHTML]=\"labelHtml()\"></span>\n } @else {\n {{ label }}\n }\n @if (required) {\n <span></span>\n }\n </span>\n </mat-label>\n }\n @if (type === 'search' \|\| type === 'collapsed-search') {\n <mat-icon matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n }\n @if (type !== 'textarea' && type !== 'textarea-scrollable' && type !== 'multi-line') {\n <input\n data-testid=\"field-input\"\n [readonly]=\"readOnly\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled \|\| loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n digitsOnly\n [autocomplete]=\"isAutocompleteOff ? 'off' : 'on'\"\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n } @else {\n <textarea\n matInput\n #inputElement\n #autosize=\"cdkTextareaAutosize\"\n [readonly]=\"readOnly\"\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n [attr.maxlength]=\"maxCharacters\"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n }\n\n @if (type === 'search' \|\| type === 'collapsed-search' \|\| type === 'password' \|\| type === 'validation-text') {\n <div class=\"options\">\n <div class=\"options-container\">\n @if (showClose) {\n <ui-button\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' \| uiTranslate \| async)\"\n ></ui-button>\n }\n @if (type === 'password') {\n <ui-button\n class=\"password\"\n variant=\"secondary\"\n [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') \| uiTranslate \| async)!\"\n [justIcon]=\"true\"\n role=\"switch\"\n [attr.aria-checked]=\"showPassword\"\n [iconName]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n #btn\n (keydown.enter)=\"refocusPasswordButton(btn)\"\n (keydown.space)=\"refocusPasswordButton(btn)\"\n ></ui-button>\n }\n @if (\n type === 'validation-text' && (applicationTheme === 'dark' \|\| applicationTheme === 'light') && value.length\n ) {\n @if (!isValid) {\n <ui-button\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n }\n @if (isValid) {\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\"></ui-icon>\n }\n }\n </div>\n </div>\n }\n @if (\n hasTextAreaCounter &&\n (type === 'textarea' \|\| type === 'textarea-scrollable') &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError)\n ) {\n <mat-hint class=\"info\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n }\n\n @if (\n hintMessage &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError) &&\n type !== 'textarea' &&\n type !== 'textarea-scrollable'\n ) {\n <mat-hint class=\"info\">{{ hintMessage }}</mat-hint>\n }\n\n @if (errorsLength \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n </mat-hint>\n }\n\n @if (badgeVariant) {\n <ui-badge class=\"field-badge\" [variant]=\"badgeVariant\"></ui-badge>\n }\n </mat-form-field>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { DigitsOnlyDirective, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { FieldComponent } from './field.component';\n\n@NgModule({\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatInputModule,\n IconComponentModule,\n FormsModule,\n ReactiveFormsModule,\n ButtonComponentModule,\n MatIconModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n DigitsOnlyDirective,\n BadgeComponentModule,\n FieldComponent,\n ],\n exports: [FieldComponent],\n})\nexport class FieldComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-field.mjs","sources":["../../../components/field/field.component.ts","../../../components/field/field.component.html","../../../components/field/field.component.module.ts","../../../components/field/testgorilla-tgo-ui-components-field.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { CdkTextareaAutosize } from '@angular/cdk/text-field';\nimport { NgStyle, NgClass, AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n DoCheck,\n ElementRef,\n EventEmitter,\n HostBinding,\n inject,\n input,\n Input,\n NgZone,\n OnInit,\n Output,\n ProviderToken,\n signal,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';\nimport { MatIconRegistry, MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { BadgeVariant, BadgeComponent } from '@testgorilla/tgo-ui/components/badge';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport {\n ApplicationTheme,\n DigitsOnlyDirective,\n UiTranslatePipe,\n HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { FieldType } from './field.model';\n\n/*\n A global counter used to generate unique field IDs.\n * This variable is incremented each time a new field ID is needed.\n \n @remarks\n * This is primarily used to ensure that each field component\n * has a unique identifier within the application / useful for their Aria Labels.\n /\nlet fieldID = 0;\n\n@Component({\n selector: 'ui-field',\n templateUrl: './field.component.html',\n styleUrls: ['./field.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n MatFormField,\n NgStyle,\n NgClass,\n MatLabel,\n IconComponentModule,\n MatIcon,\n MatPrefix,\n MatInput,\n DigitsOnlyDirective,\n CdkTextareaAutosize,\n ButtonComponent,\n MatHint,\n ValidationErrorModule,\n BadgeComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n ],\n})\nexport class FieldComponent implements OnInit, ControlValueAccessor, DoCheck, AfterViewInit {\n @HostBinding() class = 'ui-field';\n\n /\n Indicator of the autocomplete width\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @HostBinding('class.full-width')\n @Input()\n fullWidth = true;\n\n /\n Indicator of the field height\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @HostBinding('class.full-height')\n @Input()\n fullHeight = false;\n\n /\n Form field label\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() label? = '';\n\n /\n Form field label from html\n \n @memberof FieldComponent\n /\n labelHtml = input<string \| null>(null);\n\n /\n Icon to display alongside the label\n \n @type {IconName}\n * @memberof FieldComponent\n /\n @Input() labelIcon?: IconName;\n\n /\n Input name attribute\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() fieldName?: string;\n\n /\n Input placeholder\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() placeholder? = '';\n\n /\n Input id\n \n @type {string}\n * @memberof FieldComponent\n /\n id = input(`field-${fieldID++}`);\n\n /\n Input value\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() value = '';\n\n /\n Variant of badge to use\n \n @type {BadgeVariant}\n * @memberof FieldComponent\n /\n @Input() badgeVariant?: BadgeVariant \| undefined;\n\n _errors: string[];\n /\n Input field errors\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() set errors(errors: string[]) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n\n /\n Determines if input is disabled\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() disabled: boolean;\n\n /\n Input is required or not\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() required: boolean;\n\n /\n Input is readonly or not\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() readOnly = false;\n\n /\n Hint text\n \n @type {string}\n * @memberof FieldComponent\n /\n @Input() hintMessage = '';\n\n /\n Input type\n \n @type {FieldType}\n * @memberof FieldComponent\n /\n @HostBinding('attr.field-class')\n @Input()\n type: FieldType = 'text';\n\n /\n Input is update only on blur\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() updateOnBlur = false;\n\n /\n allow only digits in input\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() allowOnlyDigits = false;\n\n /\n allow autocomplete off in input\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() isAutocompleteOff = false;\n\n /\n allow negative numbers\n \n @type {Boolean}\n * @memberof FieldComponent\n /\n @Input() allowNegative = true;\n\n /\n Show reserved content below form field\n * @property showBottomContent\n * @type {boolean}\n * @memberof FieldComponent\n /\n @Input() showBottomContent = true;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof FieldComponent\n /\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof FieldComponent\n /\n @Input() ariaLabel: string;\n\n /\n Show loading button. Only for text\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() loading = false;\n\n /\n Show icon when field is valid\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() isValid = false;\n\n /\n Max characters number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() maxCharacters = 255;\n\n /\n Trim text on blur\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() trimOnBlur = false;\n /\n Trim text on submit\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() trimOnSubmit = false;\n /\n Max rows for multi-line type\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() maxRows = 0;\n /\n has text area counter\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() hasTextAreaCounter = true;\n\n /\n Hide in build errors for Reactive Forms\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() hideBuiltInErrors = false;\n\n /\n Hide label in errors\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() hideLabelInErrors = false;\n\n /\n Set maximum number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() max: number \| undefined;\n\n /\n Set minimum number\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() min: number \| undefined;\n\n /\n Sets textarea height. Default 110\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() textareaHeight = 110;\n\n /\n Sets textarea borderless. Default false\n \n @type {number}\n * @memberof FieldComponent\n /\n @Input() borderless = false;\n\n @Input() autosizableTextarea = false;\n\n /\n Indicates if this field is filled by AI\n \n @type {boolean}\n * @memberof FieldComponent\n /\n @Input() isAIVariant = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria Labeled By Element Id.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaLabelledbyId = computed(() => `${this.id()}-labeledBy`);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria LabeledBy Text.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaLabelledby = input<string \| undefined>(undefined);\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria Described By Element Id.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaDescribedbyId = computed(() => `${this.id()}-describedBy`);\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used for input field Aria DescribedBy Text.\n * @type {string}\n * @memberof FieldComponent\n /\n protected readonly ariaDescribedby = input<string \| undefined>(undefined);\n\n /\n Show state of error\n * @type {boolean}\n * @memberof FieldComponent\n /\n @Input() hasError = false;\n\n @Output() validateEvent = new EventEmitter<string>();\n @Output() fieldBlur = new EventEmitter<void>();\n\n @ViewChild('inputElement', { read: ElementRef }) field: ElementRef<HTMLInputElement>;\n @ViewChild('autosize') autosize: CdkTextareaAutosize;\n\n get getPasswordIcon(): IconName {\n if (this.applicationTheme === 'classic') {\n return this.showPassword ? 'Eye-hide' : 'Eye-view';\n } else {\n if (!this.isActiveField && !this.isActiveHover) {\n return this.showPassword ? 'View-in-line' : 'Hide-in-line';\n } else {\n return this.showPassword ? 'View-filled' : 'Hide-filled';\n }\n }\n }\n\n isActiveField = false;\n isActiveHover = false;\n\n keyboardFocused = signal(false);\n\n protected readonly translationContext = 'FIELD.';\n\n /\n @ignore\n /\n onChange: (value: string \| number) => void = () => {};\n\n /\n @ignore\n /\n onTouch = () => {};\n\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n private readonly matIconRegistry = inject(MatIconRegistry);\n private readonly domSanitizer = inject(DomSanitizer);\n private readonly cdr = inject(ChangeDetectorRef);\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ngZone = inject(NgZone);\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngAfterViewInit(): void {\n this.focusMonitor\n .monitor(this.field)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(origin =>\n this.ngZone.run(() => {\n queueMicrotask(() => {\n this.keyboardFocused.set(origin === 'keyboard');\n });\n })\n );\n\n if (this.type === 'multi-line') {\n this.autosize.resizeToFitContent(true);\n }\n }\n\n /\n Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n /\n ngDoCheck(): void {\n if (this.ngControl?.touched \|\| this.ngControl?.errors) {\n this.cdr.markForCheck();\n }\n }\n\n showClose: boolean;\n showPassword: boolean;\n currentType: string;\n errorsLength: boolean;\n\n ngOnInit(): void {\n this.setSearchInput();\n this.currentType = this.getType();\n }\n\n validate(): void {\n this.validateEvent.emit(this.value);\n }\n\n //set search input initial value\n setSearchInput(): void {\n if (this.type === 'search' \|\| this.type === 'collapsed-search') {\n // eslint-disable-next-line no-restricted-syntax -- SECURITY: hardcoded first-party asset URL; MatIconRegistry.addSvgIcon requires SafeResourceUrl.\n this.matIconRegistry.addSvgIcon('Search', this.domSanitizer.bypassSecurityTrustResourceUrl('/icons/Search.svg'));\n if (this.value) {\n this.showClose = true;\n } else {\n this.showClose = false;\n }\n } else {\n this.showClose = false;\n }\n }\n\n //change type for reveal password\n getType(): string {\n if (this.type === 'password' && this.showPassword) {\n return 'text';\n }\n return this.type;\n }\n\n //Clear input value\n clearValue(): void {\n this.value = '';\n this.onChange(this.value);\n this.onChangeInputSearch();\n }\n\n //toggle for password\n showPasswordClick() {\n this.showPassword = !this.showPassword;\n this.currentType = this.getType();\n }\n\n //Set options for search input\n onChangeInputSearch() {\n if (this.type === 'search' \|\| this.type === 'collapsed-search') {\n if (!this.value) {\n this.showClose = false;\n }\n if (this.value) {\n this.showClose = true;\n }\n }\n }\n\n // Set errors length for validation\n // Consider only those errors which which are not empty\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0 ? true : false;\n }\n return false;\n }\n\n //Save input value\n onInput(event: Event) {\n this.value = (event.target as HTMLInputElement \| HTMLTextAreaElement).value;\n this.errorsLength = this.setErrorsLength();\n if (!this.updateOnBlur) {\n this.onTouch();\n }\n if (this.allowOnlyDigits && !this.allowNegative && Number(this.value) < 0) {\n this.value = '0';\n } else {\n this.onChange(this.type === 'number' && this.value !== '' ? Number(this.value) : this.value);\n }\n }\n\n writeValue(value?: string \| number): void {\n if (value !== null && value !== undefined) {\n // The internal <input> value is always a string; a numeric form value\n // renders identically once assigned (the input coerces it anyway).\n this.value = String(value);\n } else {\n this.value = '';\n }\n this.onChangeInputSearch();\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string \| number) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onActive(state: boolean, action: string): void {\n if (action === 'hover') {\n this.isActiveHover = state;\n } else if (action === 'focus') {\n this.isActiveField = state;\n\n if (!state && this.trimOnBlur) {\n this.clearSpace();\n }\n }\n }\n\n onSubmit(): void {\n if (this.trimOnSubmit) {\n this.clearSpace();\n }\n }\n\n private clearSpace(): void {\n this.value = this.value.trim();\n this.onChange(this.value);\n }\n\n onBlur(): void {\n this.fieldBlur.emit();\n }\n\n trackByFn = (index: number, value: string) => value;\n\n focus(): void {\n this.field.nativeElement.focus();\n }\n\n refocusPasswordButton(btn: ButtonComponent) {\n setTimeout(() => {\n btn.focus('keyboard');\n }, 0);\n }\n}\n","<ng-container>\n <mat-form-field\n [ngStyle]=\"{\n '--textarea-height': textareaHeight - 10 + 'px',\n '--textarea-height-container': textareaHeight + 'px',\n }\"\n #uiField\n appearance=\"outline\"\n hideRequiredMarker=\"true\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n textarea: type === 'textarea' \|\| type === 'textarea-scrollable',\n 'textarea-scrollable': type === 'textarea-scrollable',\n 'multi-line': type === 'multi-line',\n 'multi-line-textarea': type === 'multi-line' && autosizableTextarea && borderless,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n 'has-value': !!value,\n 'text-area-borderless': borderless && (type === 'textarea' \|\| type === 'textarea-scrollable'),\n }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n @if (required) {\n <span>{{ 'ERRORS.REQUIRED' \| uiTranslate \| async }}</span>\n }\n {{ ariaDescribedby() }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n {{ ariaLabelledby() ?? label }}\n </span>\n @if (\n (label \|\| labelHtml()) &&\n ((type !== 'search' && applicationTheme === 'classic') \|\| applicationTheme !== 'classic')\n ) {\n <mat-label class=\"label-with-icon\">\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n <span>\n @if (labelHtml()) {\n <span [innerHTML]=\"labelHtml()\"></span>\n } @else {\n {{ label }}\n }\n @if (required) {\n <span></span>\n }\n </span>\n </mat-label>\n }\n @if (type === 'search' \|\| type === 'collapsed-search') {\n <mat-icon matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n }\n @if (type !== 'textarea' && type !== 'textarea-scrollable' && type !== 'multi-line') {\n <input\n data-testid=\"field-input\"\n [readonly]=\"readOnly\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled \|\| loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n digitsOnly\n [autocomplete]=\"isAutocompleteOff ? 'off' : 'on'\"\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n } @else {\n <textarea\n matInput\n #inputElement\n #autosize=\"cdkTextareaAutosize\"\n [readonly]=\"readOnly\"\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n [attr.maxlength]=\"maxCharacters\"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n }\n\n @if (type === 'search' \|\| type === 'collapsed-search' \|\| type === 'password' \|\| type === 'validation-text') {\n <div class=\"options\">\n <div class=\"options-container\">\n @if (showClose) {\n <ui-button\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' \| uiTranslate \| async)\"\n ></ui-button>\n }\n @if (type === 'password') {\n <ui-button\n class=\"password\"\n variant=\"secondary\"\n [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') \| uiTranslate \| async)!\"\n [justIcon]=\"true\"\n role=\"switch\"\n [attr.aria-checked]=\"showPassword\"\n [iconName]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n #btn\n (keydown.enter)=\"refocusPasswordButton(btn)\"\n (keydown.space)=\"refocusPasswordButton(btn)\"\n ></ui-button>\n }\n @if (\n type === 'validation-text' && (applicationTheme === 'dark' \|\| applicationTheme === 'light') && value.length\n ) {\n @if (!isValid) {\n <ui-button\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n }\n @if (isValid) {\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\"></ui-icon>\n }\n }\n </div>\n </div>\n }\n @if (\n hasTextAreaCounter &&\n (type === 'textarea' \|\| type === 'textarea-scrollable') &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError)\n ) {\n <mat-hint class=\"info\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n }\n\n @if (\n hintMessage &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError) &&\n type !== 'textarea' &&\n type !== 'textarea-scrollable'\n ) {\n <mat-hint class=\"info\">{{ hintMessage }}</mat-hint>\n }\n\n @if (errorsLength \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n </mat-hint>\n }\n\n @if (badgeVariant) {\n <ui-badge class=\"field-badge\" [variant]=\"badgeVariant\"></ui-badge>\n }\n </mat-form-field>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { DigitsOnlyDirective, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { FieldComponent } from './field.component';\n\n@NgModule({\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatInputModule,\n IconComponentModule,\n FormsModule,\n ReactiveFormsModule,\n ButtonComponentModule,\n MatIconModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n DigitsOnlyDirective,\n BadgeComponentModule,\n FieldComponent,\n ],\n exports: [FieldComponent],\n})\nexport class FieldComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs CHANGED Viewed

@@ -38,10 +38,10 @@ class DragDropDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DragDropDirective, isStandalone: true, selector: "[uiDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.file" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: DragDropDirective, isStandalone: true, selector: "[uiDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.file" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DragDropDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[uiDragDrop]' }]
         }], ctorParameters: () => [], propDecorators: { file: [{
@@ -238,8 +238,8 @@ class FileUploadComponent {
             this.isCanceled = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", minFileSizeMB: "minFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", showUploadProgress: "showUploadProgress", fileProcessingMessage: "fileProcessingMessage", errors: "errors", disabled: "disabled", file: "file", companyColor: "companyColor", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", showFileSize: "showFileSize" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class", "style.--color": "this.compColor" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", minFileSizeMB: "minFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", showUploadProgress: "showUploadProgress", fileProcessingMessage: "fileProcessingMessage", errors: "errors", disabled: "disabled", file: "file", companyColor: "companyColor", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", showFileSize: "showFileSize" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class", "style.--color": "this.compColor" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileUploadComponent),
@@ -278,7 +278,7 @@ class FileUploadComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-file-upload', encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -373,8 +373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class FileUploadComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
@@ -382,14 +382,14 @@ class FileUploadComponentModule {
             UiTranslatePipe,
             FileUploadComponent,
             DragDropDirective], exports: [FileUploadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
             ProgressBarComponentModule,
             FileUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploadComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs CHANGED Viewed

@@ -56,7 +56,7 @@ class FilterButtonComponent {
          * @type {OptionType}
          * @memberof FilterButtonComponent
          */
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         /**
          * Whether the user should be allowed to clear the values.
          * Default: true.
@@ -113,11 +113,11 @@ class FilterButtonComponent {
         /** Must match the `.item` height in the SCSS — the fixed-size viewport relies on it. */
         this.ITEM_SIZE = 48;
         this.MAX_LIST_HEIGHT = 290;
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.displayedLabel = signal('', ...(ngDevMode ? [{ debugName: "displayedLabel" }] : []));
-        this.tooltip = signal('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
-        this.search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
-        this.activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.displayedLabel = signal('', ...(ngDevMode ? [{ debugName: "displayedLabel" }] : /* istanbul ignore next */ []));
+        this.tooltip = signal('', ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        this.search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         this.showTooltip = {};
         this.displayedOptions = computed(() => {
             let lastSectionTitle;
@@ -128,7 +128,7 @@ class FilterButtonComponent {
                 return { ...option, sectionTitle: lastSectionTitle };
             })
                 .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));
-        }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
         // Section titles become their own rows so the fixed-size viewport can position every row with one `itemSize`.
         this.flatOptions = computed(() => {
             const rows = [];
@@ -141,12 +141,12 @@ class FilterButtonComponent {
                 rows.push({ kind: 'option', option });
             }
             return rows;
-        }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : []));
-        this.optionCount = computed(() => this.displayedOptions().length, ...(ngDevMode ? [{ debugName: "optionCount" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
+        this.optionCount = computed(() => this.displayedOptions().length, ...(ngDevMode ? [{ debugName: "optionCount" }] : /* istanbul ignore next */ []));
         this.activeOption = computed(() => {
             const row = this.flatOptions()[this.activeIndex()];
             return row?.kind === 'option' ? row.option : undefined;
-        }, ...(ngDevMode ? [{ debugName: "activeOption" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
         // 1-based position of the active option (headers excluded) for the aria-live announcement.
         this.activePosition = computed(() => {
             const rows = this.flatOptions();
@@ -158,8 +158,8 @@ class FilterButtonComponent {
                 }
             }
             return position;
-        }, ...(ngDevMode ? [{ debugName: "activePosition" }] : []));
-        this.listHeight = computed(() => Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT), ...(ngDevMode ? [{ debugName: "listHeight" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "activePosition" }] : /* istanbul ignore next */ []));
+        this.listHeight = computed(() => Math.min(Math.max(this.flatOptions().length * this.ITEM_SIZE, this.ITEM_SIZE), this.MAX_LIST_HEIGHT), ...(ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []));
         this.trackByRow = (_index, row) => row.kind === 'header' ? `header:${row.title}` : `option:${row.option.value}`;
         this.MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
         this.translationContext = 'FILTER_BUTTON.';
@@ -284,10 +284,10 @@ class FilterButtonComponent {
         this.tooltip.set(tooltip);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FilterButtonComponent, isStandalone: true, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "mediaCard", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FilterButtonComponent, isStandalone: true, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "mediaCard", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ButtonComponent,
@@ -305,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         EllipseTextDirective,
                         AsyncPipe,
                         UiTranslatePipe,
-                    ], template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"] }]
+                    ], template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (activeOption(); as active) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          translationContext + 'ACTIVE_ITEM' | uiTranslate: { active: activePosition(), total: optionCount() } | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ active.label }}\n        {{\n          (value.includes(active.value) ? translationContext + 'SELECTED' : translationContext + 'DESELECTED')\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      @if (options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH) {\n        <div class=\"ui-filter-button-header\">\n          <ui-field\n            type=\"search\"\n            [showBottomContent]=\"false\"\n            [ngModel]=\"search()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div\n        class=\"ui-filter-button-list\"\n        #list\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"isOpen() && activeOption() ? 'ui-fb-option-' + activeIndex() : null\"\n        (keydown)=\"keyDownHandler($event)\"\n      >\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <cdk-virtual-scroll-viewport\n            class=\"ui-filter-button-viewport\"\n            [itemSize]=\"ITEM_SIZE\"\n            [style.height.px]=\"listHeight()\"\n          >\n            <ng-container *cdkVirtualFor=\"let row of flatOptions(); let i = index; trackBy: trackByRow\">\n              @if (row.kind === 'header') {\n                <div class=\"section-title\">\n                  {{ row.title }}\n                </div>\n              } @else {\n                <div\n                  class=\"item\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"'ui-fb-option-' + i\"\n                  [class.item-selected]=\"isSelected(row.option.value)\"\n                  [class.item-active]=\"activeIndex() === i\"\n                  [attr.aria-selected]=\"isSelected(row.option.value)\"\n                  (click)=\"activeIndex.set(i); optionChanged(!isSelected(row.option.value), row.option)\"\n                  (keydown.enter)=\"optionChanged(!isSelected(row.option.value), row.option)\"\n                >\n                  @if (singleSelection) {\n                    <ui-radio-button\n                      (click)=\"$event.stopPropagation()\"\n                      [tabIndex]=\"-1\"\n                      [selected]=\"isSelected(row.option.value)\"\n                      (changeRadio)=\"optionChanged($event.optionChecked, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    >\n                    </ui-radio-button>\n                  }\n                  @if (!singleSelection) {\n                    <ui-checkbox\n                      (click)=\"$event.stopPropagation()\"\n                      [class.with-label-number]=\"row.option.labelNumber !== undefined\"\n                      [tabIndex]=\"-1\"\n                      [checked]=\"isSelected(row.option.value)\"\n                      (changed)=\"optionChanged($event, row.option)\"\n                      [applicationTheme]=\"applicationTheme\"\n                    ></ui-checkbox>\n                  }\n                  @if (row.option.icon) {\n                    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"row.option.icon\"></ui-icon>\n                  }\n                  <span\n                    #tooltip=\"matTooltip\"\n                    class=\"item-label\"\n                    uiEllipseText\n                    [refresh]=\"row.option.value\"\n                    (onChangeTextState)=\"onLabelEllipsisChange($event, row.option.value)\"\n                    [matTooltip]=\"showTooltip[row.option.value] ? row.option.label : ''\"\n                    [matTooltipClass]=\"applicationTheme\"\n                  >\n                    {{ row.option.label }}\n                  </span>\n                  @if (row.option.labelNumber !== undefined) {\n                    <span class=\"item-number\">({{ row.option.labelNumber }})</span>\n                  }\n                </div>\n              }\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        @if (allowClear || message) {\n          <div class=\"ui-filter-button-footer\">\n            @if (allowClear) {\n              <ui-button\n                variant=\"text\"\n                size=\"small\"\n                [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n                (click)=\"clearValue()\"\n                [applicationTheme]=\"applicationTheme\"\n                (keydown.escape)=\"toggle()\"\n              ></ui-button>\n            }\n            <div class=\"ui-filter-button-footer-message\">\n              {{ message }}\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{display:flex;align-items:center;height:48px;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-active,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-radio-button{margin-right:4px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport{width:100%;max-height:290px;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-viewport .cdk-virtual-scroll-content-wrapper{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -349,8 +349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class FilterButtonComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
             FormsModule,
             MatTooltipModule,
             OverlayModule,
@@ -362,7 +362,7 @@ class FilterButtonComponentModule {
             EllipseTextDirective,
             RadioButtonComponentModule,
             FilterButtonComponent], exports: [FilterButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
             FormsModule,
             MatTooltipModule,
             OverlayModule,
@@ -373,7 +373,7 @@ class FilterButtonComponentModule {
             RadioButtonComponentModule,
             FilterButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FilterButtonComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [