@tedi-design-system/angular 3.0.0-rc.2 → 3.0.0-rc.4

package/community/components/form/file-dropzone/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./file-dropzone.component";
+export * from "./constants";
+export * from "./types";
+export * from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/community/components/form/file-dropzone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/file-dropzone/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/file-dropzone/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/community/components/form/select/multiselect.component.d.ts

@@ -64,6 +64,13 @@ export declare class MultiselectComponent implements AfterContentChecked, Contro
      * @default true
      */
     clearable: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional element reference to calculate dropdown width from.
+     * If provided but null, dropdown will use auto width.
+     * If not provided, defaults to the host element width.
+     * @default undefined
+     */
+    dropdownWidthRef: import("@angular/core").InputSignal<ElementRef<any> | null | undefined>;
     feedbackText: import("@angular/core").InputSignal<ComponentInputs<FeedbackTextComponent> | undefined>;
     readonly specialOptionControls: typeof specialOptionControls;
     isOpen: import("@angular/core").WritableSignal<boolean>;
@@ -72,7 +79,7 @@ export declare class MultiselectComponent implements AfterContentChecked, Contro
     triggerRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
     hostRef: ElementRef<any>;
     options: import("@angular/core").Signal<readonly SelectOptionComponent[]>;
-    dropdownWidth: import("@angular/core").WritableSignal<number>;
+    dropdownWidth: import("@angular/core").WritableSignal<number | null>;
     disabled: import("@angular/core").WritableSignal<boolean>;
     optionGroups: import("@angular/core").Signal<{
         label: string;
@@ -103,6 +110,6 @@ export declare class MultiselectComponent implements AfterContentChecked, Contro
     setDisabledState(isDisabled: boolean): void;
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tedi-multiselect", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "clearableTags": { "alias": "clearableTags"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; }, {}, ["options"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tedi-multiselect", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "clearableTags": { "alias": "clearableTags"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectableGroups": { "alias": "selectableGroups"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; }, {}, ["options"], never, true, never>;
 }
 //# sourceMappingURL=multiselect.component.d.ts.map

package/community/components/form/select/multiselect.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/select/multiselect.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAKnB,UAAU,EASX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAEL,SAAS,EACT,UAAU,EACX,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAEL,eAAe,EACf,qBAAqB,EAKtB,MAAM,kCAAkC,CAAC;;AAK1C,oBAAY,qBAAqB;IAC/B,UAAU,eAAe;IACzB,WAAW,iBAAiB;CAC7B;AAED,qBAmCa,oBACX,YAAW,mBAAmB,EAAE,oBAAoB;IAEpD;;;OAGG;IACH,OAAO,8CAA4B;IACnC;;;OAGG;IACH,KAAK,0DAAmB;IACxB;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,WAAW,8CAAqB;IAChC;;;OAGG;IACH,KAAK,kDAAgC;IACrC;;;OAGG;IACH,IAAI,iDAA+B;IACnC;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,aAAa,+CAAyB;IACtC;;;OAGG;IACH,SAAS,+CAAyB;IAClC;;;OAGG;IACH,gBAAgB,+CAAyB;IACzC;;;OAGG;IACH,SAAS,+CAAwB;IACjC,YAAY,0FAAmD;IAE/D,QAAQ,CAAC,qBAAqB,+BAAyB;IAEvD,MAAM,kDAAiB;IACvB,eAAe,4DAAiC;IAChD,UAAU,8DAA+C;IACzD,UAAU,8DAAqD;IAC/D,OAAO,kBAAsB;IAC7B,OAAO,mEAA0C;IACjD,aAAa,iDAAa;IAC1B,QAAQ,kDAAiB;IAEzB,YAAY;eACa,MAAM;iBAAW,qBAAqB,EAAE;SAU9D;IAGH,cAAc;IAId,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAWnC,iBAAiB,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI;IAqB5D,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQzB,uBAAuB,oCAEpB;IAEH,YAAY,IAAI,IAAI;IAIpB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,OAAO,CAAC,gBAAgB;IAMxB,UAAU,2CAIP;IAEH,kBAAkB,0CAEf;IAEH,eAAe,IAAI,IAAI;IAOvB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK3C,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAgB5C,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IA0B9C,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAe3C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAY;IACxD,SAAS,EAAE,MAAM,IAAI,CAAY;IAEjC,UAAU,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI;IAI1C,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,GAAG,IAAI;IAI9D,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAI3C,qBAAqB,IAAI,IAAI;yCArPlB,oBAAoB;2CAApB,oBAAoB;CAwPhC"}
+{"version":3,"file":"multiselect.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/select/multiselect.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAKnB,UAAU,EASX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAEL,SAAS,EACT,UAAU,EACX,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAEL,eAAe,EACf,qBAAqB,EAKtB,MAAM,kCAAkC,CAAC;;AAK1C,oBAAY,qBAAqB;IAC/B,UAAU,eAAe;IACzB,WAAW,iBAAiB;CAC7B;AAED,qBAmCa,oBACX,YAAW,mBAAmB,EAAE,oBAAoB;IAEpD;;;OAGG;IACH,OAAO,8CAA4B;IACnC;;;OAGG;IACH,KAAK,0DAAmB;IACxB;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,WAAW,8CAAqB;IAChC;;;OAGG;IACH,KAAK,kDAAgC;IACrC;;;OAGG;IACH,IAAI,iDAA+B;IACnC;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,aAAa,+CAAyB;IACtC;;;OAGG;IACH,SAAS,+CAAyB;IAClC;;;OAGG;IACH,gBAAgB,+CAAyB;IACzC;;;OAGG;IACH,SAAS,+CAAwB;IACjC;;;;;OAKG;IACH,gBAAgB,0EAA8B;IAC9C,YAAY,0FAAmD;IAE/D,QAAQ,CAAC,qBAAqB,+BAAyB;IAEvD,MAAM,kDAAiB;IACvB,eAAe,4DAAiC;IAChD,UAAU,8DAA+C;IACzD,UAAU,8DAAqD;IAC/D,OAAO,kBAAsB;IAC7B,OAAO,mEAA0C;IACjD,aAAa,wDAA4B;IACzC,QAAQ,kDAAiB;IAEzB,YAAY;eACa,MAAM;iBAAW,qBAAqB,EAAE;SAU9D;IAGH,cAAc;IAId,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAWnC,iBAAiB,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI;IAqB5D,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQzB,uBAAuB,oCAEpB;IAEH,YAAY,IAAI,IAAI;IAIpB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,OAAO,CAAC,gBAAgB;IAYxB,UAAU,2CAIP;IAEH,kBAAkB,0CAEf;IAEH,eAAe,IAAI,IAAI;IAOvB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK3C,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAgB5C,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IA0B9C,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAe3C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAY;IACxD,SAAS,EAAE,MAAM,IAAI,CAAY;IAEjC,UAAU,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI;IAI1C,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,GAAG,IAAI;IAI9D,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAI3C,qBAAqB,IAAI,IAAI;yCAlQlB,oBAAoB;2CAApB,oBAAoB;CAqQhC"}

package/community/components/form/select/select.component.d.ts

@@ -40,6 +40,13 @@ export declare class SelectComponent implements AfterContentChecked, ControlValu
      * @default false
      */
     clearable: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional element reference to calculate dropdown width from.
+     * If provided but null, dropdown will use auto width.
+     * If not provided, defaults to the host element width.
+     * @default undefined
+     */
+    dropdownWidthRef: import("@angular/core").InputSignal<ElementRef<any> | null | undefined>;
     feedbackText: import("@angular/core").InputSignal<ComponentInputs<FeedbackTextComponent> | undefined>;
     isOpen: import("@angular/core").WritableSignal<boolean>;
     selectedOptions: import("@angular/core").WritableSignal<readonly string[]>;
@@ -47,7 +54,7 @@ export declare class SelectComponent implements AfterContentChecked, ControlValu
     triggerRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
     hostRef: ElementRef<any>;
     options: import("@angular/core").Signal<readonly SelectOptionComponent[]>;
-    dropdownWidth: import("@angular/core").WritableSignal<number>;
+    dropdownWidth: import("@angular/core").WritableSignal<number | null>;
     disabled: import("@angular/core").WritableSignal<boolean>;
     optionGroups: import("@angular/core").Signal<{
         label: string;
@@ -72,6 +79,6 @@ export declare class SelectComponent implements AfterContentChecked, ControlValu
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; }, {}, ["options"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "tedi-select", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "dropdownWidthRef": { "alias": "dropdownWidthRef"; "required": false; "isSignal": true; }; "feedbackText": { "alias": "feedbackText"; "required": false; "isSignal": true; }; }, {}, ["options"], never, true, never>;
 }
 //# sourceMappingURL=select.component.d.ts.map

