@tedi-design-system/angular 8.1.0 → 8.1.1

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

@@ -11564,7 +11564,7 @@ class NumberFieldComponent {
                 useExisting: forwardRef(() => NumberFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-inline:var(--form-field-padding-x-sm);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding:var(--form-field-padding-y-md-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-y-md-default)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
@@ -11581,7 +11581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => NumberFieldComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-inline:var(--form-field-padding-x-sm);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
+                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding:var(--form-field-padding-y-md-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-y-md-default)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputRef: [{
                 type: ViewChild,
                 args: ["inputElement"]
@@ -19230,7 +19230,7 @@ class FilterGroupComponent {
                 useExisting: forwardRef(() => FilterGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-selected-border-width))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-border-width-selected))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
@@ -19244,7 +19244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         class: "tedi-filter-group",
                         "[attr.role]": "isManaged() ? (allowMultiple() ? 'group' : 'radiogroup') : null",
                         "[attr.aria-label]": "label()",
-                    }, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-selected-border-width))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"] }]
+                    }, styles: [".tedi-filter-group{display:inline-flex}.tedi-filter-group .tedi-filter{--_filter-radius: 0}.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary{margin-left:calc(-1 * var(--tedi-borders-01))}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button{border-right:var(--tedi-borders-01) solid var(--filter-secondary-default-border)}.tedi-filter-group .tedi-filter--primary:not(:last-child) .tedi-filter__button:hover{border-right-color:transparent}.tedi-filter-group .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button{border-right-color:var(--filter-primary-selected-border)}.tedi-filter-group .tedi-filter--selected,.tedi-filter-group .tedi-filter:focus-within{z-index:1}.tedi-filter-group .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,.tedi-filter-group .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected{margin-left:calc(-1 * var(--general-border-width-selected))}.tedi-filter-group .tedi-filter:first-child{--_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius)}.tedi-filter-group .tedi-filter:last-child{--_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0}.tedi-filter-group .tedi-filter:only-child{--_filter-radius: var(--form-checkbox-radio-card-radius)}\n"] }]
         }], propDecorators: { allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class StatusBadgeComponent {
@@ -19767,7 +19767,7 @@ class FilterComponent {
                 useExisting: forwardRef(() => FilterComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -19798,7 +19798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-filter--large]": "size() === 'large'",
                         "[class.tedi-filter--selected]": "isSelected()",
                         "[class.tedi-filter--disabled]": "isDisabled()",
-                    }, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
+                    }, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                [class.tedi-filter-dropdown__item--selected]=\"\n                  isOptionSelected(option.value)\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                allFilteredSelected()\n                  ? 'true'\n                  : someFilteredSelected()\n                    ? 'mixed'\n                    : 'false'\n              \"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{\n                  resolvedSelectAllLabel()\n                }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (\n              option of filteredOptions();\n              track option.value;\n              let i = $index\n            ) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"\n                  activeOptionIndex() === i\n                \"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{\n                    option.label\n                  }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"check\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n\n  <div\n    class=\"tedi-filter__prepend\"\n    [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n  >\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge\n      class=\"tedi-filter__count\"\n      [text]=\"'' + selectedCount()\"\n      color=\"brand\"\n    />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon\n      class=\"tedi-filter__icon\"\n      name=\"arrow_drop_down\"\n      variant=\"filled\"\n      [size]=\"iconSize()\"\n      color=\"inherit\"\n    />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], preserveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.ViewChild, args: ["dropdown", { isSignal: true }] }], dropdownPanel: [{ type: i0.ViewChild, args: ["dropdownPanel", { isSignal: true }] }], optionsList: [{ type: i0.ViewChild, args: ["optionsList", { isSignal: true }] }], triggerBtn: [{ type: i0.ViewChild, args: ["triggerBtn", { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterContentDirective), { isSignal: true }] }], filterPrepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterPrependDirective), { isSignal: true }] }] } });
 
 class ProgressBarComponent {