mn-angular-lib 0.0.69 → 0.0.71

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, signal, ElementRef, DestroyRef, Self, APP_INITIALIZER, HostListener, forwardRef, Directive, EventEmitter, ChangeDetectorRef, TemplateRef, Output, ViewContainerRef, ViewChild, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent, SkipSelf, Attribute, Pipe } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, signal, ElementRef, DestroyRef, Self, APP_INITIALIZER, HostListener, forwardRef, Directive, EventEmitter, ChangeDetectorRef, TemplateRef, Output, ViewContainerRef, ViewChild, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent, Pipe, SkipSelf, Attribute } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -3705,17 +3705,32 @@ class MnFormBodyComponent {
     }
     /** Store table data sources keyed by field key for template access */
     tableDataSources = {};
-    /** Resolved i18n labels with defaults */
+    languageService = inject(MnLanguageService);
+    static DEFAULT_LABELS = {
+        submit: 'Submit',
+        cancel: 'Cancel',
+        submitting: 'Submitting...',
+        selectPlaceholder: 'Select...',
+        loading: 'Loading...',
+        fileUploadPrompt: 'Click or drag files here',
+    };
+    resolveLabel(i18nValue, key) {
+        if (i18nValue)
+            return i18nValue;
+        const translated = this.languageService.translate(`common.${key}`);
+        return translated === `common.${key}` ? MnFormBodyComponent.DEFAULT_LABELS[key] : translated;
+    }
+    /** Resolved i18n labels with defaults, falling back to translated keys */
     get labels() {
         const i = this.config;
         const i18n = i.i18n || {};
         return {
-            submit: i18n.submit || 'Submit',
-            cancel: i18n.cancel || 'Cancel',
-            submitting: i18n.submitting || 'Submitting...',
-            selectPlaceholder: i18n.selectPlaceholder || 'Select...',
-            loading: i18n.loading || 'Loading...',
-            fileUploadPrompt: i18n.fileUploadPrompt || 'Click or drag files here',
+            submit: this.resolveLabel(i18n.submit, 'submit'),
+            cancel: this.resolveLabel(i18n.cancel, 'cancel'),
+            submitting: this.resolveLabel(i18n.submitting, 'submitting'),
+            selectPlaceholder: this.resolveLabel(i18n.selectPlaceholder, 'selectPlaceholder'),
+            loading: this.resolveLabel(i18n.loading, 'loading'),
+            fileUploadPrompt: this.resolveLabel(i18n.fileUploadPrompt, 'fileUploadPrompt'),
         };
     }
     ngOnInit() {
@@ -4266,15 +4281,29 @@ class MnWizardBodyComponent {
     isCurrentStepValid = true;
     isCompleting = false;
     wizardErrors = {};
-    /** Resolved i18n labels with defaults */
+    languageService = inject(MnLanguageService);
+    static DEFAULT_LABELS = {
+        next: 'Next',
+        back: 'Back',
+        close: 'Close',
+        complete: 'Complete',
+        completing: 'Completing...',
+    };
+    resolveLabel(i18nValue, key) {
+        if (i18nValue)
+            return i18nValue;
+        const translated = this.languageService.translate(`common.${key}`);
+        return translated === `common.${key}` ? MnWizardBodyComponent.DEFAULT_LABELS[key] : translated;
+    }
+    /** Resolved i18n labels with defaults, falling back to translated keys */
     get labels() {
         const i18n = this.config.i18n || {};
         return {
-            next: i18n.next || 'Next',
-            back: i18n.back || 'Back',
-            close: i18n.close || 'Close',
-            complete: i18n.complete || 'Complete',
-            completing: i18n.completing || 'Completing...',
+            next: this.resolveLabel(i18n.next, 'next'),
+            back: this.resolveLabel(i18n.back, 'back'),
+            close: this.resolveLabel(i18n.close, 'close'),
+            complete: this.resolveLabel(i18n.complete, 'complete'),
+            completing: this.resolveLabel(i18n.completing, 'completing'),
         };
     }
     /** Pre-built form configs keyed by step id — only for steps that have fields */
@@ -4565,6 +4594,7 @@ class MnConfirmationBodyComponent {
     formBody;
     confirmButtonStatus = 'VALID';
     hasFormFields = false;
+    languageService = inject(MnLanguageService);
     constructor(cdr) {
         this.cdr = cdr;
     }
@@ -4593,11 +4623,17 @@ class MnConfirmationBodyComponent {
         const reason = this.config.cancel?.reason || ModalCloseReason.CANCELLED;
         this.modalRef.dismiss(reason);
     }
+    resolveLabel(value, key, fallback) {
+        if (value)
+            return value;
+        const translated = this.languageService.translate(`common.${key}`);
+        return translated === `common.${key}` ? fallback : translated;
+    }
     get confirmLabel() {
-        return this.config.confirm?.label || 'Confirm';
+        return this.resolveLabel(this.config.confirm?.label, 'confirm', 'Confirm');
     }
     get cancelLabel() {
-        return this.config.cancel?.label || 'Cancel';
+        return this.resolveLabel(this.config.cancel?.label, 'cancel', 'Cancel');
     }
     get confirmStyle() {
         return this.config.confirm?.style || ActionStyle.PRIMARY;
@@ -4667,6 +4703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 class MnModalShellComponent {
     el;
+    cdr;
     config;
     modalRef;
     isClosing = false;
@@ -4676,8 +4713,9 @@ class MnModalShellComponent {
     focusTrapListener = null;
     pollingTimer = null;
     pollAttempts = 0;
-    constructor(el) {
+    constructor(el, cdr) {
         this.el = el;
+        this.cdr = cdr;
     }
     ngOnInit() {
         this.startPollingIfConfigured();
@@ -4756,6 +4794,7 @@ class MnModalShellComponent {
     }
     startClosing() {
         this.isClosing = true;
+        this.cdr.detectChanges();
         return new Promise(resolve => setTimeout(resolve, 150));
     }
     onEscapeKey(event) {
@@ -4894,7 +4933,7 @@ class MnModalShellComponent {
             this.pollingTimer = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-base-300\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions -->\n  @if (hasCustomFooterActions) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      @for (action of leftFooterActions; track action.label) {\n        <button\n          mnButton\n          [data]=\"{\n            variant: getActionButtonVariant(action.style),\n            color: getActionButtonColor(action.style),\n            disabled: action.disabled\n          }\"\n          [disabled]=\"action.disabled\"\n          (click)=\"onFooterAction(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n\n      <div class=\"flex-1\"></div>\n\n      @for (action of rightFooterActions; track action.label) {\n        <button\n          mnButton\n          [data]=\"{\n            variant: getActionButtonVariant(action.style),\n            color: getActionButtonColor(action.style),\n            disabled: action.disabled\n          }\"\n          [disabled]=\"action.disabled\"\n          (click)=\"onFooterAction(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
@@ -4907,7 +4946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnCustomBodyHostComponent,
                         MnButton,
                     ], template: "@if (showBackdrop) {\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-base-300\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions -->\n  @if (hasCustomFooterActions) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      @for (action of leftFooterActions; track action.label) {\n        <button\n          mnButton\n          [data]=\"{\n            variant: getActionButtonVariant(action.style),\n            color: getActionButtonColor(action.style),\n            disabled: action.disabled\n          }\"\n          [disabled]=\"action.disabled\"\n          (click)=\"onFooterAction(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n\n      <div class=\"flex-1\"></div>\n\n      @for (action of rightFooterActions; track action.label) {\n        <button\n          mnButton\n          [data]=\"{\n            variant: getActionButtonVariant(action.style),\n            color: getActionButtonColor(action.style),\n            disabled: action.disabled\n          }\"\n          [disabled]=\"action.disabled\"\n          (click)=\"onFooterAction(action)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
@@ -5586,9 +5625,9 @@ class CalendarWeekComponent {
         this.layoutService = layoutService;
         this.formatter = new DefaultCalendarDateFormatter();
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
-        this.buildHourRows();
+        await this.buildHourRows();
         this.buildColumns();
         this.updateCurrentTime();
         this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
@@ -5802,9 +5841,9 @@ class CalendarDayComponent {
         this.layoutService = layoutService;
         this.formatter = new DefaultCalendarDateFormatter();
     }
-    ngOnInit() {
+    async ngOnInit() {
         this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
-        this.buildHourRows();
+        await this.buildHourRows();
         this.updateDayInfo();
         this.updateCurrentTime();
         this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
@@ -6239,6 +6278,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 // Main component
 
+/**
+ * Pipe that translates a key via MnLanguageService.
+ *
+ * Usage in templates:
+ *   {{ 'form.email.label' | mnTranslate }}
+ *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
+ *
+ * Note: This pipe is impure so it re-evaluates when the locale changes.
+ */
+class MnTranslatePipe {
+    lang;
+    constructor(lang) {
+        this.lang = lang;
+    }
+    transform(key, params) {
+        return this.lang.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [{ token: MnLanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnTranslate',
+                    standalone: true,
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: MnLanguageService }] });
+
+/**
+ * Tab component that renders a horizontal tab bar.
+ * Supports translation keys for labels via MnTranslatePipe.
+ */
+class MnTabComponent {
+    /** Data source containing tab items and default active index. */
+    dataSource;
+    /** Emits the newly activated tab item whenever the active tab changes. */
+    activeChange = new EventEmitter();
+    /** The currently active tab item. */
+    currentActive;
+    /** Initializes the default active tab based on the data source configuration. */
+    ngOnInit() {
+        if (this.dataSource &&
+            this.dataSource.items.length > this.dataSource.defaultActive) {
+            this.currentActive = this.dataSource.items[this.dataSource.defaultActive];
+        }
+    }
+    /**
+     * Sets the given tab item as active, invoking deactivate/activate callbacks.
+     * @param item - The tab item to activate.
+     */
+    setActive(item) {
+        if (this.currentActive && this.currentActive !== item) {
+            this.currentActive.onDeactivate?.();
+            item.onClick?.();
+            this.currentActive = item;
+            this.activeChange.emit(item);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<div class=\"w-full mb-10 flex justify-center\">\n  <div class=\"inline-flex rounded-lg p-2 bg-base-100 shadow-md\">\n    <div role=\"tablist\" class=\"tabs flex\">\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          class=\"tab px-4 min-w-36 py-2 border-b-2 cursor-pointer select-none transition-colors\"\n          [class.text-brand-500]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-brand-500]=\"currentActive === item\"\n          [class.border-base-300]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (click)=\"setActive(item)\"\n        >\n          {{ item.label | mnTranslate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe], template: "<div class=\"w-full mb-10 flex justify-center\">\n  <div class=\"inline-flex rounded-lg p-2 bg-base-100 shadow-md\">\n    <div role=\"tablist\" class=\"tabs flex\">\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          class=\"tab px-4 min-w-36 py-2 border-b-2 cursor-pointer select-none transition-colors\"\n          [class.text-brand-500]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-brand-500]=\"currentActive === item\"\n          [class.border-base-300]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (click)=\"setActive(item)\"\n        >\n          {{ item.label | mnTranslate }}\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], activeChange: [{
+                type: Output
+            }] } });
+
 class MnSectionDirective {
     /** Section name contributed by this DOM node to the section path */
     mnSection;
@@ -6702,35 +6812,6 @@ function provideMnLanguage(config) {
     ];
 }
 
-/**
- * Pipe that translates a key via MnLanguageService.
- *
- * Usage in templates:
- *   {{ 'form.email.label' | mnTranslate }}
- *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
- *
- * Note: This pipe is impure so it re-evaluates when the locale changes.
- */
-class MnTranslatePipe {
-    lang;
-    constructor(lang) {
-        this.lang = lang;
-    }
-    transform(key, params) {
-        return this.lang.translate(key, params);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [{ token: MnLanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mnTranslate',
-                    standalone: true,
-                    pure: false,
-                }]
-        }], ctorParameters: () => [{ type: MnLanguageService }] });
-
 /**
  * Enable live preview mode. Listens for postMessage events from
  * Mn Web Manager and hot-swaps config/translations at runtime.
@@ -6775,5 +6856,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTabComponent, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map