@testgorilla/tgo-ui 9.3.3 → 10.0.0

package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-donut-chart.mjs","sources":["../../../components/donut-chart/donut-chart.component.ts","../../../components/donut-chart/donut-chart.component.html","../../../components/donut-chart/donut-chart.component.module.ts","../../../components/donut-chart/testgorilla-tgo-ui-components-donut-chart.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ArcElement, ChartOptions, Plugin } from 'chart.js';\nimport DataLabelsPlugin from 'chartjs-plugin-datalabels';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { DonutChartData } from './donut-chart.component.model';\n\n@Component({\n  selector: 'ui-donut-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './donut-chart.component.html',\n  styleUrls: ['./donut-chart.component.scss'],\n  imports: [BaseChartDirective],\n})\nexport class DonutChartComponent {\n  donutChartData = input<DonutChartData>();\n  applicationTheme = input<ApplicationTheme>('light');\n\n  readonly chartData = computed(() => {\n    const data = this.donutChartData();\n    return data\n      ? {\n          labels: data.labels,\n          datasets: [\n            {\n              data: data.data,\n              backgroundColor: data.backgroundColor,\n              borderWidth: 0,\n            },\n          ],\n        }\n      : { labels: [], datasets: [] };\n  });\n\n  // Plugin to display the total in the center\n  centerTextPlugin: Plugin<'doughnut'> = {\n    id: 'centerText',\n    beforeDraw: chart => {\n      const {\n        ctx,\n        chartArea: { width, height },\n      } = chart;\n      const total = chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);\n      const padding = 32;\n      ctx.save();\n      ctx.font = 'bold 14px ModernGothic';\n      ctx.fillStyle = '#242424';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);\n      ctx.restore();\n    },\n  };\n\n  // Plugin to draw lines from the donut segments to the labels\n  labelLinePlugin: Plugin<'doughnut'> = {\n    id: 'labelLinePlugin',\n    afterDatasetDraw: chart => {\n      const { ctx, data } = chart;\n      const meta = chart.getDatasetMeta(0);\n      const radialOffset = 10; // length of the radial segment (elbow)\n      const horizontalLength = 20; // new length of the horizontal segment\n      const fontSize = 14;\n\n      ctx.save();\n      ctx.strokeStyle = '#666';\n      ctx.lineWidth = 1;\n      ctx.font = `${fontSize}px ModernGothic`;\n      ctx.fillStyle = '#242424';\n\n      (meta.data as ArcElement[]).forEach((arc, index) => {\n        const angle = (arc.startAngle + arc.endAngle) / 2;\n        const radius = arc.outerRadius;\n        const centerX = arc.x;\n        const centerY = arc.y;\n\n        // Start point: outer edge of the arc\n        const startX = centerX + Math.cos(angle) * radius;\n        const startY = centerY + Math.sin(angle) * radius;\n\n        // Elbow: short line outward\n        const midX = centerX + Math.cos(angle) * (radius + radialOffset);\n        const midY = centerY + Math.sin(angle) * (radius + radialOffset);\n\n        // Extended horizontal line\n        const direction = Math.cos(angle) >= 0 ? 1 : -1;\n        const endX = midX + direction * horizontalLength;\n        const endY = midY;\n\n        // Draw line with elbow\n        ctx.beginPath();\n        ctx.moveTo(startX, startY);\n        ctx.lineTo(midX, midY);\n        ctx.lineTo(endX, endY);\n        ctx.stroke();\n\n        // Draw value at the end\n        const value = data.datasets[0].data?.[index] ?? '';\n        const textX = endX + direction * 5;\n        ctx.textAlign = direction > 0 ? 'left' : 'right';\n        ctx.textBaseline = 'middle';\n        ctx.fillText(String(value), textX, endY);\n      });\n\n      ctx.restore();\n    },\n  };\n\n  public donutChartPlugins: Plugin<'doughnut'>[] = [DataLabelsPlugin, this.centerTextPlugin, this.labelLinePlugin];\n\n  public donutChartOptions: ChartOptions<'doughnut'> = {\n    responsive: true,\n    cutout: '65%',\n    aspectRatio: 2,\n    layout: {\n      padding: 16,\n    },\n    plugins: {\n      legend: {\n        onClick: () => null, // Disable legend click events\n        position: 'right',\n        labels: {\n          font: {\n            family: 'ModernGothic',\n            size: 14,\n          },\n          boxWidth: 14,\n          padding: 20,\n        },\n      },\n      tooltip: {\n        enabled: false,\n      },\n      datalabels: {\n        display: false,\n      },\n    },\n  };\n}\n","<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Chart, registerables } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { DonutChartComponent } from './donut-chart.component';\n\nChart.register(...registerables);\n\n@NgModule({\n  exports: [DonutChartComponent],\n  imports: [BaseChartDirective, DonutChartComponent],\n})\nexport class DonutChartComponentModule {}\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-donut-chart.mjs","sources":["../../../components/donut-chart/donut-chart.component.ts","../../../components/donut-chart/donut-chart.component.html","../../../components/donut-chart/donut-chart.component.module.ts","../../../components/donut-chart/testgorilla-tgo-ui-components-donut-chart.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ArcElement, ChartOptions, Plugin } from 'chart.js';\nimport DataLabelsPlugin from 'chartjs-plugin-datalabels';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { DonutChartData } from './donut-chart.component.model';\n\n@Component({\n  selector: 'ui-donut-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './donut-chart.component.html',\n  styleUrls: ['./donut-chart.component.scss'],\n  imports: [BaseChartDirective],\n})\nexport class DonutChartComponent {\n  donutChartData = input<DonutChartData>();\n  applicationTheme = input<ApplicationTheme>('light');\n\n  readonly chartData = computed(() => {\n    const data = this.donutChartData();\n    return data\n      ? {\n          labels: data.labels,\n          datasets: [\n            {\n              data: data.data,\n              backgroundColor: data.backgroundColor,\n              borderWidth: 0,\n            },\n          ],\n        }\n      : { labels: [], datasets: [] };\n  });\n\n  // Plugin to display the total in the center\n  centerTextPlugin: Plugin<'doughnut'> = {\n    id: 'centerText',\n    beforeDraw: chart => {\n      const {\n        ctx,\n        chartArea: { width, height },\n      } = chart;\n      const total = chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);\n      const padding = 32;\n      ctx.save();\n      ctx.font = 'bold 14px ModernGothic';\n      ctx.fillStyle = '#242424';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillText(total.toString(), (width + padding) / 2, (height + padding) / 2);\n      ctx.restore();\n    },\n  };\n\n  // Plugin to draw lines from the donut segments to the labels\n  labelLinePlugin: Plugin<'doughnut'> = {\n    id: 'labelLinePlugin',\n    afterDatasetDraw: chart => {\n      const { ctx, data } = chart;\n      const meta = chart.getDatasetMeta(0);\n      const radialOffset = 10; // length of the radial segment (elbow)\n      const horizontalLength = 20; // new length of the horizontal segment\n      const fontSize = 14;\n\n      ctx.save();\n      ctx.strokeStyle = '#666';\n      ctx.lineWidth = 1;\n      ctx.font = `${fontSize}px ModernGothic`;\n      ctx.fillStyle = '#242424';\n\n      (meta.data as ArcElement[]).forEach((arc, index) => {\n        const angle = (arc.startAngle + arc.endAngle) / 2;\n        const radius = arc.outerRadius;\n        const centerX = arc.x;\n        const centerY = arc.y;\n\n        // Start point: outer edge of the arc\n        const startX = centerX + Math.cos(angle) * radius;\n        const startY = centerY + Math.sin(angle) * radius;\n\n        // Elbow: short line outward\n        const midX = centerX + Math.cos(angle) * (radius + radialOffset);\n        const midY = centerY + Math.sin(angle) * (radius + radialOffset);\n\n        // Extended horizontal line\n        const direction = Math.cos(angle) >= 0 ? 1 : -1;\n        const endX = midX + direction * horizontalLength;\n        const endY = midY;\n\n        // Draw line with elbow\n        ctx.beginPath();\n        ctx.moveTo(startX, startY);\n        ctx.lineTo(midX, midY);\n        ctx.lineTo(endX, endY);\n        ctx.stroke();\n\n        // Draw value at the end\n        const value = data.datasets[0].data?.[index] ?? '';\n        const textX = endX + direction * 5;\n        ctx.textAlign = direction > 0 ? 'left' : 'right';\n        ctx.textBaseline = 'middle';\n        ctx.fillText(String(value), textX, endY);\n      });\n\n      ctx.restore();\n    },\n  };\n\n  public donutChartPlugins: Plugin<'doughnut'>[] = [DataLabelsPlugin, this.centerTextPlugin, this.labelLinePlugin];\n\n  public donutChartOptions: ChartOptions<'doughnut'> = {\n    responsive: true,\n    cutout: '65%',\n    aspectRatio: 2,\n    layout: {\n      padding: 16,\n    },\n    plugins: {\n      legend: {\n        onClick: () => null, // Disable legend click events\n        position: 'right',\n        labels: {\n          font: {\n            family: 'ModernGothic',\n            size: 14,\n          },\n          boxWidth: 14,\n          padding: 20,\n        },\n      },\n      tooltip: {\n        enabled: false,\n      },\n      datalabels: {\n        display: false,\n      },\n    },\n  };\n}\n","<div style=\"height: 200px\">\n  <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n  </canvas>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Chart, registerables } from 'chart.js';\nimport { BaseChartDirective } from 'ng2-charts';\n\nimport { DonutChartComponent } from './donut-chart.component';\n\nChart.register(...registerables);\n\n@NgModule({\n  exports: [DonutChartComponent],\n  imports: [BaseChartDirective, DonutChartComponent],\n})\nexport class DonutChartComponentModule {}\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-dropdown.mjs

@@ -158,8 +158,8 @@ class DropdownComponent {
         this.destroyRef = inject(DestroyRef);
         this.ngZone = inject(NgZone);
         this.optionSelected = null;
-        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : []));
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.errors = [];
         this.valueList = [];
         if (this.defaultAppTheme) {
@@ -320,10 +320,10 @@ class DropdownComponent {
         }
         this.onChange(this.matSelect.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor", panelClass: "panelClass" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "keydown.tab": "onTabPress($event)" }, properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customSelectedOptionTemplate", first: true, predicate: ["customSelectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i2.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor", panelClass: "panelClass" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "keydown.tab": "onTabPress()" }, properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customSelectedOptionTemplate", first: true, predicate: ["customSelectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i2.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormField,
@@ -340,7 +340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AsyncPipe,
                         UiTranslatePipe,
                         HasValidationErrorPipe,
-                    ], template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"] }]
+                    ], template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{
                 type: HostBinding
             }], label: [{
@@ -405,12 +405,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ['customSelectedOptionTemplate', { read: TemplateRef }]
             }], onTabPress: [{
                 type: HostListener,
-                args: ['keydown.tab', ['$event']]
+                args: ['keydown.tab']
             }] } });
 
 class DropdownComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
