@testgorilla/tgo-ui 7.0.0-beta.0 → 7.0.0

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

@@ -1,26 +1,26 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { input, EventEmitter, signal, computed, ViewChildren, ViewChild, HostBinding, Input, Output, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import * as i8 from '@testgorilla/tgo-ui/components/core';
+import * as i9 from '@testgorilla/tgo-ui/components/core';
 import { IKeyboardEvent, UiTranslatePipe, EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';
-import * as i1 from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from '@angular/material/tooltip';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3 from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i4 from '@testgorilla/tgo-ui/components/button';
+import * as i5 from '@testgorilla/tgo-ui/components/button';
 import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import * as i5 from '@testgorilla/tgo-ui/components/icon';
+import * as i6 from '@testgorilla/tgo-ui/components/icon';
 import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i6 from '@testgorilla/tgo-ui/components/checkbox';
+import * as i7 from '@testgorilla/tgo-ui/components/checkbox';
 import { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';
-import * as i7 from '@testgorilla/tgo-ui/components/field';
+import * as i8 from '@testgorilla/tgo-ui/components/field';
 import { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
-import * as i9 from '@testgorilla/tgo-ui/components/radio-button';
+import * as i10 from '@testgorilla/tgo-ui/components/radio-button';
 import { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';
-import * as i10 from '@angular/common';
-import { CommonModule } from '@angular/common';
 
 class FilterButtonComponent {
     constructor(defaultAppTheme, cdr) {
@@ -62,7 +62,7 @@ class FilterButtonComponent {
          * @type {OptionType}
          * @memberof FilterButtonComponent
          */
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.options = input([]);
         /**
          * Whether the user should be allowed to clear the values.
          * Default: true.
@@ -116,10 +116,10 @@ class FilterButtonComponent {
          * @memberof FilterButtonComponent
          */
         this.applicationTheme = 'light';
-        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.isOpen = signal(false);
+        this.displayedLabel = signal('');
+        this.tooltip = signal('');
+        this.search = signal('');
         this.showTooltip = {};
         this.displayedOptions = computed(() => {
             let lastSectionTitle;
@@ -129,7 +129,7 @@ class FilterButtonComponent {
                 return { ...option, sectionTitle: lastSectionTitle };
             })
                 .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));
-        }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : []));
+        });
         this.MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
         this.translationContext = 'FILTER_BUTTON.';
         if (this.defaultAppTheme) {
@@ -213,12 +213,12 @@ class FilterButtonComponent {
         this.tooltip.set(tooltip);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterButtonComponent, isStandalone: false, 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: "filterOptions", predicate: ["filterOption"], 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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\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)=\"search.set($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          @for (section of displayedOptions(); track section; let i = $index) {\n            <div>\n              @if (section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle) {\n                <div class=\"section-title\">\n                  {{ section.sectionTitle }}\n                </div>\n              }\n              <div\n                class=\"item\"\n                [class.item-selected]=\"isSelected(section.value)\"\n                tabindex=\"0\"\n                (click)=\"optionChanged(!isSelected(section.value), section)\"\n                (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n              >\n                @if (singleSelection) {\n                  <ui-radio-button\n                    (click)=\"$event.stopPropagation()\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [selected]=\"isSelected(section.value)\"\n                    (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  >\n                  </ui-radio-button>\n                }\n                @if (!singleSelection) {\n                  <ui-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    [class.with-label-number]=\"section.labelNumber !== undefined\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [checked]=\"isSelected(section.value)\"\n                    (changed)=\"optionChanged($event, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  ></ui-checkbox>\n                }\n                @if (section.icon) {\n                  <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n                }\n                <span\n                  #tooltip=\"matTooltip\"\n                  class=\"item-label\"\n                  uiEllipseText\n                  (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                  [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                  [matTooltipClass]=\"applicationTheme\"\n                >\n                  {{ section.label }}\n                </span>\n                @if (section.labelNumber !== undefined) {\n                  <span class=\"item-number\">({{ section.labelNumber }})</span>\n                }\n              </div>\n            </div>\n          }\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{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.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-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-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: "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: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.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: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i4.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i6.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: i7.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: "directive", type: i8.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i9.RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FilterButtonComponent, isStandalone: false, 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: "filterOptions", predicate: ["filterOption"], 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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n        <ui-field\n          type=\"search\"\n          [showBottomContent]=\"false\"\n          [ngModel]=\"search()\"\n          (ngModelChange)=\"search.set($event)\"\n          [applicationTheme]=\"applicationTheme\"\n        ></ui-field>\n      </div>\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          <div *ngFor=\"let section of displayedOptions(); index as i\">\n            <div\n              *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n              class=\"section-title\"\n            >\n              {{ section.sectionTitle }}\n            </div>\n            <div\n              class=\"item\"\n              [class.item-selected]=\"isSelected(section.value)\"\n              tabindex=\"0\"\n              (click)=\"optionChanged(!isSelected(section.value), section)\"\n              (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n            >\n              <ui-radio-button\n                (click)=\"$event.stopPropagation()\"\n                *ngIf=\"singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [selected]=\"isSelected(section.value)\"\n                (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              >\n              </ui-radio-button>\n              <ui-checkbox\n                (click)=\"$event.stopPropagation()\"\n                [class.with-label-number]=\"section.labelNumber !== undefined\"\n                *ngIf=\"!singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [checked]=\"isSelected(section.value)\"\n                (changed)=\"optionChanged($event, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              ></ui-checkbox>\n              <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n              <span\n                #tooltip=\"matTooltip\"\n                class=\"item-label\"\n                uiEllipseText\n                (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                [matTooltipClass]=\"applicationTheme\"\n              >\n                {{ section.label }}\n              </span>\n              <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n            </div>\n          </div>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n          <ui-button\n            *ngIf=\"allowClear\"\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          <div class=\"ui-filter-button-footer-message\">\n            {{ message }}\n          </div>\n        </div>\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{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.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-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-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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.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: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i5.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i7.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: i8.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: "directive", type: i9.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i10.RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\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)=\"search.set($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          @for (section of displayedOptions(); track section; let i = $index) {\n            <div>\n              @if (section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle) {\n                <div class=\"section-title\">\n                  {{ section.sectionTitle }}\n                </div>\n              }\n              <div\n                class=\"item\"\n                [class.item-selected]=\"isSelected(section.value)\"\n                tabindex=\"0\"\n                (click)=\"optionChanged(!isSelected(section.value), section)\"\n                (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n              >\n                @if (singleSelection) {\n                  <ui-radio-button\n                    (click)=\"$event.stopPropagation()\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [selected]=\"isSelected(section.value)\"\n                    (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  >\n                  </ui-radio-button>\n                }\n                @if (!singleSelection) {\n                  <ui-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    [class.with-label-number]=\"section.labelNumber !== undefined\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [checked]=\"isSelected(section.value)\"\n                    (changed)=\"optionChanged($event, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  ></ui-checkbox>\n                }\n                @if (section.icon) {\n                  <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n                }\n                <span\n                  #tooltip=\"matTooltip\"\n                  class=\"item-label\"\n                  uiEllipseText\n                  (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                  [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                  [matTooltipClass]=\"applicationTheme\"\n                >\n                  {{ section.label }}\n                </span>\n                @if (section.labelNumber !== undefined) {\n                  <span class=\"item-number\">({{ section.labelNumber }})</span>\n                }\n              </div>\n            </div>\n          }\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{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.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-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-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"] }]