package/community/components/form/select/select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/select/select.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAKnB,UAAU,EASX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAEL,SAAS,EACT,UAAU,EACX,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAEL,eAAe,EACf,qBAAqB,EAKtB,MAAM,kCAAkC,CAAC;;AAG1C,qBAiCa,eACX,YAAW,mBAAmB,EAAE,oBAAoB;IAEpD;;;OAGG;IACH,OAAO,8CAA4B;IACnC;;;OAGG;IACH,KAAK,0DAAmB;IACxB;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,WAAW,8CAAqB;IAChC;;;OAGG;IACH,KAAK,kDAAgC;IACrC;;;OAGG;IACH,IAAI,iDAA+B;IACnC;;;OAGG;IACH,SAAS,+CAAwB;IACjC,YAAY,0FAAmD;IAE/D,MAAM,kDAAiB;IACvB,eAAe,4DAAiC;IAChD,UAAU,8DAA+C;IACzD,UAAU,8DAAqD;IAC/D,OAAO,kBAAsB;IAC7B,OAAO,mEAA0C;IACjD,aAAa,iDAAa;IAC1B,QAAQ,kDAAiB;IAEzB,YAAY;eACa,MAAM;iBAAW,qBAAqB,EAAE;SAU9D;IAEH,qBAAqB,IAAI,IAAI;IAK7B,cAAc;IAId,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAWnC,iBAAiB,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI;IAQ5D,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQzB,uBAAuB,oCAEpB;IAEH,YAAY,IAAI,IAAI;IAIpB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,cAAc,2CAIX;IAEH,OAAO,CAAC,gBAAgB;IAOxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAY;IACpD,SAAS,EAAE,MAAM,IAAI,CAAY;IAEjC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/B,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IAI1D,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;yCA1IhC,eAAe;2CAAf,eAAe;CA6I3B"}
+{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/form/select/select.component.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAKnB,UAAU,EASX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAEL,SAAS,EACT,UAAU,EACX,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAEL,eAAe,EACf,qBAAqB,EAKtB,MAAM,kCAAkC,CAAC;;AAG1C,qBAiCa,eACX,YAAW,mBAAmB,EAAE,oBAAoB;IAEpD;;;OAGG;IACH,OAAO,8CAA4B;IACnC;;;OAGG;IACH,KAAK,0DAAmB;IACxB;;;OAGG;IACH,QAAQ,+CAAyB;IACjC;;;OAGG;IACH,WAAW,8CAAqB;IAChC;;;OAGG;IACH,KAAK,kDAAgC;IACrC;;;OAGG;IACH,IAAI,iDAA+B;IACnC;;;OAGG;IACH,SAAS,+CAAwB;IACjC;;;;;OAKG;IACH,gBAAgB,0EAA8B;IAC9C,YAAY,0FAAmD;IAE/D,MAAM,kDAAiB;IACvB,eAAe,4DAAiC;IAChD,UAAU,8DAA+C;IACzD,UAAU,8DAAqD;IAC/D,OAAO,kBAAsB;IAC7B,OAAO,mEAA0C;IACjD,aAAa,wDAA+B;IAC5C,QAAQ,kDAAiB;IAEzB,YAAY;eACa,MAAM;iBAAW,qBAAqB,EAAE;SAU9D;IAEH,qBAAqB,IAAI,IAAI;IAK7B,cAAc;IAId,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;IAWnC,iBAAiB,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI;IAQ5D,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQzB,uBAAuB,oCAEpB;IAEH,YAAY,IAAI,IAAI;IAIpB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,cAAc,2CAIX;IAEH,OAAO,CAAC,gBAAgB;IAaxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAY;IACpD,SAAS,EAAE,MAAM,IAAI,CAAY;IAEjC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/B,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IAI1D,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;yCAvJhC,eAAe;2CAAf,eAAe;CA0J3B"}

package/fesm2022/tedi-design-system-angular-community.mjs

@@ -260,7 +260,7 @@ class CardContentComponent {
      */
     timeline = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-content": "true", "class.tedi-card-content--has-separator": "hasSeparator() || timeline()", "class.tedi-card-content--auto-width": "autoWidth()", "class.tedi-card-content--timeline": "timeline()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{--_card-padding-vertical: var(--_card-padding);--_card-padding-horizontal: var(--_card-padding);--_card-padding-top: var(--_card-padding-vertical);--_card-padding-bottom: var(--_card-padding-vertical);--_card-padding-left: var(--_card-padding-horizontal);--_card-padding-right: var(--_card-padding-horizontal);display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { hasSeparator: { classPropertyName: "hasSeparator", publicName: "hasSeparator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-card-content": "true", "class.tedi-card-content--has-separator": "hasSeparator() || timeline()", "class.tedi-card-content--auto-width": "autoWidth()", "class.tedi-card-content--timeline": "timeline()" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background", "border", "border"] }, { directive: CardPaddingDirective, inputs: ["padding", "padding"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
@@ -278,7 +278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             directive: CardPaddingDirective,
                             inputs: ["padding"],
                         },
-                    ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{--_card-padding-vertical: var(--_card-padding);--_card-padding-horizontal: var(--_card-padding);--_card-padding-top: var(--_card-padding-vertical);--_card-padding-bottom: var(--_card-padding-vertical);--_card-padding-left: var(--_card-padding-horizontal);--_card-padding-right: var(--_card-padding-horizontal);display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
+                    ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
         }] });
 
 class AccordionItemContentComponent {
@@ -751,11 +751,11 @@ class InputGroupComponent {
      */
     feedback = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputGroupComponent, isStandalone: true, selector: "tedi-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelID: { classPropertyName: "labelID", publicName: "labelID", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-input-group\">\n  @if (label()) {\n    <label tedi-label [for]=\"labelID()\">\n      <div class=\"tedi-input-group__label\">{{ label() }}</div>\n    </label>\n  }\n\n  <div\n    [class]=\"{\n      'tedi-input-group__container': true,\n      'tedi-input-group__container--disabled': disabled(),\n    }\"\n  >\n    <div class=\"tedi-input-group__prefix\">\n      <ng-content select=\"[prefix-slot]\" />\n    </div>\n    <div class=\"tedi-input-group__center\">\n      <ng-content />\n    </div>\n    <div class=\"tedi-input-group__suffix\">\n      <ng-content select=\"[suffix-slot]\" />\n    </div>\n  </div>\n  @if (feedback(); as feedbackResult) {\n    <tedi-feedback-text\n      [text]=\"feedbackResult.text\"\n      [type]=\"feedbackResult.type\"\n      [position]=\"feedbackResult.position\"\n    />\n  }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputGroupComponent, isStandalone: true, selector: "tedi-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelID: { classPropertyName: "labelID", publicName: "labelID", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-input-group\">\n  @if (label()) {\n    <label tedi-label [for]=\"labelID()\">\n      <div class=\"tedi-input-group__label\">{{ label() }}</div>\n    </label>\n  }\n\n  <div\n    [class]=\"{\n      'tedi-input-group__container': true,\n      'tedi-input-group__container--disabled': disabled(),\n    }\"\n  >\n    <div class=\"tedi-input-group__prefix\">\n      <ng-content select=\"[prefix-slot]\" />\n    </div>\n    <div class=\"tedi-input-group__center\">\n      <ng-content />\n    </div>\n    <div class=\"tedi-input-group__suffix\">\n      <ng-content select=\"[suffix-slot]\" />\n    </div>\n  </div>\n  @if (feedback(); as feedbackResult) {\n    <tedi-feedback-text\n      [text]=\"feedbackResult.text\"\n      [type]=\"feedbackResult.type\"\n      [position]=\"feedbackResult.position\"\n    />\n  }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-input-group", standalone: true, encapsulation: ViewEncapsulation.None, imports: [FeedbackTextComponent, LabelComponent], template: "<div class=\"tedi-input-group\">\n  @if (label()) {\n    <label tedi-label [for]=\"labelID()\">\n      <div class=\"tedi-input-group__label\">{{ label() }}</div>\n    </label>\n  }\n\n  <div\n    [class]=\"{\n      'tedi-input-group__container': true,\n      'tedi-input-group__container--disabled': disabled(),\n    }\"\n  >\n    <div class=\"tedi-input-group__prefix\">\n      <ng-content select=\"[prefix-slot]\" />\n    </div>\n    <div class=\"tedi-input-group__center\">\n      <ng-content />\n    </div>\n    <div class=\"tedi-input-group__suffix\">\n      <ng-content select=\"[suffix-slot]\" />\n    </div>\n  </div>\n  @if (feedback(); as feedbackResult) {\n    <tedi-feedback-text\n      [text]=\"feedbackResult.text\"\n      [type]=\"feedbackResult.type\"\n      [position]=\"feedbackResult.position\"\n    />\n  }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"] }]
+            args: [{ selector: "tedi-input-group", standalone: true, encapsulation: ViewEncapsulation.None, imports: [FeedbackTextComponent, LabelComponent], template: "<div class=\"tedi-input-group\">\n  @if (label()) {\n    <label tedi-label [for]=\"labelID()\">\n      <div class=\"tedi-input-group__label\">{{ label() }}</div>\n    </label>\n  }\n\n  <div\n    [class]=\"{\n      'tedi-input-group__container': true,\n      'tedi-input-group__container--disabled': disabled(),\n    }\"\n  >\n    <div class=\"tedi-input-group__prefix\">\n      <ng-content select=\"[prefix-slot]\" />\n    </div>\n    <div class=\"tedi-input-group__center\">\n      <ng-content />\n    </div>\n    <div class=\"tedi-input-group__suffix\">\n      <ng-content select=\"[suffix-slot]\" />\n    </div>\n  </div>\n  @if (feedback(); as feedbackResult) {\n    <tedi-feedback-text\n      [text]=\"feedbackResult.text\"\n      [type]=\"feedbackResult.type\"\n      [position]=\"feedbackResult.position\"\n    />\n  }\n</div>\n", styles: [".tedi-input-group__container{--_input-group-rounded: var(--radius-02-default);--_input-group-background-color: var(--form-input-background-default);--_input-group-min-height: var(--dimensions-14);--_input-group-text-color: var(--general-text-secondary);--_input-group-border-width: var(--borders-01);--_input-group-border-color: var(--form-input-border-default);--_input-group-side-background-color: var( --form-general-background-action-background );--_input-group-border: var(--_input-group-border-width) solid var(--_input-group-border-color);--_input-group-input-border-radius: var(0);--_input-group-disabled-border-color: var(--neutral-350);--_input-group-disabled-background-color: var(--neutral-300);--_input-group-text-disabled-color: var(--neutral-450);--_input-group-select-padding: 0;--_input-group-select-border: 0;--_input-group-share-border-size: 0;display:flex;background-color:transparent;color:var(--_input-group-text-color);min-height:var(--_input-group-min-height);overflow:hidden}.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-x: var(--form-field-padding-x-md-default-desktop)}}.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-mobile)}@media (min-width: 576px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-tablet)}}@media (min-width: 992px){.tedi-input-group__container{--_input-group-padding-y: var(--form-field-padding-y-md-default-desktop)}}.tedi-input-group__container input.tedi-input{margin:0;width:100%}.tedi-input-group__container .tedi-input-group__prefix .tedi-input:focus{z-index:1000;overflow:visible}.tedi-input-group__container:has(.tedi-input-group__prefix:empty){border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__prefix:empty) input.tedi-input{border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty){border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container:has(.tedi-input-group__suffix:empty) input.tedi-input{border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__prefix tedi-select .tedi-select__trigger:hover{border-right:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__container .tedi-input-group__suffix tedi-select .tedi-select__trigger:hover{border-left:var(--_input-group-border-width) solid var(--form-input-border-hover)}.tedi-input-group__container:has(.tedi-input-group__prefix tedi-select .tedi-select__trigger:focus,.tedi-input-group__prefix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-left:var(--_input-group-share-border-size)}.tedi-input-group__container:has(.tedi-input-group__suffix tedi-select .tedi-select__trigger:focus,.tedi-input-group__suffix tedi-select .tedi-select__trigger:hover) .tedi-input-group__center .tedi-input{border-right:var(--_input-group-share-border-size)}.tedi-input-group__center .tedi-input{border-radius:var(--_input-group-input-border-radius)}.tedi-input-group__container--disabled{--_input-group-text-color: var(--_input-group-text-disabled-color);--_input-group-border-color: var(--_input-group-disabled-border-color);--_input-group-background-color: var( --_input-group-disabled-background-color );--_input-group-side-background-color: var( --_input-group-disabled-background-color )}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;align-items:center;flex-shrink:0;background:var(--_input-group-side-background-color);border:var(--_input-group-border);padding:var(--_input-group-padding-y) var(--_input-group-padding-x)}.tedi-input-group__prefix:has(tedi-select),.tedi-input-group__suffix:has(tedi-select){--_input-group-border: var(--_input-group-select-border);padding:var(--_input-group-select-padding);background-color:transparent}.tedi-input-group__prefix tedi-select .tedi-select__trigger,.tedi-input-group__suffix tedi-select .tedi-select__trigger{background:var(--_input-group-side-background-color);height:100%;margin:0}.tedi-input-group__prefix:empty,.tedi-input-group__suffix:empty{display:none}.tedi-input-group__prefix .tedi-select__arrow,.tedi-input-group__suffix .tedi-select__arrow{margin:0;padding:0}.tedi-input-group__prefix{border-right:0;border-top-left-radius:var(--_input-group-rounded);border-bottom-left-radius:var(--_input-group-rounded)}.tedi-input-group__prefix tedi-select .tedi-select__trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tedi-input-group__suffix{border-left:0;border-top-right-radius:var(--_input-group-rounded);border-bottom-right-radius:var(--_input-group-rounded)}.tedi-input-group__suffix tedi-select .tedi-select__trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}\n"] }]
         }] });
 
 class RadioGroupComponent {
@@ -1273,6 +1273,13 @@ class SelectComponent {
      * @default false
      */
     clearable = input(true);
+    /**
+     * Optional element reference to calculate dropdown width from.
+     * If provided but null, dropdown will use auto width.
+     * If not provided, defaults to the host element width.
+     * @default undefined
+     */
+    dropdownWidthRef = input();
     feedbackText = input();
     isOpen = signal(false);
     selectedOptions = signal([]);
@@ -1280,7 +1287,7 @@ class SelectComponent {
     triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
     hostRef = inject(ElementRef);
     options = contentChildren(SelectOptionComponent);
-    dropdownWidth = signal(0);
+    dropdownWidth = signal(null);
     disabled = signal(false);
     optionGroups = computed(() => {
         const groups = [];
@@ -1342,7 +1349,13 @@ class SelectComponent {
             .map((option) => option.label());
     });
     setDropdownWidth() {
-        const computedWidth = this.hostRef?.nativeElement?.getBoundingClientRect()?.width ?? 0;
+        const widthRef = this.dropdownWidthRef();
+        if (widthRef === null) {
+            this.dropdownWidth.set(null);
+            return;
+        }
+        const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
+        const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
         this.dropdownWidth.set(computedWidth);
     }
     // ControlValueAccessor implementation
@@ -1361,13 +1374,13 @@ class SelectComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width.px]=\"dropdownWidth()\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxUseActiveDescendant\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.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: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.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: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1393,7 +1406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width.px]=\"dropdownWidth()\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxUseActiveDescendant\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
+                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
         }], propDecorators: { onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -1611,6 +1624,13 @@ class MultiselectComponent {
      * @default true
      */
     clearable = input(true);
+    /**
+     * Optional element reference to calculate dropdown width from.
+     * If provided but null, dropdown will use auto width.
+     * If not provided, defaults to the host element width.
+     * @default undefined
+     */
+    dropdownWidthRef = input();
     feedbackText = input();
     specialOptionControls = specialOptionControls;
     isOpen = signal(false);
@@ -1686,7 +1706,13 @@ class MultiselectComponent {
         return this.selectedOptions().includes(option);
     }
     setDropdownWidth() {
-        const computedWidth = this.hostRef?.nativeElement?.getBoundingClientRect()?.width ?? 0;
+        const widthRef = this.dropdownWidthRef();
+        if (widthRef === null) {
+            this.dropdownWidth.set(null);
+            return;
+        }
+        const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
+        const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
         this.dropdownWidth.set(computedWidth);
     }
     allOptions = computed(() => {
@@ -1765,13 +1791,13 @@ class MultiselectComponent {
         this.setDropdownWidth();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tedi-multiselect", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, clearableTags: { classPropertyName: "clearableTags", publicName: "clearableTags", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select tedi-select--multiselect" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectComponent, isStandalone: true, selector: "tedi-multiselect", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, clearableTags: { classPropertyName: "clearableTags", publicName: "clearableTags", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "tedi-select tedi-select--multiselect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiselectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width.px]=\"dropdownWidth()\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.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: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.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: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "label[tedi-label]", inputs: ["size", "required"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -1799,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => MultiselectComponent),
                             multi: true,
                         },
-                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width.px]=\"dropdownWidth()\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20);max-height:300px;overflow-y:auto}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
+                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select{--_inner-gap: var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select{--_inner-gap: var(--form-field-inner-spacing-desktop)}}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default}.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{padding-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-mobile)}@media (min-width: 576px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-tablet)}}@media (min-width: 992px){.tedi-select__arrow{margin-left:var(--form-field-inner-spacing-desktop)}}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--alpha-20)}.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-top:var(--form-field-outer-spacing-desktop)}}.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-mobile)}@media (min-width: 576px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-tablet)}}@media (min-width: 992px){.tedi-select__dropdown{margin-bottom:var(--form-field-outer-spacing-desktop)}}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px}.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-weight:var(--heading-subtitle-small-weight-desktop)}}.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-mobile)}@media (min-width: 576px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-tablet)}}@media (min-width: 992px){.tedi-select__group-name{font-size:var(--heading-subtitle-small-size-desktop)}}.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-mobile)}@media (min-width: 576px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-tablet)}}@media (min-width: 992px){.tedi-select__group-name{line-height:var(--heading-subtitle-small-line-height-desktop)}}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-mobile)}@media (min-width: 576px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-tablet)}}@media (min-width: 992px){.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left-desktop)}}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--_inner-gap)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
         }], propDecorators: { onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -2902,5 +2928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzoneComponent, FormFieldComponent, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, modalBreakpoints, specialOptionControls };
+export { AccordionComponent, AccordionIconComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, BreadcrumbsComponent, CardColorsDirective, CardComponent, CardContentComponent, CardHeaderComponent, CardPaddingDirective, CardRowComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ChoiceGroupDirective, DropdownComponent, DropdownItemComponent, DropdownTriggerDirective, FileDropzone, FileDropzoneComponent, FileSizeStandards, FormFieldComponent, IECFileSize, InputComponent, InputGroupComponent, ModalComponent, ModalFooterComponent, ModalHeaderComponent, MultiselectComponent, PaginationComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, SIFileSize, SearchComponent, SelectComponent, SelectOptionComponent, StatusBadgeComponent, TabComponent, TabContentComponent, TableStylesComponent, TabsComponent, TagComponent, TextareaComponent, formatBytes, getDefaultHelpers, modalBreakpoints, roundNumber, specialOptionControls, validateFileSize, validateFileType };
 //# sourceMappingURL=tedi-design-system-angular-community.mjs.map