@@ -422,7 +422,7 @@ class DropdownComponentModule {
             ValidationErrorModule,
             HasValidationErrorPipe,
             DropdownComponent], exports: [DropdownComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
             MatFormFieldModule,
             MatInputModule,
             IconComponentModule,
@@ -433,7 +433,7 @@ class DropdownComponentModule {
             ValidationErrorModule,
             DropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-dropdown.mjs","sources":["../../../components/dropdown/dropdown.component.ts","../../../components/dropdown/dropdown.component.html","../../../components/dropdown/dropdown.component.module.ts","../../../components/dropdown/testgorilla-tgo-ui-components-dropdown.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  DestroyRef,\n  DoCheck,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  Output,\n  ProviderToken,\n  Renderer2,\n  signal,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  AfterViewInit,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatOption } from '@angular/material/core';\nimport { FloatLabelType, MatFormField, MatLabel, MatHint } from '@angular/material/form-field';\nimport { MatSelect, MatSelectChange, MatSelectTrigger, MatOption as MatOption_1 } from '@angular/material/select';\n\nimport { adjustLightness, ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport {\n  ApplicationTheme,\n  IKeyboardEvent,\n  UiTranslatePipe,\n  HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { OptionType } from './dropdown.model';\n\n/** The dropdown's form value: a single option value, or an array for multi-select. */\ntype DropdownValue = string | string[] | null | undefined;\n\n@Component({\n  selector: 'ui-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MatFormField,\n    NgClass,\n    MatLabel,\n    IconComponentModule,\n    MatSelect,\n    MatSelectTrigger,\n    NgTemplateOutlet,\n    MatOption_1,\n    ButtonComponent,\n    MatHint,\n    ValidationErrorModule,\n    AsyncPipe,\n    UiTranslatePipe,\n    HasValidationErrorPipe,\n  ],\n})\n// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\nexport class DropdownComponent implements OnInit, ControlValueAccessor, DoCheck, OnChanges, AfterViewInit {\n  @HostBinding() class = 'ui-dropdown';\n\n  findValueByValueField = (item: OptionType) => item[this.valueField] === this.value;\n  /**\n   * Text content will be applied to the input element if present.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() label? = '';\n\n  /**\n   * Icon to display alongside the label\n   *\n   * @type {IconName}\n   * @memberof DropdownComponent\n   */\n  @Input() labelIcon?: IconName;\n\n  /**\n   * Indicates if this field is filled by AI\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() isAIVariant = false;\n\n  /**\n   * Input name attribute\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() name: string;\n  /**\n   * Placeholder to be shown if no value has been selected.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() placeholder: string;\n\n  /**\n   * Unique id of the element.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() id? = '';\n\n  /**\n   * Input value\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() value?: string;\n\n  /**\n   * Whether the component is in an error state.\n   *\n   * @type {string[]}\n   * @memberof DropdownComponent\n   */\n  @Input() errors?: string[];\n\n  /**\n   * Whether the component is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * List of options.\n   *\n   * @type {OptionType}\n   * @memberof DropdownComponent\n   */\n  @Input() valueList: OptionType[] = [];\n\n  /**\n   * Whether the user should be allowed to clear the values.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowClear = true;\n\n  /**\n   * This will allow the user to select multiple values at once.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowMultipleSelection? = false;\n\n  /**\n   * Whether the component is required.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() required = false;\n\n  /**\n   * Show reserved content below form field\n   * @property showBottomContent\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() showBottomContent = true;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof DropdownComponent\n   */\n  @HostBinding('attr.theme')\n  @Input()\n  applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Hide in build errors for Reactive Forms\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideBuiltInErrors = false;\n\n  /**\n   * Hide label in errors\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideLabelInErrors = false;\n\n  /**\n   * @property textField\n   * @description The field to be used as the display text in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() textField = '';\n\n  /**\n   * @property valueField\n   * @description The field to be used as the value in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() valueField = '';\n\n  @Input() hasError = false;\n\n  /**\n   * Color of the option hover.\n   * Defaults to Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() companyColor = '';\n\n  /**\n   * Class to be applied to the panel.\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() panelClass = '';\n\n  @Output() closed = new EventEmitter<void>();\n  @Output() opened = new EventEmitter<void>();\n\n  @ViewChild('matSelect') matSelect: MatSelect;\n\n  @ContentChild('customOptionTemplate', { read: TemplateRef }) customOptionTemplate: TemplateRef<unknown> | null;\n  @ContentChild('customSelectedOptionTemplate', { read: TemplateRef })\n  customSelectedOptionTemplate: TemplateRef<unknown> | null;\n\n  @HostListener('keydown.tab', ['$event'])\n  onTabPress(): void {\n    this.matSelect?.close();\n  }\n\n  /**\n   * @ignore\n   */\n  onChange: (value: DropdownValue) => void = () => {};\n\n  /**\n   * @ignore\n   */\n  onTouch = () => {};\n\n  private readonly defaultAppTheme = inject(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    {\n      optional: true,\n    }\n  );\n  private readonly cdr = inject(ChangeDetectorRef);\n  public ngControl = inject(NgControl, { optional: true, self: true });\n  private readonly renderer2 = inject(Renderer2);\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly ngZone = inject(NgZone);\n\n  constructor() {\n    this.errors = [];\n    this.valueList = [];\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n\n    if (this.ngControl !== null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  floatLabel: FloatLabelType;\n  classError: string;\n  errorsLength: boolean;\n  showCheck: boolean;\n  optionSelected: MatOption | null = null;\n  keyboardFocused = signal<boolean>(false);\n  isOpen = signal(false);\n\n  /**\n   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n   * to display validation errors that might happen (e.g. required)\n   */\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngDoCheck(): void {\n    if (this.ngControl?.touched || this.ngControl?.errors) {\n      this.cdr.markForCheck();\n    }\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngOnInit(): void {\n    this.errorsLength = this.setErrorsLength();\n    this.setStyleVariable();\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['companyColor']) {\n      this.setStyleVariable();\n    }\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngAfterViewInit(): void {\n    /* eslint-disable no-underscore-dangle -- MatSelect internals (_elementRef/_handleKeydown) for focus monitoring + key handling */\n    if (this.matSelect._elementRef) {\n      this.focusMonitor\n        .monitor(this.matSelect._elementRef as ElementRef<HTMLElement>)\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe(origin =>\n          this.ngZone.run(() => {\n            this.keyboardFocused.set(origin === 'keyboard');\n          })\n        );\n    }\n\n    this.matSelect._handleKeydown = this.onKeydown.bind(this);\n    /* eslint-enable no-underscore-dangle */\n  }\n\n  clearValue(event: Event): void {\n    event?.stopPropagation();\n    this.value = '';\n    this.optionSelected = null;\n    this.matSelect.value = null;\n    this.onChange(this.value);\n  }\n\n  //Save select value\n  onChangeOption(event: MatSelectChange) {\n    this.value = event.value as string;\n    this.errorsLength = this.setErrorsLength();\n    this.onTouch();\n    this.onChange(this.value);\n  }\n\n  //Set errors length for validation\n  setErrorsLength(): boolean {\n    if (this.errors) {\n      return this.errors.length > 0 ? true : false;\n    }\n    return false;\n  }\n\n  writeValue(value?: string): void {\n    if (value) {\n      this.value = value ?? '';\n    } else {\n      this.value = '';\n    }\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: DropdownValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  onClosed(): void {\n    this.onTouch();\n    this.closed.emit();\n    this.isOpen.set(false);\n  }\n\n  onOpened(): void {\n    this.opened.emit();\n    this.isOpen.set(true);\n  }\n\n  setStyleVariable() {\n    const active = this.companyColor ? adjustLightness(this.companyColor, 'pressed') : '#FFE6FA';\n    const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';\n    document.body.style.setProperty('--dropdown-color-option-active', active);\n    document.body.style.setProperty('--dropdown-color-option-hover', hover);\n  }\n\n  onKeydown($event: KeyboardEvent) {\n    const key = $event.key;\n    if (key === (IKeyboardEvent.ARROW_DOWN as string) || key === (IKeyboardEvent.ARROW_UP as string)) {\n      this.handleArrowNavigation($event);\n    } else if (key === (IKeyboardEvent.SPACE as string) || key === (IKeyboardEvent.ENTER as string)) {\n      this.handleSelectionKey();\n    } else if (key === (IKeyboardEvent.HOME as string)) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setFirstItemActive();\n    } else if (key === (IKeyboardEvent.END as string)) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setLastItemActive();\n    }\n  }\n\n  private handleArrowNavigation($event: KeyboardEvent): void {\n    if (!this.matSelect.panelOpen) {\n      this.matSelect.open();\n      return;\n    }\n    const selectedItem = this.optionSelected ?? this.matSelect.options.first;\n    const index = this.matSelect.options.toArray().indexOf(selectedItem);\n    const nextIndex =\n      $event.key === (IKeyboardEvent.ARROW_DOWN as string)\n        ? index + 1 > this.matSelect.options.length - 1\n          ? index\n          : index + 1\n        : index - 1;\n    this.optionSelected = this.matSelect.options.toArray()[nextIndex];\n\n    if (this.optionSelected) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setActiveItem(this.optionSelected);\n    }\n  }\n\n  private handleSelectionKey(): void {\n    if (!this.isOpen()) {\n      this.matSelect.open();\n      return;\n    }\n    if (!this.optionSelected) {\n      this.matSelect.value = this.matSelect.options.first.value as string;\n      this.onChange(this.matSelect.value as string);\n      return;\n    }\n    const selectedValue = this.optionSelected.value as string;\n    if (!this.allowMultipleSelection) {\n      this.matSelect.value = selectedValue;\n      this.matSelect.close();\n    } else if (this.matSelect.value) {\n      const currentValue = this.matSelect.value as string[];\n      this.matSelect.value = currentValue.includes(selectedValue)\n        ? currentValue.filter(value => value !== selectedValue)\n        : [...currentValue, selectedValue];\n    } else {\n      this.matSelect.value = [selectedValue];\n    }\n    this.onChange(this.matSelect.value as DropdownValue);\n  }\n}\n","<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatInputModule,\n    IconComponentModule,\n    FormsModule,\n    ReactiveFormsModule,\n    ButtonComponentModule,\n    MatSelectModule,\n    UiTranslatePipe,\n    ValidationErrorModule,\n    HasValidationErrorPipe,\n    DropdownComponent,\n  ],\n  exports: [DropdownComponent],\n})\nexport class DropdownComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["MatOption_1"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-dropdown.mjs","sources":["../../../components/dropdown/dropdown.component.ts","../../../components/dropdown/dropdown.component.html","../../../components/dropdown/dropdown.component.module.ts","../../../components/dropdown/testgorilla-tgo-ui-components-dropdown.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  DestroyRef,\n  DoCheck,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  Output,\n  ProviderToken,\n  Renderer2,\n  signal,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  AfterViewInit,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatOption } from '@angular/material/core';\nimport { FloatLabelType, MatFormField, MatLabel, MatHint } from '@angular/material/form-field';\nimport { MatSelect, MatSelectChange, MatSelectTrigger, MatOption as MatOption_1 } from '@angular/material/select';\n\nimport { adjustLightness, ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport {\n  ApplicationTheme,\n  IKeyboardEvent,\n  UiTranslatePipe,\n  HasValidationErrorPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { OptionType } from './dropdown.model';\n\n/** The dropdown's form value: a single option value, or an array for multi-select. */\ntype DropdownValue = string | string[] | null | undefined;\n\n@Component({\n  selector: 'ui-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MatFormField,\n    NgClass,\n    MatLabel,\n    IconComponentModule,\n    MatSelect,\n    MatSelectTrigger,\n    NgTemplateOutlet,\n    MatOption_1,\n    ButtonComponent,\n    MatHint,\n    ValidationErrorModule,\n    AsyncPipe,\n    UiTranslatePipe,\n    HasValidationErrorPipe,\n  ],\n})\n// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\nexport class DropdownComponent implements OnInit, ControlValueAccessor, DoCheck, OnChanges, AfterViewInit {\n  @HostBinding() class = 'ui-dropdown';\n\n  findValueByValueField = (item: OptionType) => item[this.valueField] === this.value;\n  /**\n   * Text content will be applied to the input element if present.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() label? = '';\n\n  /**\n   * Icon to display alongside the label\n   *\n   * @type {IconName}\n   * @memberof DropdownComponent\n   */\n  @Input() labelIcon?: IconName;\n\n  /**\n   * Indicates if this field is filled by AI\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() isAIVariant = false;\n\n  /**\n   * Input name attribute\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() name: string;\n  /**\n   * Placeholder to be shown if no value has been selected.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() placeholder: string;\n\n  /**\n   * Unique id of the element.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() id? = '';\n\n  /**\n   * Input value\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() value?: string;\n\n  /**\n   * Whether the component is in an error state.\n   *\n   * @type {string[]}\n   * @memberof DropdownComponent\n   */\n  @Input() errors?: string[];\n\n  /**\n   * Whether the component is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * List of options.\n   *\n   * @type {OptionType}\n   * @memberof DropdownComponent\n   */\n  @Input() valueList: OptionType[] = [];\n\n  /**\n   * Whether the user should be allowed to clear the values.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowClear = true;\n\n  /**\n   * This will allow the user to select multiple values at once.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowMultipleSelection? = false;\n\n  /**\n   * Whether the component is required.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() required = false;\n\n  /**\n   * Show reserved content below form field\n   * @property showBottomContent\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() showBottomContent = true;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof DropdownComponent\n   */\n  @HostBinding('attr.theme')\n  @Input()\n  applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Hide in build errors for Reactive Forms\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideBuiltInErrors = false;\n\n  /**\n   * Hide label in errors\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideLabelInErrors = false;\n\n  /**\n   * @property textField\n   * @description The field to be used as the display text in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() textField = '';\n\n  /**\n   * @property valueField\n   * @description The field to be used as the value in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() valueField = '';\n\n  @Input() hasError = false;\n\n  /**\n   * Color of the option hover.\n   * Defaults to Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() companyColor = '';\n\n  /**\n   * Class to be applied to the panel.\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() panelClass = '';\n\n  @Output() closed = new EventEmitter<void>();\n  @Output() opened = new EventEmitter<void>();\n\n  @ViewChild('matSelect') matSelect: MatSelect;\n\n  @ContentChild('customOptionTemplate', { read: TemplateRef }) customOptionTemplate: TemplateRef<unknown> | null;\n  @ContentChild('customSelectedOptionTemplate', { read: TemplateRef })\n  customSelectedOptionTemplate: TemplateRef<unknown> | null;\n\n  @HostListener('keydown.tab')\n  onTabPress(): void {\n    this.matSelect?.close();\n  }\n\n  /**\n   * @ignore\n   */\n  onChange: (value: DropdownValue) => void = () => {};\n\n  /**\n   * @ignore\n   */\n  onTouch = () => {};\n\n  private readonly defaultAppTheme = inject(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    {\n      optional: true,\n    }\n  );\n  private readonly cdr = inject(ChangeDetectorRef);\n  public ngControl = inject(NgControl, { optional: true, self: true });\n  private readonly renderer2 = inject(Renderer2);\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly ngZone = inject(NgZone);\n\n  constructor() {\n    this.errors = [];\n    this.valueList = [];\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n\n    if (this.ngControl !== null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  floatLabel: FloatLabelType;\n  classError: string;\n  errorsLength: boolean;\n  showCheck: boolean;\n  optionSelected: MatOption | null = null;\n  keyboardFocused = signal<boolean>(false);\n  isOpen = signal(false);\n\n  /**\n   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n   * to display validation errors that might happen (e.g. required)\n   */\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngDoCheck(): void {\n    if (this.ngControl?.touched || this.ngControl?.errors) {\n      this.cdr.markForCheck();\n    }\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngOnInit(): void {\n    this.errorsLength = this.setErrorsLength();\n    this.setStyleVariable();\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['companyColor']) {\n      this.setStyleVariable();\n    }\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle\n  ngAfterViewInit(): void {\n    /* eslint-disable no-underscore-dangle -- MatSelect internals (_elementRef/_handleKeydown) for focus monitoring + key handling */\n    if (this.matSelect._elementRef) {\n      this.focusMonitor\n        .monitor(this.matSelect._elementRef as ElementRef<HTMLElement>)\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe(origin =>\n          this.ngZone.run(() => {\n            this.keyboardFocused.set(origin === 'keyboard');\n          })\n        );\n    }\n\n    this.matSelect._handleKeydown = this.onKeydown.bind(this);\n    /* eslint-enable no-underscore-dangle */\n  }\n\n  clearValue(event: Event): void {\n    event?.stopPropagation();\n    this.value = '';\n    this.optionSelected = null;\n    this.matSelect.value = null;\n    this.onChange(this.value);\n  }\n\n  //Save select value\n  onChangeOption(event: MatSelectChange) {\n    this.value = event.value as string;\n    this.errorsLength = this.setErrorsLength();\n    this.onTouch();\n    this.onChange(this.value);\n  }\n\n  //Set errors length for validation\n  setErrorsLength(): boolean {\n    if (this.errors) {\n      return this.errors.length > 0 ? true : false;\n    }\n    return false;\n  }\n\n  writeValue(value?: string): void {\n    if (value) {\n      this.value = value ?? '';\n    } else {\n      this.value = '';\n    }\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: DropdownValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  onClosed(): void {\n    this.onTouch();\n    this.closed.emit();\n    this.isOpen.set(false);\n  }\n\n  onOpened(): void {\n    this.opened.emit();\n    this.isOpen.set(true);\n  }\n\n  setStyleVariable() {\n    const active = this.companyColor ? adjustLightness(this.companyColor, 'pressed') : '#FFE6FA';\n    const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';\n    document.body.style.setProperty('--dropdown-color-option-active', active);\n    document.body.style.setProperty('--dropdown-color-option-hover', hover);\n  }\n\n  onKeydown($event: KeyboardEvent) {\n    const key = $event.key;\n    if (key === (IKeyboardEvent.ARROW_DOWN as string) || key === (IKeyboardEvent.ARROW_UP as string)) {\n      this.handleArrowNavigation($event);\n    } else if (key === (IKeyboardEvent.SPACE as string) || key === (IKeyboardEvent.ENTER as string)) {\n      this.handleSelectionKey();\n    } else if (key === (IKeyboardEvent.HOME as string)) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setFirstItemActive();\n    } else if (key === (IKeyboardEvent.END as string)) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setLastItemActive();\n    }\n  }\n\n  private handleArrowNavigation($event: KeyboardEvent): void {\n    if (!this.matSelect.panelOpen) {\n      this.matSelect.open();\n      return;\n    }\n    const selectedItem = this.optionSelected ?? this.matSelect.options.first;\n    const index = this.matSelect.options.toArray().indexOf(selectedItem);\n    const nextIndex =\n      $event.key === (IKeyboardEvent.ARROW_DOWN as string)\n        ? index + 1 > this.matSelect.options.length - 1\n          ? index\n          : index + 1\n        : index - 1;\n    this.optionSelected = this.matSelect.options.toArray()[nextIndex];\n\n    if (this.optionSelected) {\n      // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation\n      this.matSelect._keyManager.setActiveItem(this.optionSelected);\n    }\n  }\n\n  private handleSelectionKey(): void {\n    if (!this.isOpen()) {\n      this.matSelect.open();\n      return;\n    }\n    if (!this.optionSelected) {\n      this.matSelect.value = this.matSelect.options.first.value as string;\n      this.onChange(this.matSelect.value as string);\n      return;\n    }\n    const selectedValue = this.optionSelected.value as string;\n    if (!this.allowMultipleSelection) {\n      this.matSelect.value = selectedValue;\n      this.matSelect.close();\n    } else if (this.matSelect.value) {\n      const currentValue = this.matSelect.value as string[];\n      this.matSelect.value = currentValue.includes(selectedValue)\n        ? currentValue.filter(value => value !== selectedValue)\n        : [...currentValue, selectedValue];\n    } else {\n      this.matSelect.value = [selectedValue];\n    }\n    this.onChange(this.matSelect.value as DropdownValue);\n  }\n}\n","<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      data-testid=\"ui-dropdown-select\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatInputModule,\n    IconComponentModule,\n    FormsModule,\n    ReactiveFormsModule,\n    ButtonComponentModule,\n    MatSelectModule,\n    UiTranslatePipe,\n    ValidationErrorModule,\n    HasValidationErrorPipe,\n    DropdownComponent,\n  ],\n  exports: [DropdownComponent],\n})\nexport class DropdownComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["MatOption_1"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs

@@ -35,10 +35,10 @@ class ElevationShadowComponent {
             this.applicationTheme = defaultAppTheme;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ElevationShadowComponent, isStandalone: true, selector: "ui-elevation-shadow", inputs: { elevationType: "elevationType", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div class=\"elevation-shadow\" [ngClass]=\"elevationType\" [attr.theme]=\"applicationTheme\">\n  <ng-content></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.elevation-shadow.modal{border:2px solid #e0e0e0;box-shadow:2px 24px 48px 8px #00000014;border-radius:8px}.elevation-shadow.default{border:2px solid #e0e0e0;box-shadow:0 8px 24px 4px #00000014;border-radius:8px}.elevation-shadow[theme=dark].hover-state,.elevation-shadow[theme=dark].default,.elevation-shadow[theme=light].hover-state,.elevation-shadow[theme=light].default{box-shadow:0 4px 16px 0 0 4px 16px 0 #24242414;border:2px solid #242424;border-radius:10px}.elevation-shadow[theme=dark].notification,.elevation-shadow[theme=light].notification{box-shadow:0 4px 16px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].page-card,.elevation-shadow[theme=light].page-card{box-shadow:0 4px 100px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].modal,.elevation-shadow[theme=light].modal{box-shadow:0 4px 100px #24242414;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ElevationShadowComponent, isStandalone: true, selector: "ui-elevation-shadow", inputs: { elevationType: "elevationType", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div class=\"elevation-shadow\" [ngClass]=\"elevationType\" [attr.theme]=\"applicationTheme\">\n  <ng-content></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.elevation-shadow.modal{border:2px solid #e0e0e0;box-shadow:2px 24px 48px 8px #00000014;border-radius:8px}.elevation-shadow.default{border:2px solid #e0e0e0;box-shadow:0 8px 24px 4px #00000014;border-radius:8px}.elevation-shadow[theme=dark].hover-state,.elevation-shadow[theme=dark].default,.elevation-shadow[theme=light].hover-state,.elevation-shadow[theme=light].default{box-shadow:0 4px 16px 0 0 4px 16px 0 #24242414;border:2px solid #242424;border-radius:10px}.elevation-shadow[theme=dark].notification,.elevation-shadow[theme=light].notification{box-shadow:0 4px 16px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].page-card,.elevation-shadow[theme=light].page-card{box-shadow:0 4px 100px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].modal,.elevation-shadow[theme=light].modal{box-shadow:0 4px 100px #24242414;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-elevation-shadow', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"elevation-shadow\" [ngClass]=\"elevationType\" [attr.theme]=\"applicationTheme\">\n  <ng-content></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.elevation-shadow.modal{border:2px solid #e0e0e0;box-shadow:2px 24px 48px 8px #00000014;border-radius:8px}.elevation-shadow.default{border:2px solid #e0e0e0;box-shadow:0 8px 24px 4px #00000014;border-radius:8px}.elevation-shadow[theme=dark].hover-state,.elevation-shadow[theme=dark].default,.elevation-shadow[theme=light].hover-state,.elevation-shadow[theme=light].default{box-shadow:0 4px 16px 0 0 4px 16px 0 #24242414;border:2px solid #242424;border-radius:10px}.elevation-shadow[theme=dark].notification,.elevation-shadow[theme=light].notification{box-shadow:0 4px 16px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].page-card,.elevation-shadow[theme=light].page-card{box-shadow:0 4px 100px #2424240a;border-radius:10px}.elevation-shadow[theme=dark].modal,.elevation-shadow[theme=light].modal{box-shadow:0 4px 100px #24242414;border-radius:10px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -53,11 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class ElevationShadowComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponentModule, imports: [CommonModule, ElevationShadowComponent], exports: [ElevationShadowComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponentModule, imports: [CommonModule, ElevationShadowComponent], exports: [ElevationShadowComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ElevationShadowComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ElevationShadowComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ElevationShadowComponent],