npm - @ascentgl/ads-ui - Versions diffs - 0.0.69 → 0.0.71 - Mend

@ascentgl/ads-ui 0.0.69 → 0.0.71

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

Files changed (6) hide show

package/fesm2022/ascentgl-ads-ui.mjs CHANGED Viewed

@@ -2940,11 +2940,11 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
         this.toggleOption(option); // Update the option on checkbox change
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option [value]=\"option\" [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\">\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.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: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option\n            [id]=\"id + '-option-' + ($index + 1)\"\n            [value]=\"option\"\n            [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n          >\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                [showFooter]=\"false\"\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.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: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option [value]=\"option\" [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\">\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"] }]
+            args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option\n            [id]=\"id + '-option-' + ($index + 1)\"\n            [value]=\"option\"\n            [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n          >\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                [showFooter]=\"false\"\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { displayValueFormatter: [{
                 type: Input
             }], mode: [{
@@ -3086,11 +3086,11 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option [value]=\"option\" [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\">\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.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: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option\n            [id]=\"id + '-option-' + ($index + 1)\"\n            [value]=\"option\"\n            [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n          >\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                [showFooter]=\"false\"\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.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: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option [value]=\"option\" [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\">\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"] }]
+            args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      (click)=\"onOpened()\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': !showExclamation,\n        pill: mode === 'pill',\n        chips: showChips && isMultiselect,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <!--&nbsp; is required in placeholder for smoother animation -->\n      <mat-select\n        #panel\n        [disableRipple]=\"true\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder || '&nbsp;'\"\n        [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n        [disableOptionCentering]=\"true\"\n        [required]=\"required\"\n        [formControl]=\"valueControl\"\n        [multiple]=\"isMultiselect\"\n      >\n        @if (showChips && isMultiselect) {\n          <mat-select-trigger>\n            <div class=\"tag-container\">\n              @for (option of valueControl.value; track $index) {\n                <ads-tag\n                  [tag]=\"chipName(option)\"\n                  [color]=\"Colors.Medium\"\n                  [id]=\"'' + $index\"\n                  (remove)=\"onOptionRemoved(option)\"\n                  (click)=\"$event.stopPropagation()\"\n                />\n              }\n            </div>\n          </mat-select-trigger>\n        }\n\n        @if (hasEmptyValue) {\n          <mat-option [value]=\"undefined\"></mat-option>\n        }\n\n        @for (option of displayedOptionsArray; track $index) {\n          <mat-option\n            [id]=\"id + '-option-' + ($index + 1)\"\n            [value]=\"option\"\n            [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n          >\n            @if (isMultiselect && checkSelected) {\n              <ads-checkbox\n                [showFooter]=\"false\"\n                width=\"100%\"\n                (change)=\"onCheckboxChange(option)\"\n                [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              />\n            } @else {\n              <span\n                [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              ></span>\n            }\n          </mat-option>\n        }\n      </mat-select>\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n        </button>\n      }\n      <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n        <ads-icon\n          matTextSuffix\n          name=\"chevron_down\"\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\n          [theme]=\"'iconPrimary'\"\n          class=\"chevron-down\"\n        />\n      </button>\n    </mat-form-field>\n\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { showChips: [{
                 type: Input
             }] } });
