@tedi-design-system/angular 7.1.0-rc.20 → 7.1.0-rc.22

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

@@ -5998,16 +5998,6 @@ class DateInputComponent {
     /** Number of tags that fit on a single row; `null` until measured. */
     visibleTagsCount = signal(null, ...(ngDevMode ? [{ debugName: "visibleTagsCount" }] : []));
     constructor() {
-        effect(() => {
-            const ref = this.inputElement();
-            const target = ref?.nativeElement;
-            if (!target)
-                return;
-            const next = this.inputValue();
-            if (target.value !== next) {
-                target.value = next;
-            }
-        });
         effect(() => {
             // Re-measure whenever the tag set changes.
             this.tags();
@@ -6099,7 +6089,7 @@ class DateInputComponent {
         return width - inputMinWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -6118,7 +6108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-date-input--tags-single-row]": "hasTags() && !multiRow()",
                         "[class.tedi-date-input--tags-measuring]": "hasTags() && !multiRow() && visibleTagsCount() === null",
                         "(window:resize)": "onResize()",
-                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"] }]
+                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], fieldElement: [{ type: i0.ViewChild, args: ["fieldElement", { isSignal: true }] }], tagElements: [{ type: i0.ViewChildren, args: ["tagElement", { ...{
@@ -19612,7 +19602,7 @@ const navigateTablist = (event) => {
     const tablist = current.closest('[role="tablist"]');
     if (!tablist)
         return null;
-    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]:not([disabled])')).filter((tab) => getComputedStyle(tab).display !== "none");
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]:not([disabled]):not([aria-disabled="true"])')).filter((tab) => getComputedStyle(tab).display !== "none");
     const currentIndex = tabs.indexOf(current);
     if (tabs.length === 0 || currentIndex === -1)
         return null;
@@ -19626,12 +19616,16 @@ const navigateTablist = (event) => {
 };
 
 /**
- * A single tab button inside `tedi-tabs-list`. Applied to a native `<button>`
- * so it inherits native focus, disabled and activation behaviour.
+ * A single tab inside `tedi-tabs-list`. Applied to a native `<button>` (in-page
+ * tab) or `<a>` (a tab that navigates to a route — add `href`/`routerLink`).
+ * The anchor form keeps the same `role="tab"` semantics but is a real link, so
+ * it works with keyboard/new-tab/copy-link as WCAG expects for navigation.
  */
 class TabsTriggerComponent {
     tabs = inject(TabsComponent);
     host = inject(ElementRef);
+    /** Whether the trigger is rendered as an anchor (`<a>`) rather than a button. */
+    isAnchor = this.host.nativeElement.tagName === "A";
     /**
      * Unique identifier for this tab. Used as the element id and to link to the
      * corresponding `tedi-tabs-content` panel (`aria-controls="{id}-panel"`).
@@ -19642,6 +19636,11 @@ class TabsTriggerComponent {
     /** Whether the tab is disabled. */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     isSelected = computed(() => this.tabs.activeTab() === this.id(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    tabIndex = computed(() => {
+        if (this.disabled())
+            return -1;
+        return this.isSelected() ? 0 : -1;
+    }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
     /** Plain-text label, used as the accessible name of the overflow dropdown item. */
     get label() {
         return this.host.nativeElement.textContent?.trim() ?? "";
@@ -19656,36 +19655,74 @@ class TabsTriggerComponent {
             inline: "nearest",
         });
     }
-    handleClick() {
-        if (!this.disabled()) {
-            this.tabs.select(this.id());
+    handleClick(event) {
+        if (this.disabled()) {
+            // Buttons are inert via the disabled attribute; a disabled anchor is kept
+            // unreachable via `pointer-events: none` + `tabindex="-1"`. preventDefault
+            // is a final guard against native href traversal. (A consumer-supplied
+            // `routerLink` navigates from its own click handler and can't be blocked
+            // here — bind `[routerLink]` to null while disabled, see docs.)
+            event?.preventDefault();
+            return;
+        }
+        // An anchor opened in another browsing context — a modifier/middle click or
+        // target="_blank" — must not change the active tab in this view. Let the
+        // browser (or RouterLink, which also skips modifier clicks) handle it.
+        if (this.isAnchor && this.opensInNewBrowsingContext(event)) {
+            return;
+        }
+        this.tabs.select(this.id());
+    }
+    opensInNewBrowsingContext(event) {
+        if (event instanceof MouseEvent &&
+            (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey)) {
+            return true;
         }
+        const target = this.host.nativeElement.target;
+        return target !== "" && target !== "_self";
     }
     handleKeydown(event) {
+        // Anchors don't activate on Space natively; the tab pattern expects it to,
+        // so forward it to a click (which drives routerLink/href navigation).
+        if (this.isAnchor && event.key === " ") {
+            event.preventDefault();
+            if (!this.disabled()) {
+                this.host.nativeElement.click();
+            }
+            return;
+        }
         const target = navigateTablist(event);
         if (target) {
-            this.tabs.select(target.id);
+            // Automatic activation for button tabs — activation just toggles an
+            // in-page panel. Anchor tabs navigate, so use manual activation: arrows
+            // only move focus and the user presses Enter/Space to follow the link
+            // (APG's recommended mode when activation is disruptive).
+            if (target.tagName !== "A") {
+                this.tabs.select(target.id);
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsTriggerComponent, isStandalone: true, selector: "button[tedi-tabs-trigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "tab" }, listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "id": "id()", "disabled": "disabled()", "attr.aria-selected": "isSelected()", "attr.aria-controls": "id() + '-panel'", "attr.tabindex": "isSelected() ? 0 : -1", "attr.data-name": "'tabs-trigger'", "class.tedi-tabs-trigger--selected": "isSelected()" }, classAttribute: "tedi-tabs-trigger" }, ngImport: i0, template: "@if (icon()) {\n  <tedi-icon [name]=\"icon()!\" [size]=\"18\" color=\"inherit\" />\n}\n<ng-content />\n", styles: [".tedi-tabs-trigger{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-trigger:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-trigger:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tabs-trigger{position:relative;text-decoration:none}.tedi-tabs-trigger--selected{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tabs-trigger--selected:after{position:absolute;top:0;right:0;left:0;content:\"\";border-top:3px solid var(--tab-item-selected-border)}.tedi-tabs-trigger:disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsTriggerComponent, isStandalone: true, selector: "button[tedi-tabs-trigger], a[tedi-tabs-trigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.type": "isAnchor ? null : 'button'", "id": "id()", "attr.disabled": "!isAnchor && disabled() ? '' : null", "attr.aria-disabled": "isAnchor && disabled() ? 'true' : null", "attr.aria-selected": "isSelected()", "attr.aria-controls": "id() + '-panel'", "attr.tabindex": "tabIndex()", "attr.data-name": "'tabs-trigger'", "class.tedi-tabs-trigger--selected": "isSelected()", "class.tedi-tabs-trigger--disabled": "disabled()" }, classAttribute: "tedi-tabs-trigger" }, ngImport: i0, template: "@if (icon()) {\n  <tedi-icon [name]=\"icon()!\" [size]=\"18\" color=\"inherit\" />\n}\n<ng-content />\n", styles: [".tedi-tabs-trigger{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-trigger:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-trigger:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tabs-trigger{position:relative;text-decoration:none}.tedi-tabs-trigger--selected{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tabs-trigger--selected:after{position:absolute;top:0;right:0;left:0;content:\"\";border-top:3px solid var(--tab-item-selected-border)}.tedi-tabs-trigger--disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "button[tedi-tabs-trigger]", standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "button[tedi-tabs-trigger], a[tedi-tabs-trigger]", standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-tabs-trigger",
-                        type: "button",
                         role: "tab",
+                        "[attr.type]": "isAnchor ? null : 'button'",
                         "[id]": "id()",
-                        "[disabled]": "disabled()",
+                        "[attr.disabled]": "!isAnchor && disabled() ? '' : null",
+                        "[attr.aria-disabled]": "isAnchor && disabled() ? 'true' : null",
                         "[attr.aria-selected]": "isSelected()",
                         "[attr.aria-controls]": "id() + '-panel'",
-                        "[attr.tabindex]": "isSelected() ? 0 : -1",
+                        "[attr.tabindex]": "tabIndex()",
                         "[attr.data-name]": "'tabs-trigger'",
                         "[class.tedi-tabs-trigger--selected]": "isSelected()",
-                        "(click)": "handleClick()",
+                        "[class.tedi-tabs-trigger--disabled]": "disabled()",
+                        "(click)": "handleClick($event)",
                         "(keydown)": "handleKeydown($event)",
-                    }, template: "@if (icon()) {\n  <tedi-icon [name]=\"icon()!\" [size]=\"18\" color=\"inherit\" />\n}\n<ng-content />\n", styles: [".tedi-tabs-trigger{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-trigger:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-trigger:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tabs-trigger{position:relative;text-decoration:none}.tedi-tabs-trigger--selected{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tabs-trigger--selected:after{position:absolute;top:0;right:0;left:0;content:\"\";border-top:3px solid var(--tab-item-selected-border)}.tedi-tabs-trigger:disabled{pointer-events:none;opacity:.4}\n"] }]
+                    }, template: "@if (icon()) {\n  <tedi-icon [name]=\"icon()!\" [size]=\"18\" color=\"inherit\" />\n}\n<ng-content />\n", styles: [".tedi-tabs-trigger{--_tab-background: var(--tab-item-default-background);--_tab-color: var(--tab-item-default-text);display:inline-flex;gap:var(--tab-inner-spacing);align-items:center;justify-content:center;padding:var(--tab-spacing-y) var(--tab-spacing-x);font-size:var(--body-regular-size);color:var(--_tab-color);white-space:nowrap;cursor:pointer;background:var(--_tab-background);border:none}.tedi-tabs-trigger:hover{--_tab-background: var(--tab-item-hover-background);--_tab-color: var(--tab-item-hover-text)}.tedi-tabs-trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--tedi-borders-02) var(--general-border-brand)}.tedi-tabs-trigger:active{--_tab-background: var(--tab-item-active-background);--_tab-color: var(--tab-item-active-text)}.tedi-tabs-trigger{position:relative;text-decoration:none}.tedi-tabs-trigger--selected{--_tab-background: var(--tab-item-selected-background);--_tab-color: var(--tab-item-selected-text);font-weight:var(--body-bold-weight)}.tedi-tabs-trigger--selected:after{position:absolute;top:0;right:0;left:0;content:\"\";border-top:3px solid var(--tab-item-selected-border)}.tedi-tabs-trigger--disabled{pointer-events:none;opacity:.4}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**