@tedi-design-system/angular 7.1.0-rc.21 → 7.1.0-rc.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8523,6 +8523,12 @@ class DateFieldComponent {
|
|
|
8523
8523
|
* (custom popover from that breakpoint up).
|
|
8524
8524
|
*/
|
|
8525
8525
|
useNativePicker = input(false, ...(ngDevMode ? [{ debugName: "useNativePicker" }] : []));
|
|
8526
|
+
/**
|
|
8527
|
+
* Close the calendar popover when the page (or a scrollable ancestor) scrolls.
|
|
8528
|
+
* Scrolling inside the calendar itself — or its nested year/month dropdown —
|
|
8529
|
+
* keeps it open. Only applies to the popover; the modal is unaffected.
|
|
8530
|
+
*/
|
|
8531
|
+
hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll" }] : []));
|
|
8526
8532
|
/** Open the calendar in a modal: `true` always, `false` never, breakpoint name → modal below that breakpoint. */
|
|
8527
8533
|
modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
|
|
8528
8534
|
/** Make the modal fullscreen: `true` always, `false` never, breakpoint name → fullscreen below that breakpoint. Only applies when the calendar actually opens as a modal. */
|
|
@@ -8543,8 +8549,11 @@ class DateFieldComponent {
|
|
|
8543
8549
|
breakpointService = inject(BreakpointService);
|
|
8544
8550
|
modalService = inject(ModalService);
|
|
8545
8551
|
hostEl = inject((ElementRef));
|
|
8552
|
+
renderer = inject(Renderer2);
|
|
8553
|
+
document = inject(DOCUMENT);
|
|
8546
8554
|
calendar = viewChild("calendar", ...(ngDevMode ? [{ debugName: "calendar" }] : []));
|
|
8547
8555
|
dateInput = viewChild.required("dateInput");
|
|
8556
|
+
connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
|
|
8548
8557
|
currentMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
|
|
8549
8558
|
overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
|
|
8550
8559
|
openedBy = signal("button", ...(ngDevMode ? [{ debugName: "openedBy" }] : []));
|
|
@@ -8565,6 +8574,7 @@ class DateFieldComponent {
|
|
|
8565
8574
|
cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
|
|
8566
8575
|
formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "formInvalid" }] : []));
|
|
8567
8576
|
modalRef = null;
|
|
8577
|
+
scrollListener;
|
|
8568
8578
|
onChange = () => { };
|
|
8569
8579
|
onTouched = () => { };
|
|
8570
8580
|
fieldDisabled = computed(() => this.inputDisabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "fieldDisabled" }] : []));
|
|
@@ -8665,6 +8675,7 @@ class DateFieldComponent {
|
|
|
8665
8675
|
inputIsTrigger = computed(() => this.showCalendar() && this.calendarTriggerResolved() === "input", ...(ngDevMode ? [{ debugName: "inputIsTrigger" }] : []));
|
|
8666
8676
|
initialOpenEmit = true;
|
|
8667
8677
|
constructor() {
|
|
8678
|
+
inject(DestroyRef).onDestroy(() => this.cleanupScrollListener());
|
|
8668
8679
|
effect(() => {
|
|
8669
8680
|
const v = this.value();
|
|
8670
8681
|
const anchor = this.deriveAnchor(v) ?? this.initialMonth() ?? null;
|
|
@@ -8838,6 +8849,13 @@ class DateFieldComponent {
|
|
|
8838
8849
|
}
|
|
8839
8850
|
handleOverlayAttached() {
|
|
8840
8851
|
this.calendar()?.focusActiveCell();
|
|
8852
|
+
if (this.hideOnScroll()) {
|
|
8853
|
+
this.setupScrollListener();
|
|
8854
|
+
}
|
|
8855
|
+
}
|
|
8856
|
+
handleOverlayDetached() {
|
|
8857
|
+
this.cleanupScrollListener();
|
|
8858
|
+
this.closeOverlay();
|
|
8841
8859
|
}
|
|
8842
8860
|
handleOverlayKeydown(event) {
|
|
8843
8861
|
if (event.key === "Escape") {
|
|
@@ -8851,6 +8869,43 @@ class DateFieldComponent {
|
|
|
8851
8869
|
const icon = host.querySelector(".tedi-date-input__icon");
|
|
8852
8870
|
icon?.focus();
|
|
8853
8871
|
}
|
|
8872
|
+
setupScrollListener() {
|
|
8873
|
+
this.cleanupScrollListener();
|
|
8874
|
+
this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
|
|
8875
|
+
if (!this.overlayOpen())
|
|
8876
|
+
return;
|
|
8877
|
+
if (this.isInsideOverlay(event.target))
|
|
8878
|
+
return;
|
|
8879
|
+
this.overlayOpen.set(false);
|
|
8880
|
+
this.onTouched();
|
|
8881
|
+
}, { capture: true, passive: true });
|
|
8882
|
+
}
|
|
8883
|
+
cleanupScrollListener() {
|
|
8884
|
+
if (this.scrollListener) {
|
|
8885
|
+
this.scrollListener();
|
|
8886
|
+
this.scrollListener = undefined;
|
|
8887
|
+
}
|
|
8888
|
+
}
|
|
8889
|
+
/**
|
|
8890
|
+
* Whether the scroll target is inside this field's own calendar overlay or a
|
|
8891
|
+
* nested overlay opened from within it (e.g. the year/month dropdown). Nested
|
|
8892
|
+
* overlays share the CDK overlay container but render in their own pane
|
|
8893
|
+
* stacked after this one in DOM order, so a `DOCUMENT_POSITION_FOLLOWING`
|
|
8894
|
+
* check distinguishes them from unrelated ancestors that should dismiss.
|
|
8895
|
+
*/
|
|
8896
|
+
isInsideOverlay(target) {
|
|
8897
|
+
if (!target || !(target instanceof Element))
|
|
8898
|
+
return false;
|
|
8899
|
+
const overlayEl = this.connectedOverlay()?.overlayRef?.overlayElement;
|
|
8900
|
+
if (!overlayEl)
|
|
8901
|
+
return false;
|
|
8902
|
+
if (overlayEl.contains(target))
|
|
8903
|
+
return true;
|
|
8904
|
+
if (!target.closest(".cdk-overlay-container"))
|
|
8905
|
+
return false;
|
|
8906
|
+
return !!(overlayEl.compareDocumentPosition(target) &
|
|
8907
|
+
Node.DOCUMENT_POSITION_FOLLOWING);
|
|
8908
|
+
}
|
|
8854
8909
|
openNativePicker() {
|
|
8855
8910
|
const inputEl = this.queryNativeInput();
|
|
8856
8911
|
if (!inputEl)
|
|
@@ -9024,7 +9079,7 @@ class DateFieldComponent {
|
|
|
9024
9079
|
return host.querySelector(".tedi-date-input__input");
|
|
9025
9080
|
}
|
|
9026
9081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { classAttribute: "tedi-date-field" }, providers: [
|
|
9082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { classAttribute: "tedi-date-field" }, providers: [
|
|
9028
9083
|
{
|
|
9029
9084
|
provide: NG_VALUE_ACCESSOR,
|
|
9030
9085
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
@@ -9034,7 +9089,7 @@ class DateFieldComponent {
|
|
|
9034
9089
|
provide: TEDI_FORM_FIELD_CONTROL,
|
|
9035
9090
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
9036
9091
|
},
|
|
9037
|
-
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [value]=\"displayValue()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"
|
|
9092
|
+
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [value]=\"displayValue()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9038
9093
|
}
|
|
9039
9094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
9040
9095
|
type: Component,
|
|
@@ -9057,8 +9112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
9057
9112
|
},
|
|
9058
9113
|
], host: {
|
|
9059
9114
|
class: "tedi-date-field",
|
|
9060
|
-
}, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [value]=\"displayValue()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"
|
|
9061
|
-
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }] } });
|
|
9115
|
+
}, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [value]=\"displayValue()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
|
|
9116
|
+
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
9062
9117
|
|
|
9063
9118
|
class PopoverTriggerDirective {
|
|
9064
9119
|
/**
|
|
@@ -19602,7 +19657,7 @@ const navigateTablist = (event) => {
|
|
|
19602
19657
|
const tablist = current.closest('[role="tablist"]');
|
|
19603
19658
|
if (!tablist)
|
|
19604
19659
|
return null;
|
|
19605
|
-
const tabs = Array.from(tablist.querySelectorAll('[role="tab"]:not([disabled])')).filter((tab) => getComputedStyle(tab).display !== "none");
|
|
19660
|
+
const tabs = Array.from(tablist.querySelectorAll('[role="tab"]:not([disabled]):not([aria-disabled="true"])')).filter((tab) => getComputedStyle(tab).display !== "none");
|
|
19606
19661
|
const currentIndex = tabs.indexOf(current);
|
|
19607
19662
|
if (tabs.length === 0 || currentIndex === -1)
|
|
19608
19663
|
return null;
|
|
@@ -19616,12 +19671,16 @@ const navigateTablist = (event) => {
|
|
|
19616
19671
|
};
|
|
19617
19672
|
|
|
19618
19673
|
/**
|
|
19619
|
-
* A single tab
|
|
19620
|
-
*
|
|
19674
|
+
* A single tab inside `tedi-tabs-list`. Applied to a native `<button>` (in-page
|
|
19675
|
+
* tab) or `<a>` (a tab that navigates to a route — add `href`/`routerLink`).
|
|
19676
|
+
* The anchor form keeps the same `role="tab"` semantics but is a real link, so
|
|
19677
|
+
* it works with keyboard/new-tab/copy-link as WCAG expects for navigation.
|
|
19621
19678
|
*/
|
|
19622
19679
|
class TabsTriggerComponent {
|
|
19623
19680
|
tabs = inject(TabsComponent);
|
|
19624
19681
|
host = inject(ElementRef);
|
|
19682
|
+
/** Whether the trigger is rendered as an anchor (`<a>`) rather than a button. */
|
|
19683
|
+
isAnchor = this.host.nativeElement.tagName === "A";
|
|
19625
19684
|
/**
|
|
19626
19685
|
* Unique identifier for this tab. Used as the element id and to link to the
|
|
19627
19686
|
* corresponding `tedi-tabs-content` panel (`aria-controls="{id}-panel"`).
|
|
@@ -19632,6 +19691,11 @@ class TabsTriggerComponent {
|
|
|
19632
19691
|
/** Whether the tab is disabled. */
|
|
19633
19692
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
19634
19693
|
isSelected = computed(() => this.tabs.activeTab() === this.id(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
|
|
19694
|
+
tabIndex = computed(() => {
|
|
19695
|
+
if (this.disabled())
|
|
19696
|
+
return -1;
|
|
19697
|
+
return this.isSelected() ? 0 : -1;
|
|
19698
|
+
}, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
19635
19699
|
/** Plain-text label, used as the accessible name of the overflow dropdown item. */
|
|
19636
19700
|
get label() {
|
|
19637
19701
|
return this.host.nativeElement.textContent?.trim() ?? "";
|
|
@@ -19646,36 +19710,74 @@ class TabsTriggerComponent {
|
|
|
19646
19710
|
inline: "nearest",
|
|
19647
19711
|
});
|
|
19648
19712
|
}
|
|
19649
|
-
handleClick() {
|
|
19650
|
-
if (
|
|
19651
|
-
|
|
19713
|
+
handleClick(event) {
|
|
19714
|
+
if (this.disabled()) {
|
|
19715
|
+
// Buttons are inert via the disabled attribute; a disabled anchor is kept
|
|
19716
|
+
// unreachable via `pointer-events: none` + `tabindex="-1"`. preventDefault
|
|
19717
|
+
// is a final guard against native href traversal. (A consumer-supplied
|
|
19718
|
+
// `routerLink` navigates from its own click handler and can't be blocked
|
|
19719
|
+
// here — bind `[routerLink]` to null while disabled, see docs.)
|
|
19720
|
+
event?.preventDefault();
|
|
19721
|
+
return;
|
|
19722
|
+
}
|
|
19723
|
+
// An anchor opened in another browsing context — a modifier/middle click or
|
|
19724
|
+
// target="_blank" — must not change the active tab in this view. Let the
|
|
19725
|
+
// browser (or RouterLink, which also skips modifier clicks) handle it.
|
|
19726
|
+
if (this.isAnchor && this.opensInNewBrowsingContext(event)) {
|
|
19727
|
+
return;
|
|
19728
|
+
}
|
|
19729
|
+
this.tabs.select(this.id());
|
|
19730
|
+
}
|
|
19731
|
+
opensInNewBrowsingContext(event) {
|
|
19732
|
+
if (event instanceof MouseEvent &&
|
|
19733
|
+
(event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey)) {
|
|
19734
|
+
return true;
|
|
19652
19735
|
}
|
|
19736
|
+
const target = this.host.nativeElement.target;
|
|
19737
|
+
return target !== "" && target !== "_self";
|
|
19653
19738
|
}
|
|
19654
19739
|
handleKeydown(event) {
|
|
19740
|
+
// Anchors don't activate on Space natively; the tab pattern expects it to,
|
|
19741
|
+
// so forward it to a click (which drives routerLink/href navigation).
|
|
19742
|
+
if (this.isAnchor && event.key === " ") {
|
|
19743
|
+
event.preventDefault();
|
|
19744
|
+
if (!this.disabled()) {
|
|
19745
|
+
this.host.nativeElement.click();
|
|
19746
|
+
}
|
|
19747
|
+
return;
|
|
19748
|
+
}
|
|
19655
19749
|
const target = navigateTablist(event);
|
|
19656
19750
|
if (target) {
|
|
19657
|
-
|
|
19751
|
+
// Automatic activation for button tabs — activation just toggles an
|
|
19752
|
+
// in-page panel. Anchor tabs navigate, so use manual activation: arrows
|
|
19753
|
+
// only move focus and the user presses Enter/Space to follow the link
|
|
19754
|
+
// (APG's recommended mode when activation is disruptive).
|
|
19755
|
+
if (target.tagName !== "A") {
|
|
19756
|
+
this.tabs.select(target.id);
|
|
19757
|
+
}
|
|
19658
19758
|
}
|
|
19659
19759
|
}
|
|
19660
19760
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19661
|
-
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: { "
|
|
19761
|
+
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 });
|
|
19662
19762
|
}
|
|
19663
19763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsTriggerComponent, decorators: [{
|
|
19664
19764
|
type: Component,
|
|
19665
|
-
args: [{ selector: "button[tedi-tabs-trigger]", standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
19765
|
+
args: [{ selector: "button[tedi-tabs-trigger], a[tedi-tabs-trigger]", standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
19666
19766
|
class: "tedi-tabs-trigger",
|
|
19667
|
-
type: "button",
|
|
19668
19767
|
role: "tab",
|
|
19768
|
+
"[attr.type]": "isAnchor ? null : 'button'",
|
|
19669
19769
|
"[id]": "id()",
|
|
19670
|
-
"[disabled]": "disabled()",
|
|
19770
|
+
"[attr.disabled]": "!isAnchor && disabled() ? '' : null",
|
|
19771
|
+
"[attr.aria-disabled]": "isAnchor && disabled() ? 'true' : null",
|
|
19671
19772
|
"[attr.aria-selected]": "isSelected()",
|
|
19672
19773
|
"[attr.aria-controls]": "id() + '-panel'",
|
|
19673
|
-
"[attr.tabindex]": "
|
|
19774
|
+
"[attr.tabindex]": "tabIndex()",
|
|
19674
19775
|
"[attr.data-name]": "'tabs-trigger'",
|
|
19675
19776
|
"[class.tedi-tabs-trigger--selected]": "isSelected()",
|
|
19676
|
-
"
|
|
19777
|
+
"[class.tedi-tabs-trigger--disabled]": "disabled()",
|
|
19778
|
+
"(click)": "handleClick($event)",
|
|
19677
19779
|
"(keydown)": "handleKeydown($event)",
|
|
19678
|
-
}, 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
|
|
19780
|
+
}, 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"] }]
|
|
19679
19781
|
}], 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 }] }] } });
|
|
19680
19782
|
|
|
19681
19783
|
/**
|