@@ -5636,7 +5636,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 class AdsSnackbarComponent {
-    constructor() {
+    /** @ignore */
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.data = inject(MAT_SNACK_BAR_DATA);
         this.snackBarRef = inject(MatSnackBarRef);
         this.defaultButtonCaption = 'Close';
@@ -5647,18 +5649,25 @@ class AdsSnackbarComponent {
         return panelClass === PanelClass.Error ? 'error' : 'secondary';
     }
     /** @ignore */
+    ngAfterViewInit() {
+        const overlayWrapper = this.elementRef.nativeElement.closest('.cdk-global-overlay-wrapper');
+        if (overlayWrapper) {
+            overlayWrapper.style.zIndex = '1100';
+        }
+    }
+    /** @ignore */
     onSnackbarClick() {
         if (this.data.closeOnClick) {
             this.snackBarRef.dismiss();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsSnackbarComponent, isStandalone: false, selector: "ads-snackbar", host: { listeners: { "click": "onSnackbarClick()" } }, ngImport: i0, template: "<div class=\"container\" (click)=\"onSnackbarClick()\">\n  <div>\n    @if (data.title) {\n      <div class=\"snackbar-title\" [innerHTML]=\"data.title\"></div>\n    }\n    <span class=\"snackbar-details\" [innerHTML]=\"data.message\"></span>\n  </div>\n  @if (!data.hideActionButton) {\n    <ads-button [variant]=\"buttonPanelClass\" (click)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\">\n      {{ data.buttonCaption ?? defaultButtonCaption }}\n    </ads-button>\n  }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"], dependencies: [{ kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsSnackbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ads-snackbar', standalone: false, template: "<div class=\"container\" (click)=\"onSnackbarClick()\">\n  <div>\n    @if (data.title) {\n      <div class=\"snackbar-title\" [innerHTML]=\"data.title\"></div>\n    }\n    <span class=\"snackbar-details\" [innerHTML]=\"data.message\"></span>\n  </div>\n  @if (!data.hideActionButton) {\n    <ads-button [variant]=\"buttonPanelClass\" (click)=\"snackBarRef.dismissWithAction(); $event.stopPropagation()\">\n      {{ data.buttonCaption ?? defaultButtonCaption }}\n    </ads-button>\n  }\n</div>\n", styles: [".container{display:flex;justify-content:space-between;gap:24px;width:80vw}.container .snackbar-title{color:var(--color-white);font-size:16px;font-weight:400;line-height:21px}.container .snackbar-details{color:var(--color-white);font-size:14px;font-weight:400;line-height:18px}ads-button{white-space:nowrap}@media (width <= 500px){.container{width:100%}}\n"] }]
-        }], propDecorators: { onSnackbarClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onSnackbarClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -6392,11 +6401,11 @@ class AdsVerticalStepperComponent {
         this.focusedStepIndex = this.steps().findIndex((step) => step.status === VerticalStepStatus.Current);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsVerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsVerticalStepperComponent, isStandalone: false, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n  @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n    <div\n      class=\"step\"\n      [class.focused]=\"step.status === VerticalStepStatus.Current\"\n      [ngClass]=\"{ clickable: step.onClick }\"\n    >\n      @if (!first) {\n        <div class=\"line-container\">\n          <div></div>\n          <div></div>\n        </div>\n      }\n\n      <div\n        class=\"step-icon-wrapper\"\n        (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n        [ngClass]=\"step.status\"\n        [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n      >\n        <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n          <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n        </div>\n\n        <span class=\"title\">{{ step.title }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsVerticalStepperComponent, isStandalone: false, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n  @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n    <div\n      class=\"step\"\n      [class.focused]=\"step.status === VerticalStepStatus.Current\"\n      [ngClass]=\"{ clickable: step.onClick }\"\n    >\n      @if (!first) {\n        <div class=\"line-container\">\n          <div></div>\n          <div></div>\n        </div>\n      }\n\n      <div\n        [id]=\"step.id\"\n        class=\"step-icon-wrapper\"\n        (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n        [ngClass]=\"step.status\"\n        [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n      >\n        <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n          <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n        </div>\n\n        <span class=\"title\">{{ step.title }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsVerticalStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-vertical-stepper', standalone: false, template: "<div class=\"vertical-stepper\">\n  @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n    <div\n      class=\"step\"\n      [class.focused]=\"step.status === VerticalStepStatus.Current\"\n      [ngClass]=\"{ clickable: step.onClick }\"\n    >\n      @if (!first) {\n        <div class=\"line-container\">\n          <div></div>\n          <div></div>\n        </div>\n      }\n\n      <div\n        class=\"step-icon-wrapper\"\n        (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n        [ngClass]=\"step.status\"\n        [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n      >\n        <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n          <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n        </div>\n\n        <span class=\"title\">{{ step.title }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"] }]
+            args: [{ selector: 'ads-vertical-stepper', standalone: false, template: "<div class=\"vertical-stepper\">\n  @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n    <div\n      class=\"step\"\n      [class.focused]=\"step.status === VerticalStepStatus.Current\"\n      [ngClass]=\"{ clickable: step.onClick }\"\n    >\n      @if (!first) {\n        <div class=\"line-container\">\n          <div></div>\n          <div></div>\n        </div>\n      }\n\n      <div\n        [id]=\"step.id\"\n        class=\"step-icon-wrapper\"\n        (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n        [ngClass]=\"step.status\"\n        [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n      >\n        <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n          <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n        </div>\n\n        <span class=\"title\">{{ step.title }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}\n"] }]
         }] });
 class AdsVerticalStepperModule {
@@ -6471,11 +6480,11 @@ class AdsHorizontalNavBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsHorizontalNavBarComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsHorizontalNavBarComponent, isStandalone: false, selector: "ads-horizontal-nav-bar", inputs: { links: "links" }, ngImport: i0, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\">\n  @for (link of links; track $index) {\n    <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n      {{ link.text }}\n    </a>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n  <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsHorizontalNavBarComponent, isStandalone: false, selector: "ads-horizontal-nav-bar", inputs: { links: "links" }, ngImport: i0, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\" [disablePagination]=\"true\">\n  @for (link of links; track $index) {\n    <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n      {{ link.text }}\n    </a>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n  <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-header{overflow-x:scroll!important;padding-bottom:4px!important}:host::ng-deep .mat-mdc-tab-link-container{overflow:visible!important}:host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsHorizontalNavBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-horizontal-nav-bar', standalone: false, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\">\n  @for (link of links; track $index) {\n    <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n      {{ link.text }}\n    </a>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n  <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"] }]
+            args: [{ selector: 'ads-horizontal-nav-bar', standalone: false, template: "<nav mat-tab-nav-bar [disableRipple]=\"true\" [tabPanel]=\"tabPanel\" [disablePagination]=\"true\">\n  @for (link of links; track $index) {\n    <a mat-tab-link [routerLink]=\"link.route\" routerLinkActive=\"active\" [disabled]=\"link.disabled\">\n      {{ link.text }}\n    </a>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel>\n  <router-outlet></router-outlet>\n</mat-tab-nav-panel>\n", styles: [":host::ng-deep .mat-mdc-tab-header{overflow-x:scroll!important;padding-bottom:4px!important}:host::ng-deep .mat-mdc-tab-link-container{overflow:visible!important}:host::ng-deep .mat-mdc-tab-link .mdc-tab-indicator{display:none}:host::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{line-height:21px;font-weight:400;letter-spacing:normal;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab-link.active{border-bottom:2.5px solid var(--color-secondary)}:host::ng-deep .mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--color-secondary)!important;font-weight:600;line-height:21px}:host::ng-deep .mat-mdc-tab-link:hover{background-color:var(--color-light-30);border-bottom:2.5px solid var(--color-secondary-hover);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:hover .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active{background-color:var(--color-light);border-bottom:2.5px solid var(--color-secondary-pressed);border-top-left-radius:5px;border-top-right-radius:5px}:host::ng-deep .mat-mdc-tab-link:active .mdc-tab__ripple:before{border-top-left-radius:5px;border-top-right-radius:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { links: [{
                 type: Input
             }] } });
@@ -6575,7 +6584,7 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
         this.periodOptions = ['AM', 'PM'];
         this.errorMessages = {
             mask: 'Time must be in the format HH:mm.',
-            invalidTime: 'Enter a valid time in 12-hour format (01:00 - 12:59).'
+            invalidTime: 'Enter a valid time in 12-hour format (01:00 - 12:59).',
         };
         /** @ignore */
         this.subscription = Subscription.EMPTY;
@@ -6585,10 +6594,9 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
         if (!this.militaryTime()) {
             this.syncValidators();
             // Combine both periodControl and timeControl value changes
-            this.subscription = combineLatest([
-                this.timeControl.valueChanges,
-                this.periodControl.valueChanges
-            ]).pipe(map(([timeStr, period]) => this.convertToMilitaryTime(timeStr, period))).subscribe((militaryTime) => {
+            this.subscription = combineLatest([this.timeControl.valueChanges, this.periodControl.valueChanges])
+                .pipe(map(([timeStr, period]) => this.convertToMilitaryTime(timeStr, period)))
+                .subscribe((militaryTime) => {
                 this.valueControl.setValue(militaryTime);
             });
         }