@eherve/angular-material-section-tabs 0.0.0-stage → 22.0.0

package/fesm2022/eherve-angular-material-section-tabs.mjs

@@ -0,0 +1,1680 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, ErrorHandler, EventEmitter, Inject, Injectable, InjectionToken, Input, LOCALE_ID, NgModule, Output, ViewEncapsulation, booleanAttribute, inject, reflectComponentType } from "@angular/core";
+import * as i1 from "@angular/common";
+import { CommonModule, formatDate } from "@angular/common";
+import * as i3 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i6 from "@angular/material/core";
+import { MatRippleModule } from "@angular/material/core";
+import * as i4 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i5 from "@angular/material/menu";
+import { MatMenuModule } from "@angular/material/menu";
+import * as i7 from "@angular/material/slide-toggle";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import * as i8 from "@angular/material/tooltip";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { Subject, Subscription } from "rxjs";
+import { animate, group, query, style, transition, trigger } from "@angular/animations";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+const SECTION_SELECTION_HANDLER = new InjectionToken("SECTION_SELECTION_HANDLER");
+var SectionTabContentDirective = class SectionTabContentDirective {
+	templateRef;
+	constructor(templateRef) {
+		this.templateRef = templateRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabContentDirective,
+		deps: [{ token: i0.TemplateRef }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SectionTabContentDirective,
+		isStandalone: false,
+		selector: "ng-template[appSectionTabContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[appSectionTabContent]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }]
+});
+var SectionTabLabelDirective = class SectionTabLabelDirective {
+	templateRef;
+	constructor(templateRef) {
+		this.templateRef = templateRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabLabelDirective,
+		deps: [{ token: i0.TemplateRef }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SectionTabLabelDirective,
+		isStandalone: false,
+		selector: "ng-template[appSectionTabLabel]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabLabelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[appSectionTabLabel]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }]
+});
+var SectionTabComponent = class SectionTabComponent {
+	type = "button";
+	queryParamValue;
+	disabled = false;
+	done;
+	total;
+	totalMax;
+	progress = true;
+	statusColor = "#607286";
+	statusColorDone;
+	statusColorTotal;
+	labelDirective;
+	contentDirective;
+	stateChanges = new Subject();
+	ngOnChanges() {
+		this.stateChanges.next();
+	}
+	ngOnDestroy() {
+		this.stateChanges.complete();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "16.1.0",
+		version: "22.2.1",
+		type: SectionTabComponent,
+		isStandalone: false,
+		selector: "app-section-tab",
+		inputs: {
+			type: "type",
+			queryParamValue: "queryParamValue",
+			disabled: [
+				"disabled",
+				"disabled",
+				booleanAttribute
+			],
+			done: "done",
+			total: "total",
+			totalMax: "totalMax",
+			progress: "progress",
+			statusColor: "statusColor",
+			statusColorDone: "statusColorDone",
+			statusColorTotal: "statusColorTotal"
+		},
+		queries: [{
+			propertyName: "labelDirective",
+			first: true,
+			predicate: SectionTabLabelDirective,
+			descendants: true
+		}, {
+			propertyName: "contentDirective",
+			first: true,
+			predicate: SectionTabContentDirective,
+			descendants: true
+		}],
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-section-tab",
+			template: "",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false
+		}]
+	}],
+	propDecorators: {
+		type: [{ type: Input }],
+		queryParamValue: [{ type: Input }],
+		disabled: [{
+			type: Input,
+			args: [{ transform: booleanAttribute }]
+		}],
+		done: [{ type: Input }],
+		total: [{ type: Input }],
+		totalMax: [{ type: Input }],
+		progress: [{ type: Input }],
+		statusColor: [{ type: Input }],
+		statusColorDone: [{ type: Input }],
+		statusColorTotal: [{ type: Input }],
+		labelDirective: [{
+			type: ContentChild,
+			args: [SectionTabLabelDirective]
+		}],
+		contentDirective: [{
+			type: ContentChild,
+			args: [SectionTabContentDirective]
+		}]
+	}
+});
+var SectionTabsIntl = class SectionTabsIntl {
+	changes = new Subject();
+	messages = {
+		sections: "Sections",
+		emptySections: "Aucune section à afficher",
+		emptyComponents: "Aucun composant configuré",
+		emptyFields: "Aucun champ renseigné",
+		emptyFieldsDescription: "Activez l'affichage des champs vides pour voir les informations attendues.",
+		showEmptyFields: "Afficher les champs vides"
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsIntl,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsIntl,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsIntl,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var SectionTabsFooterDirective = class SectionTabsFooterDirective {
+	templateRef;
+	constructor(templateRef) {
+		this.templateRef = templateRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsFooterDirective,
+		deps: [{ token: i0.TemplateRef }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SectionTabsFooterDirective,
+		isStandalone: false,
+		selector: "ng-template[appSectionTabsFooter]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[appSectionTabsFooter]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }]
+});
+var SectionTabsMenuHeaderDirective = class SectionTabsMenuHeaderDirective {
+	templateRef;
+	constructor(templateRef) {
+		this.templateRef = templateRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsMenuHeaderDirective,
+		deps: [{ token: i0.TemplateRef }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SectionTabsMenuHeaderDirective,
+		isStandalone: false,
+		selector: "ng-template[appSectionTabsMenuHeader]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsMenuHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[appSectionTabsMenuHeader]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }]
+});
+const sectionTabsSlideTopTransitions = [query(":enter, :leave", style({
+	position: "absolute",
+	inset: 0,
+	width: "100%",
+	height: "100%",
+	overflow: "auto"
+}), { optional: true }), group([query(":enter", [style({
+	opacity: 0,
+	transform: "translateY(100%)"
+}), animate(".3s ease-out", style({
+	opacity: 1,
+	transform: "translateY(0%)"
+}))], { optional: true }), query(":leave", [style({
+	opacity: 1,
+	transform: "translateY(0%)"
+}), animate(".3s ease-out", style({
+	opacity: 0,
+	transform: "translateY(-100%)"
+}))], { optional: true })])];
+const sectionTabsSlideBottomTransitions = [query(":enter, :leave", style({
+	position: "absolute",
+	inset: 0,
+	width: "100%",
+	height: "100%",
+	overflow: "auto"
+}), { optional: true }), group([query(":enter", [style({
+	opacity: 0,
+	transform: "translateY(-100%)"
+}), animate(".3s ease-out", style({
+	opacity: 1,
+	transform: "translateY(0%)"
+}))], { optional: true }), query(":leave", [style({
+	opacity: 1,
+	transform: "translateY(0%)"
+}), animate(".3s ease-out", style({
+	opacity: 0,
+	transform: "translateY(100%)"
+}))], { optional: true })])];
+var SectionTabsComponent = class SectionTabsComponent {
+	static nextId = 0;
+	selectedIndex = 0;
+	queryParamKey;
+	selectedIndexChange = new EventEmitter();
+	tabComponents;
+	menuHeaderDirective;
+	footerDirective;
+	intl = inject(SectionTabsIntl);
+	instanceId = `section-tabs-${SectionTabsComponent.nextId++}`;
+	tabItems = [];
+	activeTabItems = [];
+	selectedTabItem;
+	menuHeaderTemplate;
+	footerTemplate;
+	changeDetectorRef = inject(ChangeDetectorRef);
+	handler = inject(SECTION_SELECTION_HANDLER, { optional: true });
+	errorHandler = inject(ErrorHandler);
+	handlerSubscription;
+	handlerGeneration = 0;
+	externalValue = null;
+	subscriptions = new Subscription();
+	tabStateSubscriptions = new Subscription();
+	contentInitialized = false;
+	ngAfterContentInit() {
+		this.contentInitialized = true;
+		this.subscriptions.add(this.intl.changes.subscribe(() => this.changeDetectorRef.markForCheck()));
+		this.refreshProjectedTemplates();
+		this.refreshTabItems();
+		this.synchronizeSelectionWithQueryParameter();
+		this.bindSelectionHandler();
+		this.subscriptions.add(this.tabComponents.changes.subscribe(() => this.handleTabsChange()));
+	}
+	ngOnChanges(changes) {
+		if (!this.contentInitialized) return;
+		if (changes["queryParamKey"]) {
+			this.bindSelectionHandler();
+			this.synchronizeSelectionWithQueryParameter();
+			return;
+		}
+		if (!changes["selectedIndex"]) return;
+		this.synchronizeSelectionWithQueryParameter();
+	}
+	ngOnDestroy() {
+		this.handlerGeneration++;
+		this.handlerSubscription?.unsubscribe();
+		this.subscriptions.unsubscribe();
+		this.tabStateSubscriptions.unsubscribe();
+	}
+	selectTab(tabItem) {
+		if (!this.isSelectableTabItem(tabItem)) return;
+		this.applySelectedIndex(tabItem.index, true);
+		this.updateQueryParameter(tabItem);
+	}
+	handleTabsChange() {
+		this.refreshProjectedTemplates();
+		this.refreshTabItems();
+		this.synchronizeSelectionWithQueryParameter();
+	}
+	handleTabStateChange() {
+		this.refreshTabItems(false);
+		this.synchronizeSelectionWithQueryParameter();
+	}
+	refreshProjectedTemplates() {
+		this.menuHeaderTemplate = this.menuHeaderDirective?.templateRef;
+		this.footerTemplate = this.footerDirective?.templateRef;
+	}
+	refreshTabItems(refreshSubscriptions = true) {
+		const tabs = this.tabComponents?.toArray() ?? [];
+		this.tabItems = this.buildTabItems(tabs);
+		if (refreshSubscriptions) this.refreshTabStateSubscriptions(tabs);
+	}
+	buildTabItems(tabs) {
+		let buttonIndex = 0;
+		return tabs.map((tab, renderIndex) => {
+			const index = tab.type === "separator" ? -1 : buttonIndex++;
+			return this.buildTabItem(tab, index, renderIndex);
+		});
+	}
+	refreshTabStateSubscriptions(tabs) {
+		this.tabStateSubscriptions.unsubscribe();
+		const subscription = new Subscription();
+		tabs.forEach((tab) => {
+			subscription.add(tab.stateChanges.subscribe(() => this.handleTabStateChange()));
+		});
+		this.tabStateSubscriptions = subscription;
+	}
+	buildTabItem(tab, index, renderIndex) {
+		const isButton = tab.type === "button";
+		return {
+			tab,
+			type: tab.type,
+			index,
+			renderIndex,
+			queryParamValue: isButton ? tab.queryParamValue : void 0,
+			selected: isButton && index === this.selectedIndex,
+			disabled: isButton && tab.disabled,
+			buttonId: `${this.instanceId}-button-${renderIndex}`,
+			panelId: `${this.instanceId}-panel-${renderIndex}`,
+			statusDoneLabel: isButton ? this.buildDoneLabel(tab.done) : void 0,
+			statusTotalLabel: isButton ? this.buildTotalLabel(tab.done, tab.total, tab.totalMax) : void 0,
+			progress: tab.progress && isButton ? this.buildProgress(tab.done, tab.total) : void 0,
+			labelTemplate: tab.labelDirective?.templateRef,
+			contentTemplate: isButton ? tab.contentDirective?.templateRef : void 0
+		};
+	}
+	synchronizeSelectionWithQueryParameter() {
+		const queryParamValue = this.getQueryParameterValue();
+		if (queryParamValue === null) {
+			this.applySelectedIndex(this.selectedIndex, false);
+			return;
+		}
+		const queryParamTabItem = this.tabItems.find((tabItem) => tabItem.queryParamValue === queryParamValue);
+		if (!queryParamTabItem || !this.isSelectableTabItem(queryParamTabItem)) {
+			this.applySelectedIndex(this.selectedIndex, false);
+			return;
+		}
+		this.applySelectedIndex(queryParamTabItem.index, true);
+	}
+	bindSelectionHandler() {
+		const generation = ++this.handlerGeneration;
+		this.handlerSubscription?.unsubscribe();
+		this.externalValue = null;
+		const key = this.queryParamKey;
+		if (!this.handler || !key?.trim()) return;
+		try {
+			this.handlerSubscription = this.handler.observe(key).subscribe({
+				next: (value) => {
+					if (generation !== this.handlerGeneration) return;
+					this.externalValue = value;
+					this.synchronizeSelectionWithQueryParameter();
+					this.changeDetectorRef.markForCheck();
+				},
+				error: (error) => {
+					if (generation === this.handlerGeneration) this.errorHandler.handleError(error);
+				}
+			});
+		} catch (error) {
+			this.errorHandler.handleError(error);
+		}
+	}
+	getQueryParameterValue() {
+		return this.externalValue;
+	}
+	updateQueryParameter(tabItem) {
+		const key = this.queryParamKey;
+		const value = tabItem.queryParamValue;
+		if (!this.handler || !key?.trim() || value === void 0 || value === this.externalValue) return;
+		try {
+			const result = this.handler.select(key, value);
+			if (result) Promise.resolve(result).catch((error) => this.errorHandler.handleError(error));
+		} catch (error) {
+			this.errorHandler.handleError(error);
+		}
+	}
+	buildDoneLabel(done) {
+		return this.hasCounterValue(done) ? `${done}` : void 0;
+	}
+	buildTotalLabel(done, total, totalMax) {
+		if (!this.hasCounterValue(done) || !this.hasCounterValue(total)) return void 0;
+		return `/${this.buildDisplayedTotal(total, totalMax)}`;
+	}
+	buildDisplayedTotal(total, totalMax) {
+		const numericTotal = this.toNumericCounter(total);
+		const numericTotalMax = this.toNumericCounter(totalMax);
+		if (numericTotal !== void 0 && numericTotalMax !== void 0 && numericTotal > numericTotalMax) return `+${numericTotalMax}`;
+		return `${total}`;
+	}
+	toNumericCounter(value) {
+		if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+		if (typeof value !== "string" || value.trim() === "") return void 0;
+		const numericValue = Number(value);
+		return Number.isFinite(numericValue) ? numericValue : void 0;
+	}
+	buildProgress(done, total) {
+		if (typeof done !== "number" || typeof total !== "number" || total <= 0) return void 0;
+		return Math.min(Math.max(done / total * 100, 0), 100);
+	}
+	hasCounterValue(value) {
+		return value !== void 0 && value !== null && value !== "";
+	}
+	applySelectedIndex(index, emitChange) {
+		const selectedIndex = this.getSafeSelectedIndex(index);
+		if (selectedIndex === void 0) {
+			this.clearSelection();
+			return;
+		}
+		const selectionChanged = this.selectedIndex !== selectedIndex || this.selectedTabItem?.index !== selectedIndex;
+		this.selectedIndex = selectedIndex;
+		this.refreshSelection();
+		if (emitChange && selectionChanged) this.selectedIndexChange.emit(selectedIndex);
+	}
+	getSafeSelectedIndex(index) {
+		const selectableTabItems = this.getSelectableTabItems();
+		const requestedTabItem = selectableTabItems.find((tabItem) => tabItem.index === index);
+		if (requestedTabItem && !requestedTabItem.disabled) return requestedTabItem.index;
+		return selectableTabItems.find((tabItem) => !tabItem.disabled)?.index;
+	}
+	refreshSelection() {
+		this.tabItems = this.tabItems.map((tabItem) => ({
+			...tabItem,
+			selected: this.isButtonTabItem(tabItem) && tabItem.index === this.selectedIndex
+		}));
+		this.selectedTabItem = this.tabItems.find((tabItem) => tabItem.selected);
+		this.activeTabItems = this.selectedTabItem ? [this.selectedTabItem] : [];
+	}
+	clearSelection() {
+		this.tabItems = this.tabItems.map((tabItem) => ({
+			...tabItem,
+			selected: false
+		}));
+		this.selectedTabItem = void 0;
+		this.activeTabItems = [];
+	}
+	getSelectableTabItems() {
+		return this.tabItems.filter((tabItem) => this.isButtonTabItem(tabItem));
+	}
+	isSelectableTabItem(tabItem) {
+		return this.isButtonTabItem(tabItem) && !tabItem.disabled;
+	}
+	isButtonTabItem(tabItem) {
+		return tabItem.type === "button";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: SectionTabsComponent,
+		isStandalone: false,
+		selector: "app-section-tabs",
+		inputs: {
+			selectedIndex: "selectedIndex",
+			queryParamKey: "queryParamKey"
+		},
+		outputs: { selectedIndexChange: "selectedIndexChange" },
+		queries: [
+			{
+				propertyName: "menuHeaderDirective",
+				first: true,
+				predicate: SectionTabsMenuHeaderDirective,
+				descendants: true
+			},
+			{
+				propertyName: "footerDirective",
+				first: true,
+				predicate: SectionTabsFooterDirective,
+				descendants: true
+			},
+			{
+				propertyName: "tabComponents",
+				predicate: SectionTabComponent,
+				descendants: true
+			}
+		],
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<!-- @format -->\n\n<div class=\"section-tabs\">\n  <aside\n    class=\"section-tabs__sidebar\"\n    [attr.aria-label]=\"intl.messages.sections\"\n  >\n    <div class=\"section-tabs__sidebar-card\">\n      @if (menuHeaderTemplate) {\n        <div class=\"section-tabs__sidebar-title\">\n          <ng-container *ngTemplateOutlet=\"menuHeaderTemplate\"></ng-container>\n        </div>\n      }\n\n      <nav\n        class=\"section-tabs__sidebar-list\"\n        role=\"tablist\"\n        aria-orientation=\"vertical\"\n      >\n        @for (tabItem of tabItems; track tabItem.tab) {\n          @if (tabItem.type === \"separator\") {\n            <div class=\"section-tabs__sidebar-separator\" role=\"presentation\">\n              @if (tabItem.labelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"tabItem.labelTemplate\"\n                ></ng-container>\n              }\n            </div>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"section-tabs__sidebar-item\"\n              role=\"tab\"\n              [id]=\"tabItem.buttonId\"\n              [class.active]=\"tabItem.selected\"\n              [disabled]=\"tabItem.disabled\"\n              [attr.aria-selected]=\"tabItem.selected\"\n              [attr.aria-controls]=\"tabItem.panelId\"\n              (click)=\"selectTab(tabItem)\"\n            >\n              <div class=\"section-tabs__label-header\">\n                <div class=\"section-tabs__label-title\">\n                  @if (tabItem.labelTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"tabItem.labelTemplate\"\n                    ></ng-container>\n                  }\n                </div>\n\n                @if (tabItem.statusDoneLabel) {\n                  <span\n                    class=\"section-tabs__mini-chip\"\n                    [style.color]=\"tabItem.tab.statusColor\"\n                    [style.--section-tab-done-color]=\"\n                      tabItem.tab.statusColorDone\n                    \"\n                    [style.--section-tab-total-color]=\"\n                      tabItem.tab.statusColorTotal\n                    \"\n                  >\n                    <span class=\"section-tabs__mini-chip-done\">{{\n                      tabItem.statusDoneLabel\n                    }}</span>\n                    @if (tabItem.statusTotalLabel) {\n                      <span class=\"section-tabs__mini-chip-total\">{{\n                        tabItem.statusTotalLabel\n                      }}</span>\n                    }\n                  </span>\n                }\n              </div>\n\n              @if (tabItem.progress !== undefined) {\n                <div class=\"section-tabs__progress\" aria-hidden=\"true\">\n                  <span [style.width.%]=\"tabItem.progress\"></span>\n                </div>\n              }\n            </button>\n          }\n        }\n      </nav>\n\n      @if (footerTemplate) {\n        <footer class=\"section-tabs__sidebar-footer\">\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </footer>\n      }\n    </div>\n  </aside>\n\n  <div class=\"section-tabs__content\">\n    <div\n      class=\"section-tabs__content-viewport\"\n      [@sectionTabsContentTransition]=\"selectedIndex\"\n    >\n      @for (tabItem of activeTabItems; track tabItem.tab) {\n        <section\n          class=\"section-tabs__content-panel\"\n          role=\"tabpanel\"\n          [id]=\"tabItem.panelId\"\n          [attr.aria-labelledby]=\"tabItem.buttonId\"\n        >\n          @if (tabItem.contentTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"tabItem.contentTemplate\"\n            ></ng-container>\n          }\n        </section>\n      }\n    </div>\n  </div>\n</div>\n",
+		styles: ["app-section-tabs{display:block;height:100%;min-width:0;min-height:0}app-section-tabs .section-tabs{height:100%;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr);align-items:stretch;background:var(--ngx-mat-section-tabs-background, #f4f6f8);color:var(--ngx-mat-section-tabs-text, #15324a)}app-section-tabs .section-tabs__sidebar{min-width:0;min-height:0;display:flex;position:sticky;top:8px;z-index:100;overflow:hidden;margin:8px}app-section-tabs .section-tabs__sidebar-card{min-width:0;min-height:0;display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;border:1px solid #d9e0e7;border-radius:8px;box-shadow:none;overflow:hidden;background:#fff}app-section-tabs .section-tabs__sidebar-title{padding:16px 8px 0;font-size:.9rem;font-weight:600;letter-spacing:.06em;color:#1d3447;text-transform:uppercase}app-section-tabs .section-tabs__sidebar-separator{width:100%;box-sizing:border-box;padding:8px 4px 4px;color:#1d3447;font-size:.9rem;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}app-section-tabs .section-tabs__sidebar-list{min-width:0;min-height:0;display:flex;flex:1 1 auto;flex-direction:column;gap:6px;padding:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}app-section-tabs .section-tabs__sidebar-item{width:100%;display:flex;flex-direction:column;gap:10px;border:1px solid transparent;border-radius:8px;background:transparent;padding:12px;text-align:left;color:inherit;cursor:pointer;transition:border-color .16s ease-out,background-color .16s ease-out,opacity .16s ease-out}app-section-tabs .section-tabs__sidebar-item:hover:not(:disabled),app-section-tabs .section-tabs__sidebar-item:focus-visible{background:#f6f8fa}app-section-tabs .section-tabs__sidebar-item.active{border-color:#98a9ba;background:#eef3f7}app-section-tabs .section-tabs__sidebar-item:disabled{cursor:default;opacity:.45}app-section-tabs .section-tabs__label-header{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:12px}app-section-tabs .section-tabs__label-title{min-width:0;display:flex;flex:1 1 auto;align-items:center;gap:8px;color:#111827;font-weight:700}app-section-tabs .section-tabs__label-title>mat-icon,app-section-tabs .section-tabs__label-title>.mat-icon{order:-1;flex:0 0 auto;color:#6b7280}app-section-tabs .section-tabs__label-title>span,app-section-tabs .section-tabs__label-title>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}app-section-tabs .section-tabs__label-title>mat-chip,app-section-tabs .section-tabs__label-title>mat-chip-row,app-section-tabs .section-tabs__label-title>.mat-mdc-chip,app-section-tabs .section-tabs__label-title>.section-tabs__label-chip{order:100;margin-left:auto}app-section-tabs .section-tabs__mini-chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:8px;background:#eef3f7;color:#607286;font-size:.82rem;font-weight:600}app-section-tabs .section-tabs__mini-chip-done{color:var(--section-tab-done-color, inherit)}app-section-tabs .section-tabs__mini-chip-total{color:var(--section-tab-total-color, inherit)}app-section-tabs .section-tabs__progress{height:4px;border-radius:8px;background:#d6dce2;overflow:hidden}app-section-tabs .section-tabs__progress span{display:block;height:100%;border-radius:8px;background:var(--ngx-mat-section-tabs-primary, #324c60)}app-section-tabs .section-tabs__sidebar-footer{flex:0 0 auto;padding:12px 18px 18px;border-top:1px solid #edf1f4}app-section-tabs .section-tabs__content{min-width:0;min-height:0;height:100%}app-section-tabs .section-tabs__content-viewport{position:relative;height:100%;min-height:0;overflow:hidden}app-section-tabs .section-tabs__content-panel{height:100%;min-height:0;display:flex;flex-direction:column;overflow:auto;box-sizing:border-box}app-section-tabs .section-tabs__content-panel .section-tabs-card,app-section-tabs .section-tabs__content-panel .mat-mdc-card{border-radius:8px;box-shadow:none;overflow:hidden;background:#fff;border:1px solid #d9e0e7}app-section-tabs .section-tabs__content-panel .section-card.active,app-section-tabs .section-tabs__content-panel mat-card.active,app-section-tabs .section-tabs__content-panel .mat-mdc-card.active{border-color:#a7b8c8}app-section-tabs .section-tabs__content-panel .card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 12px;border-bottom:1px solid #e7ecf0}app-section-tabs .section-tabs__content-panel .card-header h3,app-section-tabs .section-tabs__content-panel mat-card-title{margin:0;color:#15324a;font-size:1.15rem;font-weight:600}app-section-tabs .section-tabs__content-panel .card-header p,app-section-tabs .section-tabs__content-panel mat-card-subtitle{margin:4px 0 0;color:#66768a;font-size:.95rem}app-section-tabs .section-tabs__content-panel .mini-chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:8px;background:#eef3f7;color:#607286;font-size:.82rem;font-weight:600}app-section-tabs .section-tabs__content-panel .field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}app-section-tabs .section-tabs__content-panel .field-cell{min-height:84px;display:flex;flex-direction:column;justify-content:start;gap:6px;padding:14px 16px;border-right:1px solid #e7ecf0;border-bottom:1px solid #e7ecf0;box-sizing:border-box}app-section-tabs .section-tabs__content-panel .field-cell.wide{grid-column:span 2}app-section-tabs .section-tabs__content-panel .field-cell.empty{background:#fafbfd}app-section-tabs .section-tabs__content-panel .field-label{color:#5f6f82;font-size:.92rem}app-section-tabs .section-tabs__content-panel .field-value{color:#15324a;font-size:1rem;font-weight:600;line-height:1.25}app-section-tabs .section-tabs__content-panel .empty-state{display:flex;align-items:center;gap:14px;padding:18px;color:#5f6f82}app-section-tabs .section-tabs__content-panel .empty-state mat-icon{color:#8d98a5}app-section-tabs .section-tabs__content-panel .empty-state strong,app-section-tabs .section-tabs__content-panel .empty-state span{display:block}@media(max-width:1400px){app-section-tabs .section-tabs__content-panel .field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){app-section-tabs .section-tabs{grid-template-columns:1fr}app-section-tabs .section-tabs__sidebar{position:static;overflow:hidden}app-section-tabs .section-tabs__content{padding-left:8px;box-sizing:border-box}app-section-tabs .section-tabs__content,app-section-tabs .section-tabs__content-viewport,app-section-tabs .section-tabs__content-panel{height:auto}app-section-tabs .section-tabs__content-panel .field-grid,app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){app-section-tabs .section-tabs__content-panel .field-grid,app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:1fr}app-section-tabs .section-tabs__content-panel .field-cell.wide{grid-column:span 1}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: i1.NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		animations: [trigger("sectionTabsContentTransition", [transition(":increment", sectionTabsSlideTopTransitions), transition(":decrement", sectionTabsSlideBottomTransitions)])],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-section-tabs",
+			standalone: false,
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.Eager,
+			animations: [trigger("sectionTabsContentTransition", [transition(":increment", sectionTabsSlideTopTransitions), transition(":decrement", sectionTabsSlideBottomTransitions)])],
+			template: "<!-- @format -->\n\n<div class=\"section-tabs\">\n  <aside\n    class=\"section-tabs__sidebar\"\n    [attr.aria-label]=\"intl.messages.sections\"\n  >\n    <div class=\"section-tabs__sidebar-card\">\n      @if (menuHeaderTemplate) {\n        <div class=\"section-tabs__sidebar-title\">\n          <ng-container *ngTemplateOutlet=\"menuHeaderTemplate\"></ng-container>\n        </div>\n      }\n\n      <nav\n        class=\"section-tabs__sidebar-list\"\n        role=\"tablist\"\n        aria-orientation=\"vertical\"\n      >\n        @for (tabItem of tabItems; track tabItem.tab) {\n          @if (tabItem.type === \"separator\") {\n            <div class=\"section-tabs__sidebar-separator\" role=\"presentation\">\n              @if (tabItem.labelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"tabItem.labelTemplate\"\n                ></ng-container>\n              }\n            </div>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"section-tabs__sidebar-item\"\n              role=\"tab\"\n              [id]=\"tabItem.buttonId\"\n              [class.active]=\"tabItem.selected\"\n              [disabled]=\"tabItem.disabled\"\n              [attr.aria-selected]=\"tabItem.selected\"\n              [attr.aria-controls]=\"tabItem.panelId\"\n              (click)=\"selectTab(tabItem)\"\n            >\n              <div class=\"section-tabs__label-header\">\n                <div class=\"section-tabs__label-title\">\n                  @if (tabItem.labelTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"tabItem.labelTemplate\"\n                    ></ng-container>\n                  }\n                </div>\n\n                @if (tabItem.statusDoneLabel) {\n                  <span\n                    class=\"section-tabs__mini-chip\"\n                    [style.color]=\"tabItem.tab.statusColor\"\n                    [style.--section-tab-done-color]=\"\n                      tabItem.tab.statusColorDone\n                    \"\n                    [style.--section-tab-total-color]=\"\n                      tabItem.tab.statusColorTotal\n                    \"\n                  >\n                    <span class=\"section-tabs__mini-chip-done\">{{\n                      tabItem.statusDoneLabel\n                    }}</span>\n                    @if (tabItem.statusTotalLabel) {\n                      <span class=\"section-tabs__mini-chip-total\">{{\n                        tabItem.statusTotalLabel\n                      }}</span>\n                    }\n                  </span>\n                }\n              </div>\n\n              @if (tabItem.progress !== undefined) {\n                <div class=\"section-tabs__progress\" aria-hidden=\"true\">\n                  <span [style.width.%]=\"tabItem.progress\"></span>\n                </div>\n              }\n            </button>\n          }\n        }\n      </nav>\n\n      @if (footerTemplate) {\n        <footer class=\"section-tabs__sidebar-footer\">\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </footer>\n      }\n    </div>\n  </aside>\n\n  <div class=\"section-tabs__content\">\n    <div\n      class=\"section-tabs__content-viewport\"\n      [@sectionTabsContentTransition]=\"selectedIndex\"\n    >\n      @for (tabItem of activeTabItems; track tabItem.tab) {\n        <section\n          class=\"section-tabs__content-panel\"\n          role=\"tabpanel\"\n          [id]=\"tabItem.panelId\"\n          [attr.aria-labelledby]=\"tabItem.buttonId\"\n        >\n          @if (tabItem.contentTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"tabItem.contentTemplate\"\n            ></ng-container>\n          }\n        </section>\n      }\n    </div>\n  </div>\n</div>\n",
+			styles: ["app-section-tabs{display:block;height:100%;min-width:0;min-height:0}app-section-tabs .section-tabs{height:100%;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr);align-items:stretch;background:var(--ngx-mat-section-tabs-background, #f4f6f8);color:var(--ngx-mat-section-tabs-text, #15324a)}app-section-tabs .section-tabs__sidebar{min-width:0;min-height:0;display:flex;position:sticky;top:8px;z-index:100;overflow:hidden;margin:8px}app-section-tabs .section-tabs__sidebar-card{min-width:0;min-height:0;display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;border:1px solid #d9e0e7;border-radius:8px;box-shadow:none;overflow:hidden;background:#fff}app-section-tabs .section-tabs__sidebar-title{padding:16px 8px 0;font-size:.9rem;font-weight:600;letter-spacing:.06em;color:#1d3447;text-transform:uppercase}app-section-tabs .section-tabs__sidebar-separator{width:100%;box-sizing:border-box;padding:8px 4px 4px;color:#1d3447;font-size:.9rem;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}app-section-tabs .section-tabs__sidebar-list{min-width:0;min-height:0;display:flex;flex:1 1 auto;flex-direction:column;gap:6px;padding:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}app-section-tabs .section-tabs__sidebar-item{width:100%;display:flex;flex-direction:column;gap:10px;border:1px solid transparent;border-radius:8px;background:transparent;padding:12px;text-align:left;color:inherit;cursor:pointer;transition:border-color .16s ease-out,background-color .16s ease-out,opacity .16s ease-out}app-section-tabs .section-tabs__sidebar-item:hover:not(:disabled),app-section-tabs .section-tabs__sidebar-item:focus-visible{background:#f6f8fa}app-section-tabs .section-tabs__sidebar-item.active{border-color:#98a9ba;background:#eef3f7}app-section-tabs .section-tabs__sidebar-item:disabled{cursor:default;opacity:.45}app-section-tabs .section-tabs__label-header{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:12px}app-section-tabs .section-tabs__label-title{min-width:0;display:flex;flex:1 1 auto;align-items:center;gap:8px;color:#111827;font-weight:700}app-section-tabs .section-tabs__label-title>mat-icon,app-section-tabs .section-tabs__label-title>.mat-icon{order:-1;flex:0 0 auto;color:#6b7280}app-section-tabs .section-tabs__label-title>span,app-section-tabs .section-tabs__label-title>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}app-section-tabs .section-tabs__label-title>mat-chip,app-section-tabs .section-tabs__label-title>mat-chip-row,app-section-tabs .section-tabs__label-title>.mat-mdc-chip,app-section-tabs .section-tabs__label-title>.section-tabs__label-chip{order:100;margin-left:auto}app-section-tabs .section-tabs__mini-chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:8px;background:#eef3f7;color:#607286;font-size:.82rem;font-weight:600}app-section-tabs .section-tabs__mini-chip-done{color:var(--section-tab-done-color, inherit)}app-section-tabs .section-tabs__mini-chip-total{color:var(--section-tab-total-color, inherit)}app-section-tabs .section-tabs__progress{height:4px;border-radius:8px;background:#d6dce2;overflow:hidden}app-section-tabs .section-tabs__progress span{display:block;height:100%;border-radius:8px;background:var(--ngx-mat-section-tabs-primary, #324c60)}app-section-tabs .section-tabs__sidebar-footer{flex:0 0 auto;padding:12px 18px 18px;border-top:1px solid #edf1f4}app-section-tabs .section-tabs__content{min-width:0;min-height:0;height:100%}app-section-tabs .section-tabs__content-viewport{position:relative;height:100%;min-height:0;overflow:hidden}app-section-tabs .section-tabs__content-panel{height:100%;min-height:0;display:flex;flex-direction:column;overflow:auto;box-sizing:border-box}app-section-tabs .section-tabs__content-panel .section-tabs-card,app-section-tabs .section-tabs__content-panel .mat-mdc-card{border-radius:8px;box-shadow:none;overflow:hidden;background:#fff;border:1px solid #d9e0e7}app-section-tabs .section-tabs__content-panel .section-card.active,app-section-tabs .section-tabs__content-panel mat-card.active,app-section-tabs .section-tabs__content-panel .mat-mdc-card.active{border-color:#a7b8c8}app-section-tabs .section-tabs__content-panel .card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 12px;border-bottom:1px solid #e7ecf0}app-section-tabs .section-tabs__content-panel .card-header h3,app-section-tabs .section-tabs__content-panel mat-card-title{margin:0;color:#15324a;font-size:1.15rem;font-weight:600}app-section-tabs .section-tabs__content-panel .card-header p,app-section-tabs .section-tabs__content-panel mat-card-subtitle{margin:4px 0 0;color:#66768a;font-size:.95rem}app-section-tabs .section-tabs__content-panel .mini-chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:8px;background:#eef3f7;color:#607286;font-size:.82rem;font-weight:600}app-section-tabs .section-tabs__content-panel .field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}app-section-tabs .section-tabs__content-panel .field-cell{min-height:84px;display:flex;flex-direction:column;justify-content:start;gap:6px;padding:14px 16px;border-right:1px solid #e7ecf0;border-bottom:1px solid #e7ecf0;box-sizing:border-box}app-section-tabs .section-tabs__content-panel .field-cell.wide{grid-column:span 2}app-section-tabs .section-tabs__content-panel .field-cell.empty{background:#fafbfd}app-section-tabs .section-tabs__content-panel .field-label{color:#5f6f82;font-size:.92rem}app-section-tabs .section-tabs__content-panel .field-value{color:#15324a;font-size:1rem;font-weight:600;line-height:1.25}app-section-tabs .section-tabs__content-panel .empty-state{display:flex;align-items:center;gap:14px;padding:18px;color:#5f6f82}app-section-tabs .section-tabs__content-panel .empty-state mat-icon{color:#8d98a5}app-section-tabs .section-tabs__content-panel .empty-state strong,app-section-tabs .section-tabs__content-panel .empty-state span{display:block}@media(max-width:1400px){app-section-tabs .section-tabs__content-panel .field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){app-section-tabs .section-tabs{grid-template-columns:1fr}app-section-tabs .section-tabs__sidebar{position:static;overflow:hidden}app-section-tabs .section-tabs__content{padding-left:8px;box-sizing:border-box}app-section-tabs .section-tabs__content,app-section-tabs .section-tabs__content-viewport,app-section-tabs .section-tabs__content-panel{height:auto}app-section-tabs .section-tabs__content-panel .field-grid,app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){app-section-tabs .section-tabs__content-panel .field-grid,app-section-tabs .section-tabs__content-panel .field-grid.compact{grid-template-columns:1fr}app-section-tabs .section-tabs__content-panel .field-cell.wide{grid-column:span 1}}\n"]
+		}]
+	}],
+	propDecorators: {
+		selectedIndex: [{ type: Input }],
+		queryParamKey: [{ type: Input }],
+		selectedIndexChange: [{ type: Output }],
+		tabComponents: [{
+			type: ContentChildren,
+			args: [SectionTabComponent, { descendants: true }]
+		}],
+		menuHeaderDirective: [{
+			type: ContentChild,
+			args: [SectionTabsMenuHeaderDirective]
+		}],
+		footerDirective: [{
+			type: ContentChild,
+			args: [SectionTabsFooterDirective]
+		}]
+	}
+});
+var SectionTabsDisplayResponsiveGridDirective = class SectionTabsDisplayResponsiveGridDirective {
+	elementRef;
+	grid;
+	sectionTabsDisplayResponsiveGridEnabled = true;
+	initialized = false;
+	resizeObserver;
+	mutationObserver;
+	constructor(elementRef) {
+		this.elementRef = elementRef;
+	}
+	ngAfterViewInit() {
+		this.initialized = true;
+		this.refreshObserver();
+		this.applyLayout();
+	}
+	ngOnChanges(_changes) {
+		if (!this.initialized) return;
+		this.refreshObserver();
+		this.applyLayout();
+	}
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect();
+		this.mutationObserver?.disconnect();
+	}
+	refreshObserver() {
+		this.resizeObserver?.disconnect();
+		this.mutationObserver?.disconnect();
+		this.resizeObserver = void 0;
+		this.mutationObserver = void 0;
+		if (!this.sectionTabsDisplayResponsiveGridEnabled) return;
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizeObserver = new ResizeObserver(() => this.applyLayout());
+			this.resizeObserver.observe(this.elementRef.nativeElement);
+		}
+		if (typeof MutationObserver !== "undefined") {
+			this.mutationObserver = new MutationObserver(() => this.applyLayout());
+			this.observeMutations();
+		}
+	}
+	observeMutations() {
+		this.mutationObserver?.observe(this.elementRef.nativeElement, { childList: true });
+	}
+	applyLayout() {
+		const element = this.elementRef.nativeElement;
+		const configuredColumns = this.normalizePositiveInteger(this.grid?.columns, 1);
+		if (!this.sectionTabsDisplayResponsiveGridEnabled) {
+			element.style.removeProperty("--section-tabs-display-grid-effective-columns");
+			this.restoreConfiguredSpans(configuredColumns);
+			return;
+		}
+		const availableWidth = this.getContentWidth(element);
+		if (availableWidth <= 0) return;
+		const gap = this.getGap(element);
+		const minColumnWidth = this.measureCssLength(this.grid?.minColumnWidth || "0px", element);
+		const effectiveColumns = this.resolveEffectiveColumns(configuredColumns, availableWidth, gap, minColumnWidth);
+		element.style.setProperty("--section-tabs-display-grid-effective-columns", `${effectiveColumns}`);
+		this.applyResponsiveSpans(effectiveColumns);
+	}
+	applyResponsiveSpans(columns) {
+		const rows = [];
+		let currentRow = [];
+		let occupiedColumns = 0;
+		const flushRow = () => {
+			if (!currentRow.length) return;
+			rows.push(currentRow);
+			currentRow = [];
+			occupiedColumns = 0;
+		};
+		for (const child of Array.from(this.elementRef.nativeElement.children)) {
+			if (!(child instanceof HTMLElement)) continue;
+			if (child.classList.contains("section-tabs-display__grid-break")) {
+				flushRow();
+				continue;
+			}
+			const originalSpan = this.readOriginalSpan(child, columns);
+			const span = Math.min(originalSpan, columns);
+			if (occupiedColumns > 0 && occupiedColumns + span > columns) {
+				flushRow();
+				rows.push([{
+					element: child,
+					span: columns
+				}]);
+				continue;
+			}
+			currentRow.push({
+				element: child,
+				span
+			});
+			occupiedColumns += span;
+			if (occupiedColumns === columns) flushRow();
+		}
+		flushRow();
+		for (const row of rows) {
+			const singleItem = row.length === 1 ? row[0] : void 0;
+			if (singleItem && singleItem.span < columns) singleItem.span = columns;
+			row.forEach((item) => item.element.style.setProperty("grid-column", `span ${item.span}`));
+		}
+	}
+	restoreConfiguredSpans(columns) {
+		for (const child of Array.from(this.elementRef.nativeElement.children)) {
+			if (!(child instanceof HTMLElement) || child.classList.contains("section-tabs-display__grid-break")) continue;
+			child.style.setProperty("grid-column", `span ${this.readOriginalSpan(child, columns)}`);
+		}
+	}
+	readOriginalSpan(element, columns) {
+		const value = element.style.getPropertyValue("--section-tabs-display-item-col-span");
+		return Math.min(this.normalizePositiveInteger(Number(value), 1), columns);
+	}
+	resolveEffectiveColumns(configuredColumns, availableWidth, gap, minColumnWidth) {
+		if (configuredColumns <= 1 || minColumnWidth <= 0) return configuredColumns;
+		const fittingColumns = Math.floor((availableWidth + gap) / (minColumnWidth + gap));
+		return Math.max(1, Math.min(configuredColumns, fittingColumns));
+	}
+	getContentWidth(element) {
+		const styles = getComputedStyle(element);
+		const horizontalPadding = this.parsePixelValue(styles.paddingLeft) + this.parsePixelValue(styles.paddingRight);
+		return Math.max(0, element.clientWidth - horizontalPadding);
+	}
+	getGap(element) {
+		const styles = getComputedStyle(element);
+		return this.parsePixelValue(styles.columnGap === "normal" ? "0px" : styles.columnGap);
+	}
+	measureCssLength(value, element) {
+		if (!value || value === "0" || value === "0px") return 0;
+		this.mutationObserver?.disconnect();
+		const probe = element.ownerDocument.createElement("div");
+		probe.style.position = "absolute";
+		probe.style.visibility = "hidden";
+		probe.style.pointerEvents = "none";
+		probe.style.width = value;
+		probe.style.height = "0";
+		element.appendChild(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		this.observeMutations();
+		return width;
+	}
+	parsePixelValue(value) {
+		const parsed = Number.parseFloat(value);
+		return Number.isFinite(parsed) ? parsed : 0;
+	}
+	normalizePositiveInteger(value, fallback) {
+		if (!Number.isFinite(value) || Number(value) <= 0) return fallback;
+		return Math.max(1, Math.floor(Number(value)));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsDisplayResponsiveGridDirective,
+		deps: [{ token: i0.ElementRef }],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SectionTabsDisplayResponsiveGridDirective,
+		isStandalone: false,
+		selector: "[appSectionTabsDisplayResponsiveGrid]",
+		inputs: {
+			grid: ["appSectionTabsDisplayResponsiveGrid", "grid"],
+			sectionTabsDisplayResponsiveGridEnabled: "sectionTabsDisplayResponsiveGridEnabled"
+		},
+		usesOnChanges: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsDisplayResponsiveGridDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[appSectionTabsDisplayResponsiveGrid]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }],
+	propDecorators: {
+		grid: [{
+			type: Input,
+			args: ["appSectionTabsDisplayResponsiveGrid"]
+		}],
+		sectionTabsDisplayResponsiveGridEnabled: [{ type: Input }]
+	}
+});
+var SectionTabsDisplayComponent = class SectionTabsDisplayComponent {
+	locale;
+	intl;
+	componentInputNamesByType = /* @__PURE__ */ new WeakMap();
+	pickDeclaredComponentInputs(component, inputs) {
+		if (!component || !inputs) return {};
+		const declaredInputNames = this.getDeclaredComponentInputNames(component);
+		if (!declaredInputNames.size) return {};
+		return Object.entries(inputs).reduce((filteredInputs, [name, value]) => {
+			if (declaredInputNames.has(name)) filteredInputs[name] = value;
+			return filteredInputs;
+		}, {});
+	}
+	getDeclaredComponentInputNames(component) {
+		const cachedInputNames = this.componentInputNamesByType.get(component);
+		if (cachedInputNames) return cachedInputNames;
+		const componentMirror = reflectComponentType(component);
+		const inputNames = new Set(componentMirror?.inputs.map((input) => input.templateName) ?? []);
+		this.componentInputNamesByType.set(component, inputNames);
+		return inputNames;
+	}
+	options;
+	selectedIndex = 0;
+	queryParamKey;
+	menuHeader;
+	showEmptyFields;
+	selectedIndexChange = new EventEmitter();
+	showEmptyFieldsChange = new EventEmitter();
+	viewModel = {
+		sections: [],
+		empty: true
+	};
+	showEmptyFieldsState = false;
+	showEmptyFieldsToggle = false;
+	showEmptyFieldsLabel = "";
+	emptyFieldsStateInitialized = false;
+	lastOptionShowEmptyFields;
+	constructor(locale, intl, changeDetector, destroyRef) {
+		this.locale = locale;
+		this.intl = intl;
+		this.intl.changes.pipe(takeUntilDestroyed(destroyRef)).subscribe(() => {
+			this.syncEmptyFieldsLabel();
+			changeDetector.markForCheck();
+		});
+	}
+	ngOnChanges() {
+		this.syncEmptyFieldsOptions();
+		this.viewModel = this.buildViewModel();
+	}
+	onSelectedIndexChange(index) {
+		this.selectedIndex = index;
+		this.selectedIndexChange.emit(index);
+	}
+	onShowEmptyFieldsChange(checked) {
+		this.showEmptyFieldsState = checked;
+		this.showEmptyFieldsChange.emit(checked);
+		this.viewModel = this.buildViewModel();
+	}
+	onClickFieldItem(fieldItem) {
+		if (typeof fieldItem.onClick === "function") fieldItem.onClick(fieldItem.value);
+	}
+	syncEmptyFieldsLabel() {
+		this.showEmptyFieldsLabel = this.options?.showEmptyFieldsLabel ?? this.intl.messages.showEmptyFields;
+	}
+	syncEmptyFieldsOptions() {
+		this.syncEmptyFieldsLabel();
+		this.showEmptyFieldsToggle = this.options?.showEmptyFieldsToggle ?? false;
+		const optionShowEmptyFields = this.options?.showEmptyFields;
+		if (this.showEmptyFields !== void 0) {
+			this.showEmptyFieldsState = this.showEmptyFields;
+			this.emptyFieldsStateInitialized = true;
+			this.lastOptionShowEmptyFields = optionShowEmptyFields;
+			return;
+		}
+		if (!this.emptyFieldsStateInitialized || optionShowEmptyFields !== this.lastOptionShowEmptyFields) {
+			this.showEmptyFieldsState = optionShowEmptyFields ?? false;
+			this.emptyFieldsStateInitialized = true;
+			this.lastOptionShowEmptyFields = optionShowEmptyFields;
+		}
+	}
+	buildViewModel() {
+		const renderSections = (this.options?.sections ?? []).filter((section) => this.isVisible(section.visible)).map((section) => this.buildSection(section));
+		return {
+			sections: renderSections,
+			empty: renderSections.length === 0
+		};
+	}
+	buildSection(section) {
+		const cardBuildResult = this.buildCardItems(section);
+		const completion = this.resolveCompletion(section.completion, () => {
+			return this.calculateSectionCompletion(cardBuildResult.cards);
+		});
+		const preserveRows = this.hasRowSpan(section.cards);
+		return {
+			id: section.id,
+			queryParamValue: section.queryParamValue ?? section.id,
+			source: section,
+			responsiveGrid: !preserveRows,
+			label: section.label,
+			icon: section.icon,
+			tooltip: section.tooltip,
+			sectionMode: section.sectionMode ?? "default",
+			cardCount: cardBuildResult.cards.length,
+			gridStyles: this.buildGridStyles(section.grid, preserveRows),
+			items: cardBuildResult.items,
+			done: completion.done,
+			total: completion.total
+		};
+	}
+	buildCardItems(section) {
+		const cards = [];
+		return {
+			items: (section.cards ?? []).flatMap((card, index) => {
+				if (!this.isVisible(card.visible)) return [];
+				const cardItems = [];
+				const renderCard = this.buildCard(card, section);
+				cards.push(renderCard);
+				if (card.layout?.breakBefore) cardItems.push({
+					id: `${card.id || index}-before`,
+					type: "break"
+				});
+				cardItems.push(renderCard);
+				if (card.layout?.breakAfter) cardItems.push({
+					id: `${card.id || index}-after`,
+					type: "break"
+				});
+				return cardItems;
+			}),
+			cards
+		};
+	}
+	buildCard(card, section) {
+		const kind = this.getCardKind(card);
+		const renderFields = kind === "fields" ? this.buildFields(section, card) : [];
+		const completion = this.resolveCompletion(card.completion, () => {
+			return this.calculateFieldsCompletion(renderFields);
+		});
+		const preserveRows = this.hasRowSpan(card.fields);
+		return {
+			actions: card.actions,
+			id: card.id,
+			type: "card",
+			source: card,
+			responsiveGrid: !preserveRows,
+			label: card.label,
+			icon: card.icon,
+			tooltip: card.tooltip,
+			kind,
+			component: card.component,
+			componentInputs: this.pickDeclaredComponentInputs(card.component, kind === "component" ? this.buildCardComponentInputs(section, card) : void 0),
+			gridStyles: this.buildGridStyles(card.grid, preserveRows),
+			styles: this.buildLayoutStyles(card.layout, section.grid),
+			classes: this.buildLayoutClasses(card.layout),
+			items: this.buildVisibleFieldItems(renderFields),
+			completion
+		};
+	}
+	buildFields(section, card) {
+		return (card.fields ?? []).flatMap((field, index) => {
+			if (!this.isVisible(field.visible)) return [];
+			const fieldId = this.buildFieldId(card, field, index);
+			return [this.buildField(fieldId, section, card, field)];
+		});
+	}
+	buildVisibleFieldItems(fields) {
+		return fields.flatMap((field) => {
+			if (!this.shouldRenderField(field)) return [];
+			const items = [];
+			if (field.source.layout?.breakBefore) items.push({
+				id: `${field.id}-before`,
+				type: "break"
+			});
+			items.push(field);
+			if (field.source.layout?.breakAfter) items.push({
+				id: `${field.id}-after`,
+				type: "break"
+			});
+			return items;
+		});
+	}
+	buildField(id, section, card, field) {
+		const value = this.getPathValue(this.options?.data, field.path);
+		const selectOption = field.kind === "select" ? this.findSelectOption(value, field.options) : void 0;
+		const color = field.color ?? selectOption?.color;
+		const filled = this.isFilled(value);
+		const displayValue = this.formatFieldValue(field, value, selectOption);
+		const chipsValue = field.kind === "chips" ? this.buildChipViewModels(field, value) : [];
+		const componentInputs = this.pickDeclaredComponentInputs(field.component, this.buildFieldComponentInputs(section, card, field, value));
+		return {
+			id,
+			type: "field",
+			source: field,
+			label: field.label,
+			labelAction: field.labelAction,
+			kind: field.kind,
+			value,
+			filled,
+			displayValue,
+			chipsValue,
+			color,
+			suffix: field.kind === "text" ? field.suffix : void 0,
+			component: field.component,
+			componentInputs,
+			styles: this.buildLayoutStyles(field.layout, card.grid),
+			classes: {
+				...this.buildLayoutClasses(field.layout),
+				"section-tabs-display__field-cell--empty": !filled
+			},
+			onClick: field.onClick
+		};
+	}
+	buildFieldComponentInputs(section, card, field, value) {
+		const context = {
+			data: this.options?.data,
+			value,
+			field,
+			card,
+			section,
+			options: this.options
+		};
+		return {
+			data: context.data,
+			record: context.data,
+			value: context.value,
+			field: context.field,
+			card: context.card,
+			section: context.section,
+			options: context.options,
+			...field.componentInputs ?? {}
+		};
+	}
+	buildCardComponentInputs(section, card) {
+		const value = this.getPathValue(this.options?.data, card.path ?? "");
+		const context = {
+			data: this.options?.data,
+			value,
+			card,
+			section,
+			options: this.options
+		};
+		return {
+			data: context.data,
+			record: context.data,
+			value: context.value,
+			card: context.card,
+			section: context.section,
+			options: context.options,
+			...card.componentInputs ?? {}
+		};
+	}
+	buildFieldId(card, field, index) {
+		return `${card.id}-${field.path || field.label || index}-${index}`;
+	}
+	buildGridStyles(grid, preserveRows = false) {
+		const columns = this.normalizePositiveInteger(grid?.columns, 1);
+		const minColumnWidth = grid?.minColumnWidth || "0px";
+		return {
+			"--section-tabs-display-grid-columns": `${columns}`,
+			"--section-tabs-display-grid-gap": grid?.gap || "12px",
+			"--section-tabs-display-grid-min-column-width": minColumnWidth,
+			"--section-tabs-display-grid-track-min-column-width": preserveRows ? minColumnWidth : "0px"
+		};
+	}
+	buildLayoutStyles(layout, grid) {
+		const styles = { ...layout?.styles ?? {} };
+		const columns = this.normalizePositiveInteger(grid?.columns, 1);
+		const colSpan = Math.min(this.normalizePositiveInteger(layout?.colSpan, 1), columns);
+		const rowSpan = this.normalizePositiveInteger(layout?.rowSpan);
+		styles["--section-tabs-display-item-col-span"] = `${colSpan}`;
+		styles["grid-column"] = `span ${colSpan}`;
+		if (rowSpan) styles["grid-row"] = `span ${rowSpan}`;
+		return styles;
+	}
+	hasRowSpan(items) {
+		return (items ?? []).some((item) => this.normalizePositiveInteger(item.layout?.rowSpan, 1) > 1);
+	}
+	buildLayoutClasses(layout) {
+		const classes = { "section-tabs-display__item--break-before": !!layout?.breakBefore };
+		if (layout?.classes) layout.classes.split(" ").forEach((c) => classes[c] = true);
+		return classes;
+	}
+	resolveCompletion(source, fallbackFactory) {
+		if (source === false || source?.disabled) return { enabled: false };
+		const fallback = fallbackFactory();
+		const doneOverride = this.resolveExplicitCounter(source?.done, source?.donePath);
+		const totalOverride = this.resolveExplicitCounter(source?.total, source?.totalPath);
+		if (!(this.hasCounterValue(doneOverride) || this.hasCounterValue(totalOverride)) && fallback.total <= 0) return { enabled: false };
+		const done = this.hasCounterValue(doneOverride) ? doneOverride : fallback.done;
+		const total = this.hasCounterValue(totalOverride) ? totalOverride : fallback.total;
+		const enabled = this.hasCounterValue(done) || this.hasCounterValue(total);
+		return {
+			enabled,
+			done: enabled ? done : void 0,
+			total: enabled ? total : void 0,
+			label: enabled ? this.buildCompletionLabel(done, total) : void 0
+		};
+	}
+	calculateFieldsCompletion(fields) {
+		return fields.reduce((completion, field) => {
+			completion.total += 1;
+			if (field.filled) completion.done += 1;
+			return completion;
+		}, {
+			done: 0,
+			total: 0
+		});
+	}
+	calculateSectionCompletion(cards) {
+		return cards.reduce((completion, card) => {
+			if (!card.completion.enabled) return completion;
+			if (typeof card.completion.done === "number") completion.done += card.completion.done;
+			if (typeof card.completion.total === "number") completion.total += card.completion.total;
+			return completion;
+		}, {
+			done: 0,
+			total: 0
+		});
+	}
+	resolveExplicitCounter(value, path) {
+		if (this.hasCounterValue(value)) return value;
+		if (path) return this.getPathValue(this.options?.data, path);
+	}
+	buildCompletionLabel(done, total) {
+		if (!this.hasCounterValue(done)) return void 0;
+		if (!this.hasCounterValue(total)) return `${done}`;
+		return `${done}/${total}`;
+	}
+	hasCounterValue(value) {
+		return value !== null && value !== void 0 && value !== "";
+	}
+	isVisible(predicate) {
+		return predicate ? predicate(this.options?.data) : true;
+	}
+	shouldRenderField(field) {
+		if (this.showEmptyFieldsState) return true;
+		if (field.kind === "component") return true;
+		return field.filled;
+	}
+	getCardKind(card) {
+		return card.kind ?? (card.component ? "component" : "fields");
+	}
+	formatFieldValue(field, value, selectOption) {
+		if (!this.isFilled(value)) return "—";
+		if (field.kind === "text" && !field.suffix && this.isSafeHtmlValue(value)) return value;
+		switch (field.kind) {
+			case "number": return this.formatNumberValue(value, field);
+			case "date": return this.formatDateValue(value, field.dateFormat);
+			case "select": return selectOption?.label ?? this.formatUnknownValue(value);
+			default: return this.formatTextValue(value, field.suffix);
+		}
+	}
+	formatTextValue(value, suffix) {
+		const displayValue = this.formatUnknownValue(value);
+		return suffix ? `${displayValue}${suffix}` : displayValue;
+	}
+	formatNumberValue(value, field) {
+		const numberValue = Number(value);
+		if (!Number.isFinite(numberValue)) return this.formatUnknownValue(value);
+		const formattedValue = new Intl.NumberFormat(this.locale, {
+			minimumFractionDigits: field.decimal,
+			maximumFractionDigits: field.decimal
+		}).format(numberValue);
+		return field.unit ? `${formattedValue} ${field.unit}` : formattedValue;
+	}
+	formatDateValue(value, dateFormat) {
+		try {
+			return formatDate(value, dateFormat || "dd/MM/yyyy", this.locale);
+		} catch {
+			return this.formatUnknownValue(value);
+		}
+	}
+	buildChipViewModels(field, value) {
+		return this.normalizeChipItems(value).map((item, index) => {
+			return {
+				label: this.resolveChipLabel(item, field.chips),
+				trackValue: this.resolveChipTrackValue(item, field.chips, index),
+				icon: field.chips?.icon,
+				color: this.resolveChipColor(item, field.chips)
+			};
+		}).filter((chip) => !!chip.label);
+	}
+	normalizeChipItems(value) {
+		if (!this.isFilled(value)) return [];
+		return Array.isArray(value) ? value : [value];
+	}
+	resolveChipLabel(item, chips) {
+		if (chips?.labelPath) return this.formatOptionalValue(this.getPathValue(item, chips.labelPath));
+		if (this.isPrimitiveValue(item)) return this.formatOptionalValue(item);
+		return this.formatOptionalValue(this.getPathValue(item, "label") ?? this.getPathValue(item, "name") ?? this.getPathValue(item, "title") ?? this.getPathValue(item, "displayName") ?? this.getPathValue(item, "fullname") ?? this.getPathValue(item, "_id") ?? this.getPathValue(item, "id"));
+	}
+	resolveChipTrackValue(item, chips, index) {
+		if (chips?.trackByPath) return this.getPathValue(item, chips.trackByPath) ?? index;
+		if (this.isPrimitiveValue(item)) return item ?? index;
+		return this.getPathValue(item, "_id") ?? this.getPathValue(item, "id") ?? this.resolveChipLabel(item, chips) ?? index;
+	}
+	resolveChipColor(item, chips) {
+		if (chips?.colorPath) return this.formatOptionalValue(this.getPathValue(item, chips.colorPath)) || void 0;
+		return chips?.color;
+	}
+	formatOptionalValue(value) {
+		if (value === null || value === void 0 || value === "") return "";
+		return `${value}`;
+	}
+	isSafeHtmlValue(value) {
+		return typeof value === "object" && value !== null && Object.prototype.hasOwnProperty.call(value, "changingThisBreaksApplicationSecurity");
+	}
+	formatUnknownValue(value) {
+		if (Array.isArray(value)) return value.map((item) => this.formatUnknownValue(item)).join(", ");
+		if (typeof value === "object" && value !== null) return JSON.stringify(value);
+		return `${value}`;
+	}
+	findSelectOption(value, options) {
+		return options?.find((option) => this.areValuesEqual(option.value, value));
+	}
+	areValuesEqual(first, second) {
+		if (first === second) return true;
+		if (this.isPrimitiveValue(first) || this.isPrimitiveValue(second)) return false;
+		try {
+			return JSON.stringify(first) === JSON.stringify(second);
+		} catch {
+			return false;
+		}
+	}
+	getPathValue(data, path) {
+		if (!path) return data;
+		return this.parsePath(path).reduce((current, pathPart) => {
+			if (current === null || current === void 0) return void 0;
+			return current[pathPart];
+		}, data);
+	}
+	parsePath(path) {
+		return path.replace(/\[(\d+|"[^"]+"|'[^']+')\]/g, (_match, value) => `.${value.replace(/["']/g, "")}`).split(".").filter((pathPart) => !!pathPart);
+	}
+	normalizePositiveInteger(value, fallback) {
+		const numberValue = Number(value ?? fallback);
+		if (!Number.isFinite(numberValue) || numberValue <= 0) return fallback;
+		return Math.floor(numberValue);
+	}
+	isFilled(value) {
+		if (value === null || value === void 0 || value === "") return false;
+		if (Array.isArray(value)) return value.length > 0;
+		return true;
+	}
+	isPrimitiveValue(value) {
+		return value === null || typeof value !== "object" && typeof value !== "function";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsDisplayComponent,
+		deps: [
+			{ token: LOCALE_ID },
+			{ token: SectionTabsIntl },
+			{ token: i0.ChangeDetectorRef },
+			{ token: i0.DestroyRef }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: SectionTabsDisplayComponent,
+		isStandalone: false,
+		selector: "app-section-tabs-display",
+		inputs: {
+			options: "options",
+			selectedIndex: "selectedIndex",
+			queryParamKey: "queryParamKey",
+			menuHeader: "menuHeader",
+			showEmptyFields: "showEmptyFields"
+		},
+		outputs: {
+			selectedIndexChange: "selectedIndexChange",
+			showEmptyFieldsChange: "showEmptyFieldsChange"
+		},
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<!-- @format -->\n\n@if (viewModel.empty) {\n  <div class=\"section-tabs-display__empty\">\n    <strong>{{ intl.messages.emptySections }}</strong>\n  </div>\n} @else {\n  <app-section-tabs\n    class=\"section-tabs-display\"\n    [selectedIndex]=\"selectedIndex\"\n    [queryParamKey]=\"queryParamKey\"\n    (selectedIndexChange)=\"onSelectedIndexChange($event)\">\n    @if (menuHeader) {\n      <ng-template appSectionTabsMenuHeader>\n        <div class=\"section-tabs-display__menu-header\">\n          <span>{{ menuHeader }}</span>\n        </div>\n      </ng-template>\n    }\n\n    @if (showEmptyFieldsToggle) {\n      <ng-template appSectionTabsFooter>\n        <mat-slide-toggle [checked]=\"showEmptyFieldsState\" (change)=\"onShowEmptyFieldsChange($event.checked)\">\n          <span [innerHTML]=\"showEmptyFieldsLabel\"></span>\n        </mat-slide-toggle>\n      </ng-template>\n    }\n\n    @for (section of viewModel.sections; track section.id) {\n      <app-section-tab [done]=\"section.done\" [total]=\"section.total\" [queryParamValue]=\"section.queryParamValue\">\n        <ng-template appSectionTabLabel>\n          @if (section.icon) {\n            <mat-icon [attr.title]=\"section.tooltip\">{{ section.icon }}</mat-icon>\n          }\n          <span [attr.title]=\"section.tooltip\" [innerHTML]=\"section.label\"></span>\n        </ng-template>\n\n        <ng-template appSectionTabContent>\n          <div\n            class=\"section-tabs-display__section\"\n            [class.section-tabs-display__section--single-card]=\"section.sectionMode === 'single-card'\"\n            [class.section-tabs-display__section--single-card-only]=\"\n              section.sectionMode === 'single-card' && section.cardCount === 1\n            \"\n            [class.section-tabs-display__section--single-card-multiple]=\"\n              section.sectionMode === 'single-card' && section.cardCount > 1\n            \"\n            [ngStyle]=\"section.gridStyles\"\n            [appSectionTabsDisplayResponsiveGrid]=\"section.source.grid\"\n            [sectionTabsDisplayResponsiveGridEnabled]=\"section.responsiveGrid\">\n            @for (cardItem of section.items; track cardItem.id) {\n              @if (cardItem.type === 'break') {\n                <div class=\"section-tabs-display__grid-break\" aria-hidden=\"true\"></div>\n              } @else {\n                <article\n                  class=\"section-tabs-display__card section-tabs-card\"\n                  [ngClass]=\"cardItem.classes\"\n                  [ngStyle]=\"cardItem.styles\">\n                  <header class=\"section-tabs-display__card-header card-header\">\n                    <div class=\"section-tabs-display__card-title\">\n                      @if (cardItem.icon) {\n                        <mat-icon [attr.title]=\"cardItem.tooltip\">{{ cardItem.icon }}</mat-icon>\n                      }\n                      <h3 [attr.title]=\"cardItem.tooltip\" [innerHTML]=\"cardItem.label\"></h3>\n                    </div>\n\n                    @if (cardItem.completion.label) {\n                      <span class=\"section-tabs-display__completion-chip mini-chip\">{{\n                        cardItem.completion.label\n                      }}</span>\n                    }\n\n                    @if (cardItem.actions?.length) {\n                      <div class=\"section-tabs-display__card-actions\">\n                        @for (action of cardItem.actions; track action.id || action.label || action.icon || $index) {\n                          @if (action.menuOptions?.length) {\n                            @if (action.type === 'button') {\n                              <button\n                                mat-button\n                                type=\"button\"\n                                class=\"section-tabs-display__card-action\"\n                                [style.--action-color]=\"action.color\"\n                                [disabled]=\"action.disabled\"\n                                [matTooltip]=\"action.tooltip || ''\"\n                                [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                                [matMenuTriggerFor]=\"displayCardActionMenu\">\n                                @if (action.icon) {\n                                  <mat-icon>{{ action.icon }}</mat-icon>\n                                }\n                                <span>{{ action.label }}</span>\n                              </button>\n                            } @else {\n                              <button\n                                mat-icon-button\n                                type=\"button\"\n                                class=\"section-tabs-display__card-action\"\n                                [style.--action-color]=\"action.color\"\n                                [disabled]=\"action.disabled\"\n                                [matTooltip]=\"action.tooltip || ''\"\n                                [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                                [matMenuTriggerFor]=\"displayCardActionMenu\">\n                                <mat-icon>{{ action.icon || 'more_vert' }}</mat-icon>\n                              </button>\n                            }\n\n                            <mat-menu #displayCardActionMenu=\"matMenu\">\n                              @for (option of action.menuOptions; track option.id) {\n                                <button\n                                  mat-menu-item\n                                  type=\"button\"\n                                  [disabled]=\"option.disabled\"\n                                  [matTooltip]=\"option.tooltip || ''\"\n                                  [attr.aria-label]=\"option.ariaLabel || option.label\"\n                                  (click)=\"option.handle()\">\n                                  @if (option.icon) {\n                                    <mat-icon>{{ option.icon }}</mat-icon>\n                                  }\n                                  <span>{{ option.label }}</span>\n                                </button>\n                              }\n                            </mat-menu>\n                          } @else if (action.type === 'button') {\n                            <button\n                              mat-button\n                              type=\"button\"\n                              class=\"section-tabs-display__card-action\"\n                              [style.--action-color]=\"action.color\"\n                              [disabled]=\"action.disabled\"\n                              [matTooltip]=\"action.tooltip || ''\"\n                              [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                              (click)=\"action.handle()\">\n                              @if (action.icon) {\n                                <mat-icon>{{ action.icon }}</mat-icon>\n                              }\n                              <span>{{ action.label }}</span>\n                            </button>\n                          } @else {\n                            <button\n                              mat-icon-button\n                              type=\"button\"\n                              class=\"section-tabs-display__card-action\"\n                              [style.--action-color]=\"action.color\"\n                              [disabled]=\"action.disabled\"\n                              [matTooltip]=\"action.tooltip || ''\"\n                              [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                              (click)=\"action.handle()\">\n                              <mat-icon>{{ action.icon }}</mat-icon>\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                  </header>\n\n                  @if (cardItem.kind === 'component') {\n                    <div class=\"section-tabs-display__component-card\">\n                      @if (cardItem.component) {\n                        <ng-container\n                          *ngComponentOutlet=\"cardItem.component; inputs: cardItem.componentInputs\"></ng-container>\n                      } @else {\n                        <div class=\"section-tabs-display__empty-state empty-state\">\n                          <mat-icon aria-hidden=\"true\">extension_off</mat-icon>\n                          <div>\n                            <strong>{{ intl.messages.emptyComponents }}</strong>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"section-tabs-display__field-grid\"\n                      [ngStyle]=\"cardItem.gridStyles\"\n                      [appSectionTabsDisplayResponsiveGrid]=\"cardItem.source.grid\"\n                      [sectionTabsDisplayResponsiveGridEnabled]=\"cardItem.responsiveGrid\">\n                      @for (fieldItem of cardItem.items; track fieldItem.id) {\n                        @if (fieldItem.type === 'break') {\n                          <div class=\"section-tabs-display__grid-break\" aria-hidden=\"true\"></div>\n                        } @else {\n                          <div\n                            class=\"section-tabs-display__field-cell field-cell\"\n                            [ngClass]=\"fieldItem.classes\"\n                            [ngStyle]=\"fieldItem.styles\"\n                            [class.has-click]=\"!!fieldItem.onClick\"\n                            matRipple\n                            [matRippleDisabled]=\"!fieldItem.onClick\"\n                            (click)=\"onClickFieldItem(fieldItem)\">\n                            @if (fieldItem.kind === 'component') {\n                              @if (fieldItem.component) {\n                                <ng-container\n                                  *ngComponentOutlet=\"\n                                    fieldItem.component;\n                                    inputs: fieldItem.componentInputs\n                                  \"></ng-container>\n                              }\n                            } @else {\n                              <span class=\"section-tabs-display__field-label-row\">\n                                <span\n                                  class=\"section-tabs-display__field-label field-label\"\n                                  [innerHTML]=\"fieldItem.label\"></span>\n                                @if (fieldItem.labelAction; as action) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"section-tabs-display__field-label-action\"\n                                    data-field-label-action\n                                    [disabled]=\"action.disabled\"\n                                    [attr.aria-label]=\"action.ariaLabel\"\n                                    [attr.aria-pressed]=\"action.active\"\n                                    (click)=\"action.onClick(); $event.stopPropagation()\">\n                                    {{ action.active ? '★' : '☆' }}\n                                  </button>\n                                }\n                              </span>\n\n                              @if (fieldItem.kind === 'chips') {\n                                <div class=\"section-tabs-display__chips\">\n                                  @for (chip of fieldItem.chipsValue; track chip.trackValue) {\n                                    <span class=\"section-tabs-display__chip\" [style.color]=\"chip.color\">\n                                      @if (chip.icon) {\n                                        <mat-icon aria-hidden=\"true\">{{ chip.icon }}</mat-icon>\n                                      }\n                                      <span [innerHTML]=\"chip.label\"></span>\n                                    </span>\n                                  } @empty {\n                                    <span class=\"section-tabs-display__field-value field-value\">—</span>\n                                  }\n                                </div>\n                              } @else {\n                                <span\n                                  class=\"section-tabs-display__field-value field-value\"\n                                  [style.color]=\"fieldItem.color\"\n                                  [innerHTML]=\"fieldItem.displayValue\">\n                                </span>\n                              }\n                            }\n                          </div>\n                        }\n                      <!-- } @empty {\n                        <div class=\"section-tabs-display__empty-state empty-state\">\n                          <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                          <div>\n                            <strong>{{ intl.messages.emptyFields }}</strong>\n                            <span>{{ intl.messages.emptyFieldsDescription }}</span>\n                          </div>\n                        </div> -->\n                      }\n                    </div>\n                  }\n                </article>\n              }\n            }\n          </div>\n        </ng-template>\n      </app-section-tab>\n    }\n  </app-section-tabs>\n}\n",
+		styles: [".section-tabs-display__field-label-row{display:inline-flex;align-items:center;gap:4px}.section-tabs-display__field-label-action{border:0;background:transparent;color:#bb8b14;cursor:pointer;font-size:1.1rem;line-height:1;padding:0}.section-tabs-display__field-label-action:disabled{cursor:default;opacity:.6}app-section-tabs-display{display:block;height:100%;min-width:0;min-height:0}.section-tabs-display{display:block;height:100%;min-width:0;min-height:0}.section-tabs-display__empty{height:100%;min-height:160px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed #cbd5df;border-radius:8px;background:#f8fafc;color:#607286}.section-tabs-display__section{display:grid;grid-template-columns:repeat(var(--section-tabs-display-grid-effective-columns, var(--section-tabs-display-grid-columns, 1)),minmax(var(--section-tabs-display-grid-track-min-column-width, 0px),1fr));gap:var(--section-tabs-display-grid-gap, 12px);align-items:start;align-content:start;grid-auto-flow:row;grid-auto-rows:max-content;flex:0 0 auto;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:8px 8px 8px 0}.section-tabs-display__section--single-card{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-auto-rows:100%;align-items:stretch;align-content:start}.section-tabs-display__section--single-card>.section-tabs-display__grid-break{display:none}.section-tabs-display__section--single-card>.section-tabs-display__card{grid-column:1/-1!important;grid-row:auto!important;height:100%!important;min-height:0}.section-tabs-display__section--single-card>.section-tabs-display__card>.section-tabs-display__component-card,.section-tabs-display__section--single-card>.section-tabs-display__card>.section-tabs-display__field-grid{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.section-tabs-display__section--single-card-only{overflow:hidden}.section-tabs-display__section--single-card-multiple{overflow:visible}.section-tabs-display__card{min-width:0;max-width:100%;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border:1px solid #d9e0e7;border-radius:8px;background:#fff}.section-tabs-display__card-header{flex:0 0 auto}.section-tabs-display__card-title{min-width:0;display:flex;align-items:center;gap:10px}.section-tabs-display__card-title mat-icon,.section-tabs-display__card-title .mat-icon{flex:0 0 auto;color:#6b7280}.section-tabs-display__card-title h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__completion-chip{flex:0 0 auto}.section-tabs-display__component-card{min-width:0;min-height:0;height:100%}.section-tabs-display__field-grid{display:grid;grid-template-columns:repeat(var(--section-tabs-display-grid-effective-columns, var(--section-tabs-display-grid-columns, 1)),minmax(var(--section-tabs-display-grid-track-min-column-width, 0px),1fr));align-items:start;align-content:start;gap:var(--section-tabs-display-grid-gap, 0px);width:100%;max-width:100%;min-width:0}.section-tabs-display__section>.section-tabs-display__card,.section-tabs-display__field-grid>.section-tabs-display__field-cell{min-width:0;max-width:100%}.section-tabs-display__field-cell{min-width:0}.section-tabs-display__field-cell.has-click{cursor:pointer}.section-tabs-display__field-cell.has-click:hover{background-color:#0000000a}.section-tabs-display__field-cell--empty{opacity:.72}.section-tabs-display__field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__field-value{min-width:0;overflow-wrap:anywhere}.section-tabs-display__empty-state{grid-column:1/-1}.section-tabs-display__grid-break{grid-column:1/-1;width:100%;height:0;min-height:0;overflow:hidden}.section-tabs-display__item--break-before{grid-column-start:1}.section-tabs-display__chips{min-width:0;display:flex;flex-flow:row wrap;gap:8px}.section-tabs-display__chip{min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:var(--ngx-mat-section-tabs-display-background, #f3f6f9);color:var(--ngx-mat-section-tabs-display-primary, #123047);font-size:12px;font-weight:600;line-height:1.2}.section-tabs-display__chip mat-icon,.section-tabs-display__chip .mat-icon{flex:0 0 auto;--mat-icon-size: 16px}.section-tabs-display__chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__card-actions{display:inline-flex;align-items:center;gap:4px;margin-left:auto}.section-tabs-display__card-action{color:var(--action-color, inherit)}.section-tabs-display__card-action.mat-mdc-icon-button{padding:6px;--mat-icon-button-icon-size: 20px;--mat-icon-button-state-layer-size: 32px}.section-tabs-display__card-action.mat-mdc-icon-button mat-icon{--mat-icon-size: 20px}.section-tabs-display__card-action.mat-mdc-button{min-width:0;height:32px;padding:0 10px;font-size:.85rem;line-height:32px}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "component",
+				type: i3.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i3.MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i4.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "component",
+				type: i5.MatMenu,
+				selector: "mat-menu",
+				inputs: [
+					"backdropClass",
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"xPosition",
+					"yPosition",
+					"overlapTrigger",
+					"hasBackdrop",
+					"class",
+					"classList"
+				],
+				outputs: ["closed", "close"],
+				exportAs: ["matMenu"]
+			},
+			{
+				kind: "component",
+				type: i5.MatMenuItem,
+				selector: "[mat-menu-item]",
+				inputs: [
+					"role",
+					"disabled",
+					"disabledInteractive",
+					"disableRipple"
+				],
+				exportAs: ["matMenuItem"]
+			},
+			{
+				kind: "directive",
+				type: i5.MatMenuTrigger,
+				selector: "[mat-menu-trigger-for], [matMenuTriggerFor]",
+				inputs: [
+					"mat-menu-trigger-for",
+					"matMenuTriggerFor",
+					"matMenuTriggerData",
+					"matMenuTriggerRestoreFocus"
+				],
+				outputs: [
+					"menuOpened",
+					"onMenuOpen",
+					"menuClosed",
+					"onMenuClose"
+				],
+				exportAs: ["matMenuTrigger"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatRipple,
+				selector: "[mat-ripple], [matRipple]",
+				inputs: [
+					"matRippleColor",
+					"matRippleUnbounded",
+					"matRippleCentered",
+					"matRippleRadius",
+					"matRippleAnimation",
+					"matRippleDisabled",
+					"matRippleTrigger"
+				],
+				exportAs: ["matRipple"]
+			},
+			{
+				kind: "component",
+				type: i7.MatSlideToggle,
+				selector: "mat-slide-toggle",
+				inputs: [
+					"name",
+					"id",
+					"labelPosition",
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"required",
+					"color",
+					"disabled",
+					"fullWidth",
+					"disableRipple",
+					"tabIndex",
+					"checked",
+					"hideIcon",
+					"disabledInteractive"
+				],
+				outputs: ["change", "toggleChange"],
+				exportAs: ["matSlideToggle"]
+			},
+			{
+				kind: "directive",
+				type: i8.MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			},
+			{
+				kind: "component",
+				type: SectionTabsComponent,
+				selector: "app-section-tabs",
+				inputs: ["selectedIndex", "queryParamKey"],
+				outputs: ["selectedIndexChange"]
+			},
+			{
+				kind: "component",
+				type: SectionTabComponent,
+				selector: "app-section-tab",
+				inputs: [
+					"type",
+					"queryParamValue",
+					"disabled",
+					"done",
+					"total",
+					"totalMax",
+					"progress",
+					"statusColor",
+					"statusColorDone",
+					"statusColorTotal"
+				]
+			},
+			{
+				kind: "directive",
+				type: SectionTabLabelDirective,
+				selector: "ng-template[appSectionTabLabel]"
+			},
+			{
+				kind: "directive",
+				type: SectionTabContentDirective,
+				selector: "ng-template[appSectionTabContent]"
+			},
+			{
+				kind: "directive",
+				type: SectionTabsMenuHeaderDirective,
+				selector: "ng-template[appSectionTabsMenuHeader]"
+			},
+			{
+				kind: "directive",
+				type: SectionTabsFooterDirective,
+				selector: "ng-template[appSectionTabsFooter]"
+			},
+			{
+				kind: "directive",
+				type: SectionTabsDisplayResponsiveGridDirective,
+				selector: "[appSectionTabsDisplayResponsiveGrid]",
+				inputs: ["appSectionTabsDisplayResponsiveGrid", "sectionTabsDisplayResponsiveGridEnabled"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsDisplayComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-section-tabs-display",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false,
+			template: "<!-- @format -->\n\n@if (viewModel.empty) {\n  <div class=\"section-tabs-display__empty\">\n    <strong>{{ intl.messages.emptySections }}</strong>\n  </div>\n} @else {\n  <app-section-tabs\n    class=\"section-tabs-display\"\n    [selectedIndex]=\"selectedIndex\"\n    [queryParamKey]=\"queryParamKey\"\n    (selectedIndexChange)=\"onSelectedIndexChange($event)\">\n    @if (menuHeader) {\n      <ng-template appSectionTabsMenuHeader>\n        <div class=\"section-tabs-display__menu-header\">\n          <span>{{ menuHeader }}</span>\n        </div>\n      </ng-template>\n    }\n\n    @if (showEmptyFieldsToggle) {\n      <ng-template appSectionTabsFooter>\n        <mat-slide-toggle [checked]=\"showEmptyFieldsState\" (change)=\"onShowEmptyFieldsChange($event.checked)\">\n          <span [innerHTML]=\"showEmptyFieldsLabel\"></span>\n        </mat-slide-toggle>\n      </ng-template>\n    }\n\n    @for (section of viewModel.sections; track section.id) {\n      <app-section-tab [done]=\"section.done\" [total]=\"section.total\" [queryParamValue]=\"section.queryParamValue\">\n        <ng-template appSectionTabLabel>\n          @if (section.icon) {\n            <mat-icon [attr.title]=\"section.tooltip\">{{ section.icon }}</mat-icon>\n          }\n          <span [attr.title]=\"section.tooltip\" [innerHTML]=\"section.label\"></span>\n        </ng-template>\n\n        <ng-template appSectionTabContent>\n          <div\n            class=\"section-tabs-display__section\"\n            [class.section-tabs-display__section--single-card]=\"section.sectionMode === 'single-card'\"\n            [class.section-tabs-display__section--single-card-only]=\"\n              section.sectionMode === 'single-card' && section.cardCount === 1\n            \"\n            [class.section-tabs-display__section--single-card-multiple]=\"\n              section.sectionMode === 'single-card' && section.cardCount > 1\n            \"\n            [ngStyle]=\"section.gridStyles\"\n            [appSectionTabsDisplayResponsiveGrid]=\"section.source.grid\"\n            [sectionTabsDisplayResponsiveGridEnabled]=\"section.responsiveGrid\">\n            @for (cardItem of section.items; track cardItem.id) {\n              @if (cardItem.type === 'break') {\n                <div class=\"section-tabs-display__grid-break\" aria-hidden=\"true\"></div>\n              } @else {\n                <article\n                  class=\"section-tabs-display__card section-tabs-card\"\n                  [ngClass]=\"cardItem.classes\"\n                  [ngStyle]=\"cardItem.styles\">\n                  <header class=\"section-tabs-display__card-header card-header\">\n                    <div class=\"section-tabs-display__card-title\">\n                      @if (cardItem.icon) {\n                        <mat-icon [attr.title]=\"cardItem.tooltip\">{{ cardItem.icon }}</mat-icon>\n                      }\n                      <h3 [attr.title]=\"cardItem.tooltip\" [innerHTML]=\"cardItem.label\"></h3>\n                    </div>\n\n                    @if (cardItem.completion.label) {\n                      <span class=\"section-tabs-display__completion-chip mini-chip\">{{\n                        cardItem.completion.label\n                      }}</span>\n                    }\n\n                    @if (cardItem.actions?.length) {\n                      <div class=\"section-tabs-display__card-actions\">\n                        @for (action of cardItem.actions; track action.id || action.label || action.icon || $index) {\n                          @if (action.menuOptions?.length) {\n                            @if (action.type === 'button') {\n                              <button\n                                mat-button\n                                type=\"button\"\n                                class=\"section-tabs-display__card-action\"\n                                [style.--action-color]=\"action.color\"\n                                [disabled]=\"action.disabled\"\n                                [matTooltip]=\"action.tooltip || ''\"\n                                [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                                [matMenuTriggerFor]=\"displayCardActionMenu\">\n                                @if (action.icon) {\n                                  <mat-icon>{{ action.icon }}</mat-icon>\n                                }\n                                <span>{{ action.label }}</span>\n                              </button>\n                            } @else {\n                              <button\n                                mat-icon-button\n                                type=\"button\"\n                                class=\"section-tabs-display__card-action\"\n                                [style.--action-color]=\"action.color\"\n                                [disabled]=\"action.disabled\"\n                                [matTooltip]=\"action.tooltip || ''\"\n                                [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                                [matMenuTriggerFor]=\"displayCardActionMenu\">\n                                <mat-icon>{{ action.icon || 'more_vert' }}</mat-icon>\n                              </button>\n                            }\n\n                            <mat-menu #displayCardActionMenu=\"matMenu\">\n                              @for (option of action.menuOptions; track option.id) {\n                                <button\n                                  mat-menu-item\n                                  type=\"button\"\n                                  [disabled]=\"option.disabled\"\n                                  [matTooltip]=\"option.tooltip || ''\"\n                                  [attr.aria-label]=\"option.ariaLabel || option.label\"\n                                  (click)=\"option.handle()\">\n                                  @if (option.icon) {\n                                    <mat-icon>{{ option.icon }}</mat-icon>\n                                  }\n                                  <span>{{ option.label }}</span>\n                                </button>\n                              }\n                            </mat-menu>\n                          } @else if (action.type === 'button') {\n                            <button\n                              mat-button\n                              type=\"button\"\n                              class=\"section-tabs-display__card-action\"\n                              [style.--action-color]=\"action.color\"\n                              [disabled]=\"action.disabled\"\n                              [matTooltip]=\"action.tooltip || ''\"\n                              [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                              (click)=\"action.handle()\">\n                              @if (action.icon) {\n                                <mat-icon>{{ action.icon }}</mat-icon>\n                              }\n                              <span>{{ action.label }}</span>\n                            </button>\n                          } @else {\n                            <button\n                              mat-icon-button\n                              type=\"button\"\n                              class=\"section-tabs-display__card-action\"\n                              [style.--action-color]=\"action.color\"\n                              [disabled]=\"action.disabled\"\n                              [matTooltip]=\"action.tooltip || ''\"\n                              [attr.aria-label]=\"action.ariaLabel || action.label || action.icon\"\n                              (click)=\"action.handle()\">\n                              <mat-icon>{{ action.icon }}</mat-icon>\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                  </header>\n\n                  @if (cardItem.kind === 'component') {\n                    <div class=\"section-tabs-display__component-card\">\n                      @if (cardItem.component) {\n                        <ng-container\n                          *ngComponentOutlet=\"cardItem.component; inputs: cardItem.componentInputs\"></ng-container>\n                      } @else {\n                        <div class=\"section-tabs-display__empty-state empty-state\">\n                          <mat-icon aria-hidden=\"true\">extension_off</mat-icon>\n                          <div>\n                            <strong>{{ intl.messages.emptyComponents }}</strong>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"section-tabs-display__field-grid\"\n                      [ngStyle]=\"cardItem.gridStyles\"\n                      [appSectionTabsDisplayResponsiveGrid]=\"cardItem.source.grid\"\n                      [sectionTabsDisplayResponsiveGridEnabled]=\"cardItem.responsiveGrid\">\n                      @for (fieldItem of cardItem.items; track fieldItem.id) {\n                        @if (fieldItem.type === 'break') {\n                          <div class=\"section-tabs-display__grid-break\" aria-hidden=\"true\"></div>\n                        } @else {\n                          <div\n                            class=\"section-tabs-display__field-cell field-cell\"\n                            [ngClass]=\"fieldItem.classes\"\n                            [ngStyle]=\"fieldItem.styles\"\n                            [class.has-click]=\"!!fieldItem.onClick\"\n                            matRipple\n                            [matRippleDisabled]=\"!fieldItem.onClick\"\n                            (click)=\"onClickFieldItem(fieldItem)\">\n                            @if (fieldItem.kind === 'component') {\n                              @if (fieldItem.component) {\n                                <ng-container\n                                  *ngComponentOutlet=\"\n                                    fieldItem.component;\n                                    inputs: fieldItem.componentInputs\n                                  \"></ng-container>\n                              }\n                            } @else {\n                              <span class=\"section-tabs-display__field-label-row\">\n                                <span\n                                  class=\"section-tabs-display__field-label field-label\"\n                                  [innerHTML]=\"fieldItem.label\"></span>\n                                @if (fieldItem.labelAction; as action) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"section-tabs-display__field-label-action\"\n                                    data-field-label-action\n                                    [disabled]=\"action.disabled\"\n                                    [attr.aria-label]=\"action.ariaLabel\"\n                                    [attr.aria-pressed]=\"action.active\"\n                                    (click)=\"action.onClick(); $event.stopPropagation()\">\n                                    {{ action.active ? '★' : '☆' }}\n                                  </button>\n                                }\n                              </span>\n\n                              @if (fieldItem.kind === 'chips') {\n                                <div class=\"section-tabs-display__chips\">\n                                  @for (chip of fieldItem.chipsValue; track chip.trackValue) {\n                                    <span class=\"section-tabs-display__chip\" [style.color]=\"chip.color\">\n                                      @if (chip.icon) {\n                                        <mat-icon aria-hidden=\"true\">{{ chip.icon }}</mat-icon>\n                                      }\n                                      <span [innerHTML]=\"chip.label\"></span>\n                                    </span>\n                                  } @empty {\n                                    <span class=\"section-tabs-display__field-value field-value\">—</span>\n                                  }\n                                </div>\n                              } @else {\n                                <span\n                                  class=\"section-tabs-display__field-value field-value\"\n                                  [style.color]=\"fieldItem.color\"\n                                  [innerHTML]=\"fieldItem.displayValue\">\n                                </span>\n                              }\n                            }\n                          </div>\n                        }\n                      <!-- } @empty {\n                        <div class=\"section-tabs-display__empty-state empty-state\">\n                          <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                          <div>\n                            <strong>{{ intl.messages.emptyFields }}</strong>\n                            <span>{{ intl.messages.emptyFieldsDescription }}</span>\n                          </div>\n                        </div> -->\n                      }\n                    </div>\n                  }\n                </article>\n              }\n            }\n          </div>\n        </ng-template>\n      </app-section-tab>\n    }\n  </app-section-tabs>\n}\n",
+			styles: [".section-tabs-display__field-label-row{display:inline-flex;align-items:center;gap:4px}.section-tabs-display__field-label-action{border:0;background:transparent;color:#bb8b14;cursor:pointer;font-size:1.1rem;line-height:1;padding:0}.section-tabs-display__field-label-action:disabled{cursor:default;opacity:.6}app-section-tabs-display{display:block;height:100%;min-width:0;min-height:0}.section-tabs-display{display:block;height:100%;min-width:0;min-height:0}.section-tabs-display__empty{height:100%;min-height:160px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed #cbd5df;border-radius:8px;background:#f8fafc;color:#607286}.section-tabs-display__section{display:grid;grid-template-columns:repeat(var(--section-tabs-display-grid-effective-columns, var(--section-tabs-display-grid-columns, 1)),minmax(var(--section-tabs-display-grid-track-min-column-width, 0px),1fr));gap:var(--section-tabs-display-grid-gap, 12px);align-items:start;align-content:start;grid-auto-flow:row;grid-auto-rows:max-content;flex:0 0 auto;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:8px 8px 8px 0}.section-tabs-display__section--single-card{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-auto-rows:100%;align-items:stretch;align-content:start}.section-tabs-display__section--single-card>.section-tabs-display__grid-break{display:none}.section-tabs-display__section--single-card>.section-tabs-display__card{grid-column:1/-1!important;grid-row:auto!important;height:100%!important;min-height:0}.section-tabs-display__section--single-card>.section-tabs-display__card>.section-tabs-display__component-card,.section-tabs-display__section--single-card>.section-tabs-display__card>.section-tabs-display__field-grid{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.section-tabs-display__section--single-card-only{overflow:hidden}.section-tabs-display__section--single-card-multiple{overflow:visible}.section-tabs-display__card{min-width:0;max-width:100%;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border:1px solid #d9e0e7;border-radius:8px;background:#fff}.section-tabs-display__card-header{flex:0 0 auto}.section-tabs-display__card-title{min-width:0;display:flex;align-items:center;gap:10px}.section-tabs-display__card-title mat-icon,.section-tabs-display__card-title .mat-icon{flex:0 0 auto;color:#6b7280}.section-tabs-display__card-title h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__completion-chip{flex:0 0 auto}.section-tabs-display__component-card{min-width:0;min-height:0;height:100%}.section-tabs-display__field-grid{display:grid;grid-template-columns:repeat(var(--section-tabs-display-grid-effective-columns, var(--section-tabs-display-grid-columns, 1)),minmax(var(--section-tabs-display-grid-track-min-column-width, 0px),1fr));align-items:start;align-content:start;gap:var(--section-tabs-display-grid-gap, 0px);width:100%;max-width:100%;min-width:0}.section-tabs-display__section>.section-tabs-display__card,.section-tabs-display__field-grid>.section-tabs-display__field-cell{min-width:0;max-width:100%}.section-tabs-display__field-cell{min-width:0}.section-tabs-display__field-cell.has-click{cursor:pointer}.section-tabs-display__field-cell.has-click:hover{background-color:#0000000a}.section-tabs-display__field-cell--empty{opacity:.72}.section-tabs-display__field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__field-value{min-width:0;overflow-wrap:anywhere}.section-tabs-display__empty-state{grid-column:1/-1}.section-tabs-display__grid-break{grid-column:1/-1;width:100%;height:0;min-height:0;overflow:hidden}.section-tabs-display__item--break-before{grid-column-start:1}.section-tabs-display__chips{min-width:0;display:flex;flex-flow:row wrap;gap:8px}.section-tabs-display__chip{min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:var(--ngx-mat-section-tabs-display-background, #f3f6f9);color:var(--ngx-mat-section-tabs-display-primary, #123047);font-size:12px;font-weight:600;line-height:1.2}.section-tabs-display__chip mat-icon,.section-tabs-display__chip .mat-icon{flex:0 0 auto;--mat-icon-size: 16px}.section-tabs-display__chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-tabs-display__card-actions{display:inline-flex;align-items:center;gap:4px;margin-left:auto}.section-tabs-display__card-action{color:var(--action-color, inherit)}.section-tabs-display__card-action.mat-mdc-icon-button{padding:6px;--mat-icon-button-icon-size: 20px;--mat-icon-button-state-layer-size: 32px}.section-tabs-display__card-action.mat-mdc-icon-button mat-icon{--mat-icon-size: 20px}.section-tabs-display__card-action.mat-mdc-button{min-width:0;height:32px;padding:0 10px;font-size:.85rem;line-height:32px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [LOCALE_ID]
+			}]
+		},
+		{ type: SectionTabsIntl },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.DestroyRef }
+	],
+	propDecorators: {
+		options: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		selectedIndex: [{ type: Input }],
+		queryParamKey: [{ type: Input }],
+		menuHeader: [{ type: Input }],
+		showEmptyFields: [{ type: Input }],
+		selectedIndexChange: [{ type: Output }],
+		showEmptyFieldsChange: [{ type: Output }]
+	}
+});
+const declarations = [
+	SectionTabsComponent,
+	SectionTabComponent,
+	SectionTabsDisplayComponent,
+	SectionTabLabelDirective,
+	SectionTabContentDirective,
+	SectionTabsMenuHeaderDirective,
+	SectionTabsFooterDirective,
+	SectionTabsDisplayResponsiveGridDirective
+];
+var SectionTabsModule = class SectionTabsModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsModule,
+		declarations: [
+			SectionTabsComponent,
+			SectionTabComponent,
+			SectionTabsDisplayComponent,
+			SectionTabLabelDirective,
+			SectionTabContentDirective,
+			SectionTabsMenuHeaderDirective,
+			SectionTabsFooterDirective,
+			SectionTabsDisplayResponsiveGridDirective
+		],
+		imports: [
+			CommonModule,
+			MatButtonModule,
+			MatIconModule,
+			MatMenuModule,
+			MatRippleModule,
+			MatSlideToggleModule,
+			MatTooltipModule
+		],
+		exports: [
+			SectionTabsComponent,
+			SectionTabComponent,
+			SectionTabsDisplayComponent,
+			SectionTabLabelDirective,
+			SectionTabContentDirective,
+			SectionTabsMenuHeaderDirective,
+			SectionTabsFooterDirective
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SectionTabsModule,
+		imports: [
+			CommonModule,
+			MatButtonModule,
+			MatIconModule,
+			MatMenuModule,
+			MatRippleModule,
+			MatSlideToggleModule,
+			MatTooltipModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SectionTabsModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations,
+			imports: [
+				CommonModule,
+				MatButtonModule,
+				MatIconModule,
+				MatMenuModule,
+				MatRippleModule,
+				MatSlideToggleModule,
+				MatTooltipModule
+			],
+			exports: [
+				SectionTabsComponent,
+				SectionTabComponent,
+				SectionTabsDisplayComponent,
+				SectionTabLabelDirective,
+				SectionTabContentDirective,
+				SectionTabsMenuHeaderDirective,
+				SectionTabsFooterDirective
+			]
+		}]
+	}]
+});
+export { SECTION_SELECTION_HANDLER, SectionTabComponent, SectionTabContentDirective, SectionTabLabelDirective, SectionTabsComponent, SectionTabsDisplayComponent, SectionTabsFooterDirective, SectionTabsIntl, SectionTabsMenuHeaderDirective, SectionTabsModule, sectionTabsSlideBottomTransitions, sectionTabsSlideTopTransitions };
+
+//# sourceMappingURL=eherve-angular-material-section-tabs.mjs.map