@ascentgl/ads-ui 20.25.0 → 20.26.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -503,6 +503,12 @@ class AdsTagComponent {
         this.registry = registry;
         /** The color of the tag */
         this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
+        /** The border color of the tag */
+        this.borderColor = input(...(ngDevMode ? [undefined, { debugName: "borderColor" }] : []));
+        /** The border width of the tag */
+        this.borderWidth = input(0, ...(ngDevMode ? [{ debugName: "borderWidth" }] : []));
+        /** Width of the tag */
+        this.width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
         /** The unique id of the tag */
         this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
         /** Whether the tag is removeable */
@@ -559,16 +565,21 @@ class AdsTagComponent {
         }
         return `var(--color-${Colors.White})`;
     }
+    /** @ignore */
+    getBorderColor() {
+        return `var(--color-${this.borderColor()})`;
+    }
+    /** @ignore */
     isColor(value) {
         return Object.values(Colors).includes(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTagComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsTagComponent, isStandalone: false, selector: "ads-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", selected: "selected" }, ngImport: i0, template: "<div\n  class=\"tag\"\n  [ngStyle]=\"{\n    'background-color': getBackgroundColor(),\n    color: getTextColor(),\n  }\"\n>\n  <ng-content></ng-content>\n  <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n  @if (removable()) {\n    <ads-icon\n      [id]=\"'ads-tag-' + id()\"\n      name=\"cross\"\n      size=\"xxxxs\"\n      (click)=\"onRemove()\"\n      [stroke]=\"isDarkTitle() ? 'dark' : 'white'\"\n    />\n  }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsTagComponent, isStandalone: false, selector: "ads-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", selected: "selected" }, ngImport: i0, template: "<div\n  class=\"tag\"\n  [ngStyle]=\"{\n    'background-color': getBackgroundColor(),\n    color: getTextColor(),\n    'border-width': borderWidth() + 'px',\n    'border-style': borderWidth() > 0 ? 'solid' : 'none',\n    'border-color': getBorderColor(),\n    width: width(),\n  }\"\n>\n  <ng-content></ng-content>\n  <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n  @if (removable()) {\n    <ads-icon\n      [id]=\"'ads-tag-' + id()\"\n      name=\"cross\"\n      size=\"xxxxs\"\n      (click)=\"onRemove()\"\n      [stroke]=\"isDarkTitle() ? 'dark' : 'white'\"\n    />\n  }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"tag\"\n  [ngStyle]=\"{\n    'background-color': getBackgroundColor(),\n    color: getTextColor(),\n  }\"\n>\n  <ng-content></ng-content>\n  <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n  @if (removable()) {\n    <ads-icon\n      [id]=\"'ads-tag-' + id()\"\n      name=\"cross\"\n      size=\"xxxxs\"\n      (click)=\"onRemove()\"\n      [stroke]=\"isDarkTitle() ? 'dark' : 'white'\"\n    />\n  }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+            args: [{ selector: 'ads-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"tag\"\n  [ngStyle]=\"{\n    'background-color': getBackgroundColor(),\n    color: getTextColor(),\n    'border-width': borderWidth() + 'px',\n    'border-style': borderWidth() > 0 ? 'solid' : 'none',\n    'border-color': getBorderColor(),\n    width: width(),\n  }\"\n>\n  <ng-content></ng-content>\n  <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n  @if (removable()) {\n    <ads-icon\n      [id]=\"'ads-tag-' + id()\"\n      name=\"cross\"\n      size=\"xxxxs\"\n      (click)=\"onRemove()\"\n      [stroke]=\"isDarkTitle() ? 'dark' : 'white'\"\n    />\n  }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AdsCreateTagComponent {
     constructor(fb, registry) {
@@ -808,7 +819,7 @@ class AdsCreateTagComponent {
         this.tagRemove.emit(id); // emit the updated array
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsCreateTagComponent, deps: [{ token: i4.FormBuilder }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: false, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagsChange: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ads-tag-container>\n  @for (tag of tags; track tag.id) {\n    @if (selectedTag()?.id === tag.id) {\n      <form [formGroup]=\"form\">\n        <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #updateTrigger=\"cdkOverlayOrigin\"></div>\n        <ng-template\n          cdkConnectedOverlay\n          [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n          [cdkConnectedOverlayPositions]=\"positions\"\n          [cdkConnectedOverlayPush]=\"true\"\n          [cdkConnectedOverlayOpen]=\"true\"\n          [cdkConnectedOverlayHasBackdrop]=\"true\"\n          (backdropClick)=\"hide()\"\n          (detach)=\"hide()\"\n        >\n          <div class=\"tag-overlay\">\n            <input #editInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n            <div class=\"tag-configuration\">\n              <div class=\"color-picker\">\n                @for (color of palette(); track color) {\n                  <div\n                    class=\"color\"\n                    [class.selected]=\"selectedColor === color\"\n                    [ngStyle]=\"{\n                      'background-color': getBackgroundColor(color),\n                      opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n                    }\"\n                    (click)=\"onColorChange(color)\"\n                  ></div>\n                }\n              </div>\n              <div class=\"actions\">\n                <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n                <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n                  {{ 'Save' }}\n                </ads-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </form>\n    } @else {\n      <ads-tag\n        [tag]=\"tag.tag\"\n        [color]=\"tag.color\"\n        [id]=\"tag.id\"\n        (selected)=\"onTagSelect($event)\"\n        (remove)=\"onTagRemove($event)\"\n      />\n    }\n  }\n\n  <div class=\"tag-container \">\n    @if (showInput) {\n      <form [formGroup]=\"form\">\n        <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #addTrigger=\"cdkOverlayOrigin\"></div>\n        <ng-template\n          cdkConnectedOverlay\n          [cdkConnectedOverlayOrigin]=\"addTrigger\"\n          [cdkConnectedOverlayPositions]=\"positions\"\n          [cdkConnectedOverlayPush]=\"true\"\n          [cdkConnectedOverlayOpen]=\"true\"\n          [cdkConnectedOverlayHasBackdrop]=\"true\"\n          (backdropClick)=\"hide()\"\n          (detach)=\"hide()\"\n        >\n          <div class=\"tag-overlay\">\n            <input #addInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n            <div class=\"tag-configuration\">\n              <div class=\"color-picker\">\n                @for (color of palette(); track color) {\n                  <div\n                    class=\"color\"\n                    [class.selected]=\"selectedColor === color\"\n                    [ngStyle]=\"{\n                      'background-color': getBackgroundColor(color),\n                      opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n                    }\"\n                    (click)=\"onColorChange(color)\"\n                  ></div>\n                }\n              </div>\n              <div class=\"actions\">\n                <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n                <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </form>\n    }\n\n    @if (this.tags.length < this.limit()) {\n      <ads-button (click)=\"displayInput()\" size=\"xs\">\n        {{ 'Add Tag' }}\n      </ads-button>\n    }\n  </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex}.tag-overlay{display:flex;flex-direction:column}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;margin-top:5px;background-color:var(--color-white);overflow:hidden}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{width:20px;height:20px;border-radius:50%;cursor:pointer}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;gap:4px;height:24px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: false, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagsChange: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ads-tag-container>\n  @for (tag of tags; track tag.id) {\n    @if (selectedTag()?.id === tag.id) {\n      <form [formGroup]=\"form\">\n        <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #updateTrigger=\"cdkOverlayOrigin\"></div>\n        <ng-template\n          cdkConnectedOverlay\n          [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n          [cdkConnectedOverlayPositions]=\"positions\"\n          [cdkConnectedOverlayPush]=\"true\"\n          [cdkConnectedOverlayOpen]=\"true\"\n          [cdkConnectedOverlayHasBackdrop]=\"true\"\n          (backdropClick)=\"hide()\"\n          (detach)=\"hide()\"\n        >\n          <div class=\"tag-overlay\">\n            <input #editInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n            <div class=\"tag-configuration\">\n              <div class=\"color-picker\">\n                @for (color of palette(); track color) {\n                  <div\n                    class=\"color\"\n                    [class.selected]=\"selectedColor === color\"\n                    [ngStyle]=\"{\n                      'background-color': getBackgroundColor(color),\n                      opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n                    }\"\n                    (click)=\"onColorChange(color)\"\n                  ></div>\n                }\n              </div>\n              <div class=\"actions\">\n                <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n                <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n                  {{ 'Save' }}\n                </ads-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </form>\n    } @else {\n      <ads-tag\n        [tag]=\"tag.tag\"\n        [color]=\"tag.color\"\n        [id]=\"tag.id\"\n        (selected)=\"onTagSelect($event)\"\n        (remove)=\"onTagRemove($event)\"\n      />\n    }\n  }\n\n  <div class=\"tag-container \">\n    @if (showInput) {\n      <form [formGroup]=\"form\">\n        <div class=\"tag-overlay-trigger\" cdkOverlayOrigin #addTrigger=\"cdkOverlayOrigin\"></div>\n        <ng-template\n          cdkConnectedOverlay\n          [cdkConnectedOverlayOrigin]=\"addTrigger\"\n          [cdkConnectedOverlayPositions]=\"positions\"\n          [cdkConnectedOverlayPush]=\"true\"\n          [cdkConnectedOverlayOpen]=\"true\"\n          [cdkConnectedOverlayHasBackdrop]=\"true\"\n          (backdropClick)=\"hide()\"\n          (detach)=\"hide()\"\n        >\n          <div class=\"tag-overlay\">\n            <input #addInput formControlName=\"tag\" [attr.maxlength]=\"maxlength()\" />\n            <div class=\"tag-configuration\">\n              <div class=\"color-picker\">\n                @for (color of palette(); track color) {\n                  <div\n                    class=\"color\"\n                    [class.selected]=\"selectedColor === color\"\n                    [ngStyle]=\"{\n                      'background-color': getBackgroundColor(color),\n                      opacity: selectedColor && selectedColor !== color ? 0.2 : 1,\n                    }\"\n                    (click)=\"onColorChange(color)\"\n                  ></div>\n                }\n              </div>\n              <div class=\"actions\">\n                <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n                <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </form>\n    }\n\n    @if (this.tags.length < this.limit()) {\n      <ads-button (click)=\"displayInput()\" size=\"xs\">\n        {{ 'Add Tag' }}\n      </ads-button>\n    }\n  </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex}.tag-overlay{display:flex;flex-direction:column}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;margin-top:5px;background-color:var(--color-white);overflow:hidden}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{width:20px;height:20px;border-radius:50%;cursor:pointer}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;gap:4px;height:24px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsCreateTagComponent, decorators: [{
             type: Component,
@@ -3019,7 +3030,7 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
         return option && typeof option === 'object' && 'disableDropdownOption' in option && option.disableDropdownOption === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass" }, 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        'wrap-trigger-text': wrapOptionText,\n        'has-label': !!label\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]=\"panelClassList\"\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        } @else if (triggerTemplate) {\n          <mat-select-trigger>\n            <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n                checkbox: isMultiselect && checkSelected,\n                'wrap-text': wrapOptionText,\n              }\"\n              [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              [matTooltipDisabled]=\"!showTooltip\"\n              [disabled]=\"isDropdownOptionObject(option)\"\n            >\n              @if (optionTemplate) {\n                <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n              } @else if (isMultiselect && checkSelected) {\n                <ads-checkbox\n                  [showFooter]=\"false\"\n                  width=\"100%\"\n                  [control]=\"createCheckboxControl(option)\"\n                  (change)=\"onCheckboxChange(option)\"\n                  [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n                />\n              } @else {\n                <span\n                  [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass" }, 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        'wrap-trigger-text': wrapOptionText,\n        'has-label': !!label\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]=\"panelClassList\"\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        } @else if (triggerTemplate) {\n          <mat-select-trigger>\n            <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n                checkbox: isMultiselect && checkSelected,\n                'wrap-text': wrapOptionText,\n              }\"\n              [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              [matTooltipDisabled]=\"!showTooltip\"\n              [disabled]=\"isDropdownOptionObject(option)\"\n            >\n              @if (optionTemplate) {\n                <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n              } @else if (isMultiselect && checkSelected) {\n                <ads-checkbox\n                  [showFooter]=\"false\"\n                  width=\"100%\"\n                  [control]=\"createCheckboxControl(option)\"\n                  (change)=\"onCheckboxChange(option)\"\n                  [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n                />\n              } @else {\n                <span\n                  [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsDropdownComponent, decorators: [{
             type: Component,
@@ -3174,7 +3185,7 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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        'wrap-trigger-text': wrapOptionText,\n        'has-label': !!label\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]=\"panelClassList\"\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        } @else if (triggerTemplate) {\n          <mat-select-trigger>\n            <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n                checkbox: isMultiselect && checkSelected,\n                'wrap-text': wrapOptionText,\n              }\"\n              [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              [matTooltipDisabled]=\"!showTooltip\"\n              [disabled]=\"isDropdownOptionObject(option)\"\n            >\n              @if (optionTemplate) {\n                <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n              } @else if (isMultiselect && checkSelected) {\n                <ads-checkbox\n                  [showFooter]=\"false\"\n                  width=\"100%\"\n                  [control]=\"createCheckboxControl(option)\"\n                  (change)=\"onCheckboxChange(option)\"\n                  [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n                />\n              } @else {\n                <span\n                  [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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        'wrap-trigger-text': wrapOptionText,\n        'has-label': !!label\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]=\"panelClassList\"\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        } @else if (triggerTemplate) {\n          <mat-select-trigger>\n            <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n                checkbox: isMultiselect && checkSelected,\n                'wrap-text': wrapOptionText,\n              }\"\n              [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n              [matTooltipDisabled]=\"!showTooltip\"\n              [disabled]=\"isDropdownOptionObject(option)\"\n            >\n              @if (optionTemplate) {\n                <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n              } @else if (isMultiselect && checkSelected) {\n                <ads-checkbox\n                  [showFooter]=\"false\"\n                  width=\"100%\"\n                  [control]=\"createCheckboxControl(option)\"\n                  (change)=\"onCheckboxChange(option)\"\n                  [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n                />\n              } @else {\n                <span\n                  [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
             type: Component,