+            args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n        <ui-field\n          type=\"search\"\n          [showBottomContent]=\"false\"\n          [ngModel]=\"search()\"\n          (ngModelChange)=\"search.set($event)\"\n          [applicationTheme]=\"applicationTheme\"\n        ></ui-field>\n      </div>\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          <div *ngFor=\"let section of displayedOptions(); index as i\">\n            <div\n              *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n              class=\"section-title\"\n            >\n              {{ section.sectionTitle }}\n            </div>\n            <div\n              class=\"item\"\n              [class.item-selected]=\"isSelected(section.value)\"\n              tabindex=\"0\"\n              (click)=\"optionChanged(!isSelected(section.value), section)\"\n              (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n            >\n              <ui-radio-button\n                (click)=\"$event.stopPropagation()\"\n                *ngIf=\"singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [selected]=\"isSelected(section.value)\"\n                (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              >\n              </ui-radio-button>\n              <ui-checkbox\n                (click)=\"$event.stopPropagation()\"\n                [class.with-label-number]=\"section.labelNumber !== undefined\"\n                *ngIf=\"!singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [checked]=\"isSelected(section.value)\"\n                (changed)=\"optionChanged($event, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              ></ui-checkbox>\n              <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n              <span\n                #tooltip=\"matTooltip\"\n                class=\"item-label\"\n                uiEllipseText\n                (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                [matTooltipClass]=\"applicationTheme\"\n              >\n                {{ section.label }}\n              </span>\n              <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n            </div>\n          </div>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n          <ui-button\n            *ngIf=\"allowClear\"\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          <div class=\"ui-filter-button-footer-message\">\n            {{ message }}\n          </div>\n        </div>\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{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.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-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-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
                 }, {
@@ -234,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
-            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], allowClear: [{
+            }], allowClear: [{
                 type: Input
             }], singleSelection: [{
                 type: Input
@@ -262,8 +262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class FilterButtonComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponentModule, declarations: [FilterButtonComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponentModule, declarations: [FilterButtonComponent], imports: [CommonModule,
             FormsModule,
             MatTooltipModule,
             OverlayModule,
@@ -274,7 +274,7 @@ class FilterButtonComponentModule {
             FieldComponentModule,
             EllipseTextDirective,
             RadioButtonComponentModule], exports: [FilterButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
             FormsModule,
             MatTooltipModule,
             OverlayModule,
@@ -284,7 +284,7 @@ class FilterButtonComponentModule {
             FieldComponentModule,
             RadioButtonComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FilterButtonComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts","../../../components/filter-button/testgorilla-tgo-ui-components-filter-button.ts"],"sourcesContent":["import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  input,\n  Input,\n  OnChanges,\n  Optional,\n  Output,\n  QueryList,\n  signal,\n  SimpleChanges,\n  ViewChild,\n  ViewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonIconPosition } from '@testgorilla/tgo-ui/components/button';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\n@Component({\n  selector: 'ui-filter-button',\n  templateUrl: './filter-button.component.html',\n  styleUrls: ['./filter-button.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class FilterButtonComponent implements OnChanges {\n  @HostBinding() class = 'ui-filter-button';\n\n  /**\n   * The button label when no value is selected.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() label = '';\n\n  /**\n   * Optional message to display on the overflow bottom.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() message? = '';\n\n  /**\n   * List of selected values.\n   *\n   * @type {string[]}\n   * @memberof FilterButtonComponent\n   */\n  @Input() value: FilterValue[] = [];\n\n  /**\n   * Whether the component is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * List of options.\n   *\n   * @type {OptionType}\n   * @memberof FilterButtonComponent\n   */\n  options = input<FilterButtonOption[]>([]);\n\n  /**\n   * Whether the user should be allowed to clear the values.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() allowClear = true;\n\n  /**\n   * Whether the user should be allowed to select single or multiple values.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() singleSelection? = false;\n\n  /**\n   * The icon name to display.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   *\n   **/\n\n  @Input() iconName?: IconName;\n\n  /**\n   * The position of the icon.\n   * Default: 'right'.\n   *\n   * @type {ButtonIconPosition}\n   * @memberof FilterButtonComponent\n   */\n  @Input() iconPosition?: ButtonIconPosition = 'right';\n\n  /**\n   * Optional message to display if there are no options to select available\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() noOptionsMessage? = '';\n\n  /**\n   * Emits the list of selected values when the selection changes.\n   *\n   * @type {EventEmitter<string[]>}\n   * @memberof FilterButtonComponent\n   */\n  @Output() changed = new EventEmitter<FilterValue[]>();\n\n  /**\n   * Emits the option change event\n   *\n   * @type {EventEmitter<OptionChangeEvent>}\n   * @memberof FilterButtonComponent\n   */\n  @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof FilterButtonComponent\n   */\n  @HostBinding('attr.theme')\n  @Input()\n  applicationTheme: ApplicationTheme = 'light';\n\n  @ViewChild('overlayContainer') overlayContainer: any;\n  @ViewChildren('filterOption') filterOptions: QueryList<any>;\n\n  isOpen = signal<boolean>(false);\n  displayedLabel = signal<string>('');\n  tooltip = signal<string>('');\n  search = signal<string>('');\n  showTooltip: { [key: string]: boolean } = {};\n  displayedOptions = computed(() => {\n    let lastSectionTitle: string;\n    return this.options()\n      .map(option => {\n        lastSectionTitle = option.sectionTitle || lastSectionTitle;\n        return { ...option, sectionTitle: lastSectionTitle };\n      })\n      .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n  });\n  readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n  protected keyManager: FocusKeyManager<HTMLElement>;\n  protected translationContext = 'FILTER_BUTTON.';\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private readonly cdr: ChangeDetectorRef\n  ) {\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['value']) {\n      this.updateLabel();\n    }\n  }\n\n  clearValue(): void {\n    this.value = [];\n    this.updateLabel();\n    this.changed.emit(this.value);\n  }\n\n  outsideClick() {\n    window.setTimeout(() => {\n      this.isOpen.set(false);\n    });\n  }\n\n  toggle(): void {\n    this.isOpen.set(!this.isOpen());\n    if (this.isOpen()) {\n      this.keyManager = new FocusKeyManager(this.filterOptions).withWrap();\n      this.keyManager.setActiveItem(0);\n    }\n    this.cdr.markForCheck();\n  }\n\n  isSelected(value?: FilterValue) {\n    return this.value?.includes(value || '');\n  }\n\n  optionChanged(selected: boolean, option: FilterButtonOption) {\n    this.value = this.value || [];\n    if (this.singleSelection) {\n      this.value = selected ? [option.value] : [];\n    } else {\n      if (selected) {\n        this.value.push(option.value);\n      } else {\n        this.value.splice(this.value.indexOf(option.value), 1);\n      }\n    }\n    this.changed.emit(this.value);\n    this.optionChange.emit({ selected, option });\n    this.updateLabel();\n  }\n\n  keyDownHandler(ev: any) {\n    if (ev.key === IKeyboardEvent.ARROW_DOWN) {\n      ev.preventDefault();\n      this.keyManager.setNextItemActive();\n    } else if (ev.key === IKeyboardEvent.ARROW_UP) {\n      ev.preventDefault();\n      this.keyManager.setPreviousItemActive();\n    } else if (ev.key === IKeyboardEvent.ESCAPE) {\n      this.isOpen.set(false);\n    }\n  }\n\n  onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n    this.showTooltip[value] = isEllipsis;\n  }\n\n  private updateLabel() {\n    this.value = this.value || [];\n    let displayedLabel = '';\n    let tooltip = '';\n    const sortedLabels = this.options()\n      .filter(option => this.value.includes(option.value))\n      .map(item => item?.label || '');\n\n    if (sortedLabels.length > 0) {\n      displayedLabel = this.options().find(option => option.value === this.value[0])?.label || '';\n      tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n    }\n\n    if (this.value.length > 1) {\n      displayedLabel += ` (+${this.value.length - 1})`;\n    }\n    this.displayedLabel.set(displayedLabel);\n    this.tooltip.set(tooltip);\n    this.cdr.markForCheck();\n  }\n}\n","<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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\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)=\"search.set($event)\"\n            [applicationTheme]=\"applicationTheme\"\n          ></ui-field>\n        </div>\n      }\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          @for (section of displayedOptions(); track section; let i = $index) {\n            <div>\n              @if (section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle) {\n                <div class=\"section-title\">\n                  {{ section.sectionTitle }}\n                </div>\n              }\n              <div\n                class=\"item\"\n                [class.item-selected]=\"isSelected(section.value)\"\n                tabindex=\"0\"\n                (click)=\"optionChanged(!isSelected(section.value), section)\"\n                (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n              >\n                @if (singleSelection) {\n                  <ui-radio-button\n                    (click)=\"$event.stopPropagation()\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [selected]=\"isSelected(section.value)\"\n                    (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  >\n                  </ui-radio-button>\n                }\n                @if (!singleSelection) {\n                  <ui-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    [class.with-label-number]=\"section.labelNumber !== undefined\"\n                    [tabIndex]=\"i === 0 ? 0 : -1\"\n                    [checked]=\"isSelected(section.value)\"\n                    (changed)=\"optionChanged($event, section)\"\n                    [applicationTheme]=\"applicationTheme\"\n                    #filterOption\n                  ></ui-checkbox>\n                }\n                @if (section.icon) {\n                  <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n                }\n                <span\n                  #tooltip=\"matTooltip\"\n                  class=\"item-label\"\n                  uiEllipseText\n                  (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                  [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                  [matTooltipClass]=\"applicationTheme\"\n                >\n                  {{ section.label }}\n                </span>\n                @if (section.labelNumber !== undefined) {\n                  <span class=\"item-number\">({{ section.labelNumber }})</span>\n                }\n              </div>\n            </div>\n          }\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","import { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { FilterButtonComponent } from './filter-button.component';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { FormsModule } from '@angular/forms';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@NgModule({\n  declarations: [FilterButtonComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatTooltipModule,\n    OverlayModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    IconComponentModule,\n    CheckboxComponentModule,\n    FieldComponentModule,\n    EllipseTextDirective,\n    RadioButtonComponentModule,\n  ],\n  exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts","../../../components/filter-button/testgorilla-tgo-ui-components-filter-button.ts"],"sourcesContent":["import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  input,\n  Input,\n  OnChanges,\n  Optional,\n  Output,\n  QueryList,\n  signal,\n  SimpleChanges,\n  ViewChild,\n  ViewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonIconPosition } from '@testgorilla/tgo-ui/components/button';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\n@Component({\n  selector: 'ui-filter-button',\n  templateUrl: './filter-button.component.html',\n  styleUrls: ['./filter-button.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class FilterButtonComponent implements OnChanges {\n  @HostBinding() class = 'ui-filter-button';\n\n  /**\n   * The button label when no value is selected.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() label = '';\n\n  /**\n   * Optional message to display on the overflow bottom.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() message? = '';\n\n  /**\n   * List of selected values.\n   *\n   * @type {string[]}\n   * @memberof FilterButtonComponent\n   */\n  @Input() value: FilterValue[] = [];\n\n  /**\n   * Whether the component is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * List of options.\n   *\n   * @type {OptionType}\n   * @memberof FilterButtonComponent\n   */\n  options = input<FilterButtonOption[]>([]);\n\n  /**\n   * Whether the user should be allowed to clear the values.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() allowClear = true;\n\n  /**\n   * Whether the user should be allowed to select single or multiple values.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof FilterButtonComponent\n   */\n  @Input() singleSelection? = false;\n\n  /**\n   * The icon name to display.\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   *\n   **/\n\n  @Input() iconName?: IconName;\n\n  /**\n   * The position of the icon.\n   * Default: 'right'.\n   *\n   * @type {ButtonIconPosition}\n   * @memberof FilterButtonComponent\n   */\n  @Input() iconPosition?: ButtonIconPosition = 'right';\n\n  /**\n   * Optional message to display if there are no options to select available\n   *\n   * @type {string}\n   * @memberof FilterButtonComponent\n   */\n  @Input() noOptionsMessage? = '';\n\n  /**\n   * Emits the list of selected values when the selection changes.\n   *\n   * @type {EventEmitter<string[]>}\n   * @memberof FilterButtonComponent\n   */\n  @Output() changed = new EventEmitter<FilterValue[]>();\n\n  /**\n   * Emits the option change event\n   *\n   * @type {EventEmitter<OptionChangeEvent>}\n   * @memberof FilterButtonComponent\n   */\n  @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof FilterButtonComponent\n   */\n  @HostBinding('attr.theme')\n  @Input()\n  applicationTheme: ApplicationTheme = 'light';\n\n  @ViewChild('overlayContainer') overlayContainer: any;\n  @ViewChildren('filterOption') filterOptions: QueryList<any>;\n\n  isOpen = signal<boolean>(false);\n  displayedLabel = signal<string>('');\n  tooltip = signal<string>('');\n  search = signal<string>('');\n  showTooltip: { [key: string]: boolean } = {};\n  displayedOptions = computed(() => {\n    let lastSectionTitle: string;\n    return this.options()\n      .map(option => {\n        lastSectionTitle = option.sectionTitle || lastSectionTitle;\n        return { ...option, sectionTitle: lastSectionTitle };\n      })\n      .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n  });\n  readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n  protected keyManager: FocusKeyManager<HTMLElement>;\n  protected translationContext = 'FILTER_BUTTON.';\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private readonly cdr: ChangeDetectorRef\n  ) {\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['value']) {\n      this.updateLabel();\n    }\n  }\n\n  clearValue(): void {\n    this.value = [];\n    this.updateLabel();\n    this.changed.emit(this.value);\n  }\n\n  outsideClick() {\n    window.setTimeout(() => {\n      this.isOpen.set(false);\n    });\n  }\n\n  toggle(): void {\n    this.isOpen.set(!this.isOpen());\n    if (this.isOpen()) {\n      this.keyManager = new FocusKeyManager(this.filterOptions).withWrap();\n      this.keyManager.setActiveItem(0);\n    }\n    this.cdr.markForCheck();\n  }\n\n  isSelected(value?: FilterValue) {\n    return this.value?.includes(value || '');\n  }\n\n  optionChanged(selected: boolean, option: FilterButtonOption) {\n    this.value = this.value || [];\n    if (this.singleSelection) {\n      this.value = selected ? [option.value] : [];\n    } else {\n      if (selected) {\n        this.value.push(option.value);\n      } else {\n        this.value.splice(this.value.indexOf(option.value), 1);\n      }\n    }\n    this.changed.emit(this.value);\n    this.optionChange.emit({ selected, option });\n    this.updateLabel();\n  }\n\n  keyDownHandler(ev: any) {\n    if (ev.key === IKeyboardEvent.ARROW_DOWN) {\n      ev.preventDefault();\n      this.keyManager.setNextItemActive();\n    } else if (ev.key === IKeyboardEvent.ARROW_UP) {\n      ev.preventDefault();\n      this.keyManager.setPreviousItemActive();\n    } else if (ev.key === IKeyboardEvent.ESCAPE) {\n      this.isOpen.set(false);\n    }\n  }\n\n  onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n    this.showTooltip[value] = isEllipsis;\n  }\n\n  private updateLabel() {\n    this.value = this.value || [];\n    let displayedLabel = '';\n    let tooltip = '';\n    const sortedLabels = this.options()\n      .filter(option => this.value.includes(option.value))\n      .map(item => item?.label || '');\n\n    if (sortedLabels.length > 0) {\n      displayedLabel = this.options().find(option => option.value === this.value[0])?.label || '';\n      tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n    }\n\n    if (this.value.length > 1) {\n      displayedLabel += ` (+${this.value.length - 1})`;\n    }\n    this.displayedLabel.set(displayedLabel);\n    this.tooltip.set(tooltip);\n    this.cdr.markForCheck();\n  }\n}\n","<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 (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n        <ui-field\n          type=\"search\"\n          [showBottomContent]=\"false\"\n          [ngModel]=\"search()\"\n          (ngModelChange)=\"search.set($event)\"\n          [applicationTheme]=\"applicationTheme\"\n        ></ui-field>\n      </div>\n      <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\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          <div *ngFor=\"let section of displayedOptions(); index as i\">\n            <div\n              *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n              class=\"section-title\"\n            >\n              {{ section.sectionTitle }}\n            </div>\n            <div\n              class=\"item\"\n              [class.item-selected]=\"isSelected(section.value)\"\n              tabindex=\"0\"\n              (click)=\"optionChanged(!isSelected(section.value), section)\"\n              (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n            >\n              <ui-radio-button\n                (click)=\"$event.stopPropagation()\"\n                *ngIf=\"singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [selected]=\"isSelected(section.value)\"\n                (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              >\n              </ui-radio-button>\n              <ui-checkbox\n                (click)=\"$event.stopPropagation()\"\n                [class.with-label-number]=\"section.labelNumber !== undefined\"\n                *ngIf=\"!singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [checked]=\"isSelected(section.value)\"\n                (changed)=\"optionChanged($event, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              ></ui-checkbox>\n              <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n              <span\n                #tooltip=\"matTooltip\"\n                class=\"item-label\"\n                uiEllipseText\n                (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                [matTooltipClass]=\"applicationTheme\"\n              >\n                {{ section.label }}\n              </span>\n              <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n            </div>\n          </div>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n          <ui-button\n            *ngIf=\"allowClear\"\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          <div class=\"ui-filter-button-footer-message\">\n            {{ message }}\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\n</ng-container>\n","import { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { FilterButtonComponent } from './filter-button.component';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { FormsModule } from '@angular/forms';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@NgModule({\n  declarations: [FilterButtonComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatTooltipModule,\n    OverlayModule,\n    UiTranslatePipe,\n    ButtonComponentModule,\n    IconComponentModule,\n    CheckboxComponentModule,\n    FieldComponentModule,\n    EllipseTextDirective,\n    RadioButtonComponentModule,\n  ],\n  exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\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-gaussian-chart.mjs

@@ -6,7 +6,7 @@ import gaussian from 'gaussian';
 import * as i1 from '@angular/common';
 import { NgClass, CommonModule } from '@angular/common';
 import * as i2 from 'ng2-charts';
-import { BaseChartDirective } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4 from '@testgorilla/tgo-ui/components/icon';
@@ -107,7 +107,7 @@ class GaussianChartComponent {
             mode: 'nearest',
             displayColors: false,
             callbacks: {
-                label: (tooltipItem) => {
+                label: tooltipItem => {
                     const value = (this.gaussianDistribution.cdf(parseFloat(tooltipItem.label)) * 100).toFixed(2);
                     return `${value}%`;
                 },
@@ -242,12 +242,12 @@ class GaussianChartComponent {
             return 'PERCENTILE_LABEL_TYPES.WELL_ABOVE_AVERAGE';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: GaussianChartComponent, isStandalone: false, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.MemoizeFuncPipe, name: "memoizeFunc" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: GaussianChartComponent, isStandalone: false, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "<div\n  class=\"chart-section\"\n  *ngIf=\"score\"\n  [attr.aria-label]=\"\n    translationContext + 'ARIA_LABEL'\n      | uiTranslate\n        : {\n            score: score,\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n            bestCandidateScore: bestCandidateScore,\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n          }\n      | async\n  \"\n  tabindex=\"0\"\n>\n  <!-- Legend positioned at top -->\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n\n  <div class=\"chart-range-wrapper\">\n    <div class=\"normal-chart-container\">\n      <div class=\"normal-chart\">\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n        </canvas>\n        <div\n          class=\"overlay-icon\"\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n        >\n          <div class=\"drop-icon\">\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n            <span class=\"curve-score\">{{ score }}</span>\n          </div>\n        </div>\n        <div\n          class=\"best-score\"\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\n          [style.left]=\"overlayXBestScoreValue + '%'\"\n        >\n          <div\n            class=\"best-score-content\"\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n          >\n            <ui-icon name=\"Trophy\"></ui-icon>\n            {{ bestCandidateScore }}\n          </div>\n        </div>\n      </div>\n      <div class=\"overlay\">\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"range\">\n      <div>1</div>\n      <div>20</div>\n      <div>40</div>\n      <div>60</div>\n      <div>80</div>\n      <div>99</div>\n    </div>\n  </div>\n\n  <!-- Legend positioned at bottom -->\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.MemoizeFuncPipe, name: "memoizeFunc" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-gaussian-chart', standalone: false, template: "@if (score) {\n  <div\n    class=\"chart-section\"\n    [attr.aria-label]=\"\n      translationContext + 'ARIA_LABEL'\n        | uiTranslate\n          : {\n              score: score,\n              activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n              bestCandidateScore: bestCandidateScore,\n              activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n            }\n        | async\n    \"\n    tabindex=\"0\"\n  >\n    <!-- Legend positioned at top -->\n    @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n    <div class=\"chart-range-wrapper\">\n      <div class=\"normal-chart-container\">\n        <div class=\"normal-chart\">\n          <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n          </canvas>\n          <div\n            class=\"overlay-icon\"\n            [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n            [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n          >\n            <div class=\"drop-icon\">\n              <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n              <span class=\"curve-score\">{{ score }}</span>\n            </div>\n          </div>\n          <div\n            class=\"best-score\"\n            [style.height]=\"\n              [100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\n            \"\n            [style.bottom]=\"overlayYBestScoreValue + '%'\"\n            [style.left]=\"overlayXBestScoreValue + '%'\"\n          >\n            <div\n              class=\"best-score-content\"\n              [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n            >\n              <ui-icon name=\"Trophy\"></ui-icon>\n              {{ bestCandidateScore }}\n            </div>\n          </div>\n        </div>\n        <div class=\"overlay\">\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n              [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n            </div>\n          </div>\n          <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n            <div\n              class=\"column-item\"\n              [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n              [matTooltip]=\"\n                (translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\n              \"\n            >\n              {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"range\">\n        <div>1</div>\n        <div>20</div>\n        <div>40</div>\n        <div>60</div>\n        <div>80</div>\n        <div>99</div>\n      </div>\n    </div>\n    <!-- Legend positioned at bottom -->\n    @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n      <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
+            args: [{ selector: 'ui-gaussian-chart', standalone: false, template: "<div\n  class=\"chart-section\"\n  *ngIf=\"score\"\n  [attr.aria-label]=\"\n    translationContext + 'ARIA_LABEL'\n      | uiTranslate\n        : {\n            score: score,\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n            bestCandidateScore: bestCandidateScore,\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n          }\n      | async\n  \"\n  tabindex=\"0\"\n>\n  <!-- Legend positioned at top -->\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n\n  <div class=\"chart-range-wrapper\">\n    <div class=\"normal-chart-container\">\n      <div class=\"normal-chart\">\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n        </canvas>\n        <div\n          class=\"overlay-icon\"\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n        >\n          <div class=\"drop-icon\">\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n            <span class=\"curve-score\">{{ score }}</span>\n          </div>\n        </div>\n        <div\n          class=\"best-score\"\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\n          [style.left]=\"overlayXBestScoreValue + '%'\"\n        >\n          <div\n            class=\"best-score-content\"\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n          >\n            <ui-icon name=\"Trophy\"></ui-icon>\n            {{ bestCandidateScore }}\n          </div>\n        </div>\n      </div>\n      <div class=\"overlay\">\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"range\">\n      <div>1</div>\n      <div>20</div>\n      <div>40</div>\n      <div>60</div>\n      <div>80</div>\n      <div>99</div>\n    </div>\n  </div>\n\n  <!-- Legend positioned at bottom -->\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #d3d3d3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #d3d3d3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
         }], propDecorators: { score: [{
                 type: Input
             }], bestCandidateScore: [{
@@ -260,19 +260,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 Chart.register(...registerables);
 class GaussianChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponentModule, declarations: [GaussianChartComponent], imports: [NgClass,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponentModule, declarations: [GaussianChartComponent], imports: [NgClass,
             UiTranslatePipe,
-            BaseChartDirective,
+            NgChartsModule,
             MatTooltipModule,
             CommonModule,
             IconComponentModule,
             MemoizeFuncPipe], exports: [GaussianChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponentModule, imports: [MatTooltipModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponentModule, imports: [NgChartsModule,
+            MatTooltipModule,
             CommonModule,
             IconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GaussianChartComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [GaussianChartComponent],
@@ -280,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [
                         NgClass,
                         UiTranslatePipe,
-                        BaseChartDirective,
+                        NgChartsModule,
                         MatTooltipModule,
                         CommonModule,
                         IconComponentModule,