@beshkari/mb-ui 0.5.0-alpha.1

package/fesm2022/beshkari-mb-ui.mjs

@@ -0,0 +1,3828 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, makeEnvironmentProviders, EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, Component, forwardRef, HostListener, Directive, Injectable, ContentChild, ContentChildren, Inject, ViewChild, Injector } from '@angular/core';
+import { NgClass, NgIf, NgFor, NgStyle, NgTemplateOutlet, DecimalPipe, KeyValuePipe, AsyncPipe } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { Subject, BehaviorSubject, firstValueFrom } from 'rxjs';
+import * as i1$1 from '@angular/cdk/portal';
+import { PortalModule, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/a11y';
+import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { take, filter } from 'rxjs/operators';
+
+const MB_UI_DEFAULT_CONFIG = {
+    direction: 'ltr',
+    density: 'comfortable',
+    locale: 'en-US',
+};
+const MB_UI_CONFIG = new InjectionToken('MB_UI_CONFIG', {
+    providedIn: 'root',
+    factory: () => MB_UI_DEFAULT_CONFIG,
+});
+
+const LOCALE_ALIASES = {
+    fa: 'fa-IR',
+    'fa-ir': 'fa-IR',
+    'fa_IR': 'fa-IR',
+    en: 'en-US',
+    'en-us': 'en-US',
+    'en_US': 'en-US',
+};
+function normalizeMbUiLocale(locale) {
+    const normalized = locale.trim().replace('_', '-');
+    const alias = LOCALE_ALIASES[normalized.toLowerCase()];
+    if (alias)
+        return alias;
+    if (normalized === 'fa-IR' || normalized === 'en-US')
+        return normalized;
+    return normalized.toLowerCase().startsWith('fa') ? 'fa-IR' : 'en-US';
+}
+
+const MB_GRID_MESSAGES_EN = {
+    noRecords: 'No records available',
+    loading: 'Loading...',
+    groupLabel: 'Group by:',
+    groupHint: 'Use the column menu to group by a column',
+    columns: 'Columns',
+    resetColumns: 'Reset columns',
+    addRow: 'Add row',
+    searchPlaceholder: 'Quick search...',
+    exportCsv: 'CSV',
+    exportExcel: 'Excel',
+    exportJson: 'JSON',
+    reset: 'Reset',
+    selectAllRows: 'Select all visible rows',
+    selectRow: 'Select row',
+    columnMenu: 'Column menu',
+    sort: 'Sort',
+    groupByColumn: 'Group by this column',
+    removeGroup: 'Remove grouping',
+    filter: 'Filter',
+    clearFilter: 'Clear filter',
+    filterValuePlaceholder: 'Filter value',
+    lockColumn: 'Lock column',
+    unlockColumn: 'Unlock column',
+    hideColumn: 'Hide column',
+    save: 'Save',
+    cancel: 'Cancel',
+    edit: 'Edit',
+    delete: 'Delete',
+    deleteConfirm: 'Are you sure you want to delete this row?',
+    fieldRequired: (title) => `${title} is required`,
+    commandColumn: 'Actions',
+    pagerFirst: 'First',
+    pagerPrevious: 'Previous',
+    pagerNext: 'Next',
+    pagerLast: 'Last',
+    pagerInfo: (from, to, total) => `Showing ${from} to ${to} of ${total}`,
+    yes: 'Yes',
+    no: 'No',
+    operatorLabels: {
+        contains: 'Contains',
+        doesNotContain: 'Does not contain',
+        startsWith: 'Starts with',
+        endsWith: 'Ends with',
+        eq: 'Equals',
+        neq: 'Does not equal',
+        gt: 'Greater than',
+        gte: 'Greater than or equal',
+        lt: 'Less than',
+        lte: 'Less than or equal',
+        isNull: 'Is null',
+        isNotNull: 'Is not null',
+        isEmpty: 'Is empty',
+        isNotEmpty: 'Is not empty',
+        between: 'Between',
+    },
+};
+const MB_UI_MESSAGES_EN = {
+    grid: MB_GRID_MESSAGES_EN,
+    common: {
+        close: 'Close',
+        clear: 'Clear',
+        yes: 'Yes',
+        no: 'No',
+    },
+    confirm: {
+        title: 'Confirm action',
+        okText: 'Confirm',
+        cancelText: 'Cancel',
+        deleteTitle: 'Delete item',
+        deleteOkText: 'Delete',
+        ariaLabel: 'Confirm dialog',
+    },
+    form: {
+        selectPlaceholder: 'Select an option',
+        searchPlaceholder: 'Search...',
+        selectDefaultItem: 'Select',
+        datePlaceholder: 'Pick a date',
+        noMatches: 'No matches found',
+    },
+    empty: {
+        title: 'No records available',
+    },
+    datepicker: {
+        placeholder: 'Pick a date',
+        clear: 'Clear date',
+        pickDate: 'Pick a date',
+        today: 'Today',
+        weekdayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        monthNamesGregorian: [
+            'January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December',
+        ],
+    },
+    pagination: {
+        ariaLabel: 'Pagination',
+    },
+    dialog: {
+        ariaLabel: 'Dialog',
+        close: 'Close',
+    },
+};
+
+const MB_GRID_MESSAGES_FA = {
+    noRecords: 'داده‌ای برای نمایش وجود ندارد',
+    loading: 'در حال بارگذاری...',
+    groupLabel: 'گروه‌بندی:',
+    groupHint: 'از منوی ستون، گزینه گروه‌بندی را انتخاب کن',
+    columns: 'ستون‌ها',
+    resetColumns: 'بازنشانی ستون‌ها',
+    addRow: 'افزودن ردیف',
+    searchPlaceholder: 'جستجوی سریع...',
+    exportCsv: 'CSV',
+    exportExcel: 'Excel',
+    exportJson: 'JSON',
+    reset: 'بازنشانی',
+    selectAllRows: 'انتخاب همه ردیف‌های قابل مشاهده',
+    selectRow: 'انتخاب ردیف',
+    columnMenu: 'منوی ستون',
+    sort: 'مرتب‌سازی',
+    groupByColumn: 'گروه‌بندی براساس این ستون',
+    removeGroup: 'حذف گروه‌بندی',
+    filter: 'فیلتر',
+    clearFilter: 'پاک کردن فیلتر',
+    filterValuePlaceholder: 'مقدار فیلتر',
+    lockColumn: 'قفل کردن ستون',
+    unlockColumn: 'آزاد کردن ستون',
+    hideColumn: 'مخفی کردن ستون',
+    save: 'ذخیره',
+    cancel: 'لغو',
+    edit: 'ویرایش',
+    delete: 'حذف',
+    deleteConfirm: 'آیا از حذف این ردیف مطمئن هستید؟',
+    fieldRequired: (title) => `${title} الزامی است`,
+    commandColumn: 'عملیات',
+    pagerFirst: 'اول',
+    pagerPrevious: 'قبلی',
+    pagerNext: 'بعدی',
+    pagerLast: 'آخر',
+    pagerInfo: (from, to, total) => `نمایش ${from} تا ${to} از ${total}`,
+    yes: 'بله',
+    no: 'خیر',
+    operatorLabels: {
+        contains: 'شامل باشد',
+        doesNotContain: 'شامل نباشد',
+        startsWith: 'شروع شود با',
+        endsWith: 'تمام شود با',
+        eq: 'برابر باشد',
+        neq: 'برابر نباشد',
+        gt: 'بزرگ‌تر از',
+        gte: 'بزرگ‌تر یا مساوی',
+        lt: 'کوچک‌تر از',
+        lte: 'کوچک‌تر یا مساوی',
+        isNull: 'خالی/Null باشد',
+        isNotNull: 'خالی/Null نباشد',
+        isEmpty: 'رشته خالی باشد',
+        isNotEmpty: 'رشته خالی نباشد',
+        between: 'بین دو مقدار',
+    },
+};
+const MB_UI_MESSAGES_FA = {
+    grid: MB_GRID_MESSAGES_FA,
+    common: {
+        close: 'بستن',
+        clear: 'پاک کردن',
+        yes: 'بله',
+        no: 'خیر',
+    },
+    confirm: {
+        title: 'تأیید عملیات',
+        okText: 'تأیید',
+        cancelText: 'انصراف',
+        deleteTitle: 'حذف آیتم',
+        deleteOkText: 'حذف',
+        ariaLabel: 'پنجره تأیید',
+    },
+    form: {
+        selectPlaceholder: 'انتخاب کنید',
+        searchPlaceholder: 'جستجو...',
+        selectDefaultItem: 'انتخاب',
+        datePlaceholder: 'انتخاب تاریخ',
+        noMatches: 'موردی یافت نشد',
+    },
+    empty: {
+        title: 'داده‌ای برای نمایش وجود ندارد',
+    },
+    datepicker: {
+        placeholder: 'انتخاب تاریخ',
+        clear: 'پاک کردن تاریخ',
+        pickDate: 'انتخاب تاریخ',
+        today: 'امروز',
+        weekdayNames: ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'],
+        monthNamesGregorian: [
+            'ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن',
+            'ژوئیه', 'اوت', 'سپتامبر', 'اکتبر', 'نوامبر', 'دسامبر',
+        ],
+    },
+    pagination: {
+        ariaLabel: 'صفحه‌بندی',
+    },
+    dialog: {
+        ariaLabel: 'پنجره',
+        close: 'بستن',
+    },
+};
+
+const LOCALE_MESSAGES = {
+    'en-US': MB_UI_MESSAGES_EN,
+    'fa-IR': MB_UI_MESSAGES_FA,
+};
+function getMbUiMessages(locale) {
+    return LOCALE_MESSAGES[normalizeMbUiLocale(locale)] ?? MB_UI_MESSAGES_EN;
+}
+function mergeMbUiMessages(base, overrides) {
+    if (!overrides)
+        return base;
+    return {
+        grid: { ...base.grid, ...overrides.grid, operatorLabels: { ...base.grid.operatorLabels, ...overrides.grid?.operatorLabels } },
+        common: { ...base.common, ...overrides.common },
+        confirm: { ...base.confirm, ...overrides.confirm },
+        form: { ...base.form, ...overrides.form },
+        empty: { ...base.empty, ...overrides.empty },
+        datepicker: { ...base.datepicker, ...overrides.datepicker },
+        pagination: { ...base.pagination, ...overrides.pagination },
+        dialog: { ...base.dialog, ...overrides.dialog },
+    };
+}
+const MB_UI_MESSAGES = new InjectionToken('MB_UI_MESSAGES', {
+    providedIn: 'root',
+    factory: () => {
+        const config = inject(MB_UI_CONFIG);
+        return getMbUiMessages(config.locale);
+    },
+});
+
+/** @deprecated Use `MB_UI_MESSAGES` or locale bundles from `i18n/`. */
+const MB_GRID_DEFAULT_MESSAGES_FA = MB_GRID_MESSAGES_FA;
+const MB_GRID_MESSAGES = new InjectionToken('MB_GRID_MESSAGES', {
+    providedIn: 'root',
+    factory: () => inject(MB_UI_MESSAGES).grid,
+});
+
+function provideMbUi(options = {}) {
+    const locale = normalizeMbUiLocale(options.locale ?? MB_UI_DEFAULT_CONFIG.locale);
+    const config = {
+        direction: options.direction ?? MB_UI_DEFAULT_CONFIG.direction,
+        density: options.density ?? MB_UI_DEFAULT_CONFIG.density,
+        locale,
+    };
+    const messages = mergeMbUiMessages(getMbUiMessages(locale), options.messages);
+    return makeEnvironmentProviders([
+        { provide: MB_UI_CONFIG, useValue: config },
+        { provide: MB_UI_MESSAGES, useValue: messages },
+        { provide: MB_GRID_MESSAGES, useFactory: () => messages.grid, deps: [] },
+    ]);
+}
+
+function coerceBooleanProperty(value) {
+    return value != null && `${value}` !== 'false';
+}
+function isNil(value) {
+    return value === null || value === undefined;
+}
+function normalizeText(value) {
+    return isNil(value) ? '' : String(value).trim().toLowerCase();
+}
+
+class MbButtonComponent {
+    variant = 'primary';
+    size = 'md';
+    type = 'button';
+    disabled = false;
+    loading = false;
+    fullWidth = false;
+    ariaLabel;
+    clicked = new EventEmitter();
+    hostClass = 'mb-button-host';
+    onClick(event) {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbButtonComponent, isStandalone: true, selector: "mb-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<button\n  class=\"mb-button\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-busy]=\"loading\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick($event)\"\n  [ngClass]=\"[\n    'mb-button--' + variant,\n    'mb-button--' + size,\n    fullWidth ? 'mb-button--full' : ''\n  ]\">\n  <span *ngIf=\"loading\" class=\"mb-button__spinner\" aria-hidden=\"true\"></span>\n  <span class=\"mb-button__content\"><ng-content></ng-content></span>\n</button>\n", styles: [":host{display:inline-flex}.mb-button{appearance:none;border:1px solid transparent;border-radius:var(--mb-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mb-font-family);font-weight:650;line-height:1;cursor:pointer;transition:background var(--mb-transition-fast),color var(--mb-transition-fast),border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),transform var(--mb-transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.mb-button:focus-visible{outline:none;box-shadow:var(--mb-focus-ring)}.mb-button:active:not(:disabled){transform:translateY(1px)}.mb-button:disabled{cursor:not-allowed;opacity:.62}.mb-button--sm{min-height:2rem;padding:0 .75rem;font-size:.8125rem}.mb-button--md{min-height:2.5rem;padding:0 1rem;font-size:.875rem}.mb-button--lg{min-height:3rem;padding:0 1.25rem;font-size:.9375rem}.mb-button--full{width:100%}.mb-button--primary{background:var(--mb-color-primary);color:#fff}.mb-button--primary:hover:not(:disabled){background:var(--mb-color-primary-hover)}.mb-button--secondary{background:var(--mb-color-surface-elevated);border-color:var(--mb-color-border);color:var(--mb-color-text)}.mb-button--secondary:hover:not(:disabled){border-color:var(--mb-color-border-strong)}.mb-button--danger{background:var(--mb-color-danger);color:#fff}.mb-button--ghost{background:transparent;color:var(--mb-color-text)}.mb-button--ghost:hover:not(:disabled){background:var(--mb-color-surface)}.mb-button--link{background:transparent;color:var(--mb-color-primary);padding-inline:.25rem;min-height:auto}.mb-button__spinner{inline-size:1em;block-size:1em;border:2px solid currentColor;border-block-start-color:transparent;border-radius:999px;animation:mb-button-spin .72s linear infinite}@keyframes mb-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-button', standalone: true, imports: [NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"mb-button\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-busy]=\"loading\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick($event)\"\n  [ngClass]=\"[\n    'mb-button--' + variant,\n    'mb-button--' + size,\n    fullWidth ? 'mb-button--full' : ''\n  ]\">\n  <span *ngIf=\"loading\" class=\"mb-button__spinner\" aria-hidden=\"true\"></span>\n  <span class=\"mb-button__content\"><ng-content></ng-content></span>\n</button>\n", styles: [":host{display:inline-flex}.mb-button{appearance:none;border:1px solid transparent;border-radius:var(--mb-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mb-font-family);font-weight:650;line-height:1;cursor:pointer;transition:background var(--mb-transition-fast),color var(--mb-transition-fast),border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),transform var(--mb-transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.mb-button:focus-visible{outline:none;box-shadow:var(--mb-focus-ring)}.mb-button:active:not(:disabled){transform:translateY(1px)}.mb-button:disabled{cursor:not-allowed;opacity:.62}.mb-button--sm{min-height:2rem;padding:0 .75rem;font-size:.8125rem}.mb-button--md{min-height:2.5rem;padding:0 1rem;font-size:.875rem}.mb-button--lg{min-height:3rem;padding:0 1.25rem;font-size:.9375rem}.mb-button--full{width:100%}.mb-button--primary{background:var(--mb-color-primary);color:#fff}.mb-button--primary:hover:not(:disabled){background:var(--mb-color-primary-hover)}.mb-button--secondary{background:var(--mb-color-surface-elevated);border-color:var(--mb-color-border);color:var(--mb-color-text)}.mb-button--secondary:hover:not(:disabled){border-color:var(--mb-color-border-strong)}.mb-button--danger{background:var(--mb-color-danger);color:#fff}.mb-button--ghost{background:transparent;color:var(--mb-color-text)}.mb-button--ghost:hover:not(:disabled){background:var(--mb-color-surface)}.mb-button--link{background:transparent;color:var(--mb-color-primary);padding-inline:.25rem;min-height:auto}.mb-button__spinner{inline-size:1em;block-size:1em;border:2px solid currentColor;border-block-start-color:transparent;border-radius:999px;animation:mb-button-spin .72s linear infinite}@keyframes mb-button-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbInputComponent {
+    messages = inject(MB_UI_MESSAGES);
+    type = 'text';
+    placeholder = '';
+    size = 'md';
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    id;
+    name;
+    clearable = false;
+    valueChange = new EventEmitter();
+    value = '';
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    handleInput(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    blur() {
+        this.onTouched();
+    }
+    clear() {
+        if (this.disabled || this.readonly)
+            return;
+        this.handleInput('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbInputComponent, isStandalone: true, selector: "mb-input", inputs: { type: "type", placeholder: "placeholder", size: "size", disabled: "disabled", readonly: "readonly", invalid: "invalid", id: "id", name: "name", clearable: "clearable" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"mb-input-wrap\" [ngClass]=\"['mb-input-wrap--' + size, invalid ? 'mb-input-wrap--invalid' : '']\">\n  <input\n    class=\"mb-input\"\n    [id]=\"id\"\n    [attr.name]=\"name || null\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"handleInput($event)\"\n    (blur)=\"blur()\" />\n  <button\n    *ngIf=\"clearable && value\"\n    class=\"mb-input__clear\"\n    type=\"button\"\n    [attr.aria-label]=\"messages.common.clear\"\n    (click)=\"clear()\">\n    \u00D7\n  </button>\n</div>\n", styles: [".mb-input-wrap{display:inline-flex;align-items:center;inline-size:100%;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);transition:border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),background var(--mb-transition-fast)}.mb-input-wrap:focus-within{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-input-wrap--invalid{border-color:var(--mb-color-danger)}.mb-input-wrap--sm{min-height:2rem}.mb-input-wrap--md{min-height:2.5rem}.mb-input-wrap--lg{min-height:3rem}.mb-input{inline-size:100%;min-inline-size:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding-inline:.875rem;block-size:100%}.mb-input::placeholder{color:var(--mb-color-muted)}.mb-input:disabled{cursor:not-allowed;color:var(--mb-color-disabled)}.mb-input__clear{border:0;background:transparent;color:var(--mb-color-muted);cursor:pointer;font-size:1.25rem;padding-inline:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-input', standalone: true, imports: [FormsModule, NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"mb-input-wrap\" [ngClass]=\"['mb-input-wrap--' + size, invalid ? 'mb-input-wrap--invalid' : '']\">\n  <input\n    class=\"mb-input\"\n    [id]=\"id\"\n    [attr.name]=\"name || null\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"handleInput($event)\"\n    (blur)=\"blur()\" />\n  <button\n    *ngIf=\"clearable && value\"\n    class=\"mb-input__clear\"\n    type=\"button\"\n    [attr.aria-label]=\"messages.common.clear\"\n    (click)=\"clear()\">\n    \u00D7\n  </button>\n</div>\n", styles: [".mb-input-wrap{display:inline-flex;align-items:center;inline-size:100%;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);transition:border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),background var(--mb-transition-fast)}.mb-input-wrap:focus-within{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-input-wrap--invalid{border-color:var(--mb-color-danger)}.mb-input-wrap--sm{min-height:2rem}.mb-input-wrap--md{min-height:2.5rem}.mb-input-wrap--lg{min-height:3rem}.mb-input{inline-size:100%;min-inline-size:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding-inline:.875rem;block-size:100%}.mb-input::placeholder{color:var(--mb-color-muted)}.mb-input:disabled{cursor:not-allowed;color:var(--mb-color-disabled)}.mb-input__clear{border:0;background:transparent;color:var(--mb-color-muted);cursor:pointer;font-size:1.25rem;padding-inline:.75rem}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class MbFormFieldComponent {
+    label = '';
+    hint = '';
+    error = '';
+    required = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbFormFieldComponent, isStandalone: true, selector: "mb-form-field", inputs: { label: "label", hint: "hint", error: "error", required: "required" }, ngImport: i0, template: "<label class=\"mb-form-field\">\n  <span *ngIf=\"label\" class=\"mb-form-field__label\">\n    {{ label }} <span *ngIf=\"required\" class=\"mb-form-field__required\">*</span>\n  </span>\n  <span class=\"mb-form-field__control\"><ng-content></ng-content></span>\n  <span *ngIf=\"error || hint\" class=\"mb-form-field__message\" [class.mb-form-field__message--error]=\"error\">\n    {{ error || hint }}\n  </span>\n</label>\n", styles: [".mb-form-field{display:flex;flex-direction:column;gap:.45rem;inline-size:100%}.mb-form-field__label{color:var(--mb-color-text);font-size:.875rem;font-weight:650}.mb-form-field__required{color:var(--mb-color-danger)}.mb-form-field__control{display:block}.mb-form-field__message{color:var(--mb-color-muted);font-size:.75rem}.mb-form-field__message--error{color:var(--mb-color-danger)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-form-field', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"mb-form-field\">\n  <span *ngIf=\"label\" class=\"mb-form-field__label\">\n    {{ label }} <span *ngIf=\"required\" class=\"mb-form-field__required\">*</span>\n  </span>\n  <span class=\"mb-form-field__control\"><ng-content></ng-content></span>\n  <span *ngIf=\"error || hint\" class=\"mb-form-field__message\" [class.mb-form-field__message--error]=\"error\">\n    {{ error || hint }}\n  </span>\n</label>\n", styles: [".mb-form-field{display:flex;flex-direction:column;gap:.45rem;inline-size:100%}.mb-form-field__label{color:var(--mb-color-text);font-size:.875rem;font-weight:650}.mb-form-field__required{color:var(--mb-color-danger)}.mb-form-field__control{display:block}.mb-form-field__message{color:var(--mb-color-muted);font-size:.75rem}.mb-form-field__message--error{color:var(--mb-color-danger)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
+class MbSelectComponent {
+    messages = inject(MB_UI_MESSAGES);
+    options = [];
+    placeholder;
+    size = 'md';
+    disabled = false;
+    invalid = false;
+    valueChange = new EventEmitter();
+    value = null;
+    get effectivePlaceholder() {
+        return this.placeholder ?? this.messages.form.selectPlaceholder;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    compareByValue = (a, b) => a === b;
+    handleChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    blur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbSelectComponent, isStandalone: true, selector: "mb-select", inputs: { options: "options", placeholder: "placeholder", size: "size", disabled: "disabled", invalid: "invalid" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<select\n  class=\"mb-select\"\n  [ngClass]=\"['mb-select--' + size, invalid ? 'mb-select--invalid' : '']\"\n  [disabled]=\"disabled\"\n  [compareWith]=\"compareByValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"handleChange($event)\"\n  (blur)=\"blur()\">\n  <option [ngValue]=\"null\">{{ effectivePlaceholder }}</option>\n  <option *ngFor=\"let item of options\" [ngValue]=\"item.value\" [disabled]=\"item.disabled\">\n    {{ item.label }}\n  </option>\n</select>\n", styles: [".mb-select{inline-size:100%;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);font:inherit;padding-inline:.875rem 2.25rem;outline:none;cursor:pointer;transition:border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast)}.mb-select:focus{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-select:disabled{cursor:not-allowed;color:var(--mb-color-disabled)}.mb-select--invalid{border-color:var(--mb-color-danger)}.mb-select--sm{min-height:2rem;font-size:.8125rem}.mb-select--md{min-height:2.5rem;font-size:.875rem}.mb-select--lg{min-height:3rem;font-size:.9375rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-select', standalone: true, imports: [FormsModule, NgFor, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<select\n  class=\"mb-select\"\n  [ngClass]=\"['mb-select--' + size, invalid ? 'mb-select--invalid' : '']\"\n  [disabled]=\"disabled\"\n  [compareWith]=\"compareByValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"handleChange($event)\"\n  (blur)=\"blur()\">\n  <option [ngValue]=\"null\">{{ effectivePlaceholder }}</option>\n  <option *ngFor=\"let item of options\" [ngValue]=\"item.value\" [disabled]=\"item.disabled\">\n    {{ item.label }}\n  </option>\n</select>\n", styles: [".mb-select{inline-size:100%;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);font:inherit;padding-inline:.875rem 2.25rem;outline:none;cursor:pointer;transition:border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast)}.mb-select:focus{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-select:disabled{cursor:not-allowed;color:var(--mb-color-disabled)}.mb-select--invalid{border-color:var(--mb-color-danger)}.mb-select--sm{min-height:2rem;font-size:.8125rem}.mb-select--md{min-height:2.5rem;font-size:.875rem}.mb-select--lg{min-height:3rem;font-size:.9375rem}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class MbComboboxComponent {
+    cdr;
+    host;
+    messages = inject(MB_UI_MESSAGES);
+    data = [];
+    textField = 'label';
+    valueField = 'value';
+    placeholder;
+    searchPlaceholder;
+    size = 'md';
+    disabled = false;
+    invalid = false;
+    filterable = true;
+    clearable = true;
+    defaultItem = null;
+    defaultItemText;
+    /** When true, the model value is the primitive from `valueField` instead of the full data item. */
+    valuePrimitive = false;
+    valueChange = new EventEmitter();
+    openedChange = new EventEmitter();
+    hostClass = 'mb-combobox-host';
+    value = null;
+    opened = false;
+    search = '';
+    normalizedOptions = [];
+    get effectivePlaceholder() {
+        return this.placeholder ?? this.messages.form.selectPlaceholder;
+    }
+    get effectiveSearchPlaceholder() {
+        return this.searchPlaceholder ?? this.messages.form.searchPlaceholder;
+    }
+    get effectiveDefaultItemText() {
+        return this.defaultItemText ?? this.messages.form.selectDefaultItem;
+    }
+    get clearAriaLabel() {
+        return this.messages.common.clear;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    constructor(cdr, host) {
+        this.cdr = cdr;
+        this.host = host;
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] || changes['textField'] || changes['valueField']) {
+            this.normalizedOptions = this.normalizeOptions(this.data);
+            this.cdr.markForCheck();
+        }
+    }
+    onDocumentClick(event) {
+        if (this.opened && !this.host.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onDocumentKeydown(event) {
+        if (event.key === 'Escape' && this.opened) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    writeValue(value) {
+        this.value = value ?? null;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    get filteredOptions() {
+        if (!this.filterable || !this.search.trim()) {
+            return this.normalizedOptions;
+        }
+        const term = this.search.trim().toLocaleLowerCase();
+        return this.normalizedOptions.filter((option) => option.label.toLocaleLowerCase().includes(term));
+    }
+    get displayLabel() {
+        if (this.value === null || this.value === undefined) {
+            return '';
+        }
+        const match = this.normalizedOptions.find((option) => this.compareValues(option.value, this.value));
+        return match?.label ?? String(this.value);
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.opened ? this.close() : this.open();
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.opened = true;
+        this.search = '';
+        this.openedChange.emit(true);
+        this.cdr.markForCheck();
+    }
+    close() {
+        this.opened = false;
+        this.onTouched();
+        this.openedChange.emit(false);
+        this.cdr.markForCheck();
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.commit(option.value);
+        this.close();
+    }
+    selectDefault() {
+        this.commit(this.defaultItem);
+        this.close();
+    }
+    clear(event) {
+        event?.stopPropagation();
+        if (this.disabled)
+            return;
+        this.commit(null);
+        this.close();
+    }
+    commit(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    normalizeOptions(source) {
+        if (!source?.length)
+            return [];
+        const first = source[0];
+        if (first && typeof first === 'object' && 'label' in first && 'value' in first) {
+            return source;
+        }
+        return source.map((item) => ({
+            label: this.readFieldLabel(item, this.textField),
+            value: (this.valuePrimitive ? this.readFieldValue(item, this.valueField) : item),
+            disabled: Boolean(this.readFieldValue(item, 'disabled')),
+        }));
+    }
+    readFieldLabel(item, field) {
+        const value = this.readFieldValue(item, field);
+        return value === null || value === undefined ? '' : String(value);
+    }
+    readFieldValue(item, field) {
+        if (item && typeof item === 'object' && field in item) {
+            return item[field];
+        }
+        return item;
+    }
+    isSelected(option) {
+        return this.compareValues(option.value, this.value);
+    }
+    compareValues(a, b) {
+        if (a === b)
+            return true;
+        if (a === null || b === null)
+            return false;
+        if (!this.valuePrimitive && typeof a === 'object' && typeof b === 'object') {
+            const aRecord = a;
+            const bRecord = b;
+            if (this.valueField in aRecord || this.valueField in bRecord) {
+                return aRecord[this.valueField] === bRecord[this.valueField];
+            }
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbComboboxComponent, isStandalone: true, selector: "mb-combobox", inputs: { data: "data", textField: "textField", valueField: "valueField", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", size: "size", disabled: "disabled", invalid: "invalid", filterable: "filterable", clearable: "clearable", defaultItem: "defaultItem", defaultItemText: "defaultItemText", valuePrimitive: "valuePrimitive" }, outputs: { valueChange: "valueChange", openedChange: "openedChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown": "onDocumentKeydown($event)" }, properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbComboboxComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-combobox\" [class.mb-combobox--open]=\"opened\" [class.mb-combobox--disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"mb-combobox__trigger\"\r\n    [ngClass]=\"['mb-combobox__trigger--' + size, invalid ? 'mb-combobox__trigger--invalid' : '']\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-expanded]=\"opened\"\r\n    aria-haspopup=\"listbox\"\r\n    (click)=\"toggle()\">\r\n    <span class=\"mb-combobox__value\" [class.mb-combobox__value--placeholder]=\"!displayLabel\">\r\n      {{ displayLabel || effectivePlaceholder }}\r\n    </span>\r\n    <span class=\"mb-combobox__actions\">\r\n      <button\r\n        *ngIf=\"clearable && value !== null && value !== undefined && !disabled\"\r\n        type=\"button\"\r\n        class=\"mb-combobox__clear\"\r\n        [attr.aria-label]=\"clearAriaLabel\"\r\n        (click)=\"clear($event)\">\u00D7</button>\r\n      <span class=\"mb-combobox__chevron\" [class.mb-combobox__chevron--open]=\"opened\">\u25BE</span>\r\n    </span>\r\n  </button>\r\n\r\n  <div *ngIf=\"opened\" class=\"mb-combobox__panel\" role=\"listbox\">\r\n    <input\r\n      *ngIf=\"filterable\"\r\n      class=\"mb-combobox__search\"\r\n      type=\"text\"\r\n      [placeholder]=\"effectiveSearchPlaceholder\"\r\n      [ngModel]=\"search\"\r\n      (ngModelChange)=\"search = $event\"\r\n      (click)=\"$event.stopPropagation()\" />\r\n\r\n    <button\r\n      *ngIf=\"defaultItem !== undefined\"\r\n      type=\"button\"\r\n      class=\"mb-combobox__option\"\r\n      (click)=\"selectDefault()\">\r\n      {{ effectiveDefaultItemText }}\r\n    </button>\r\n\r\n    <button\r\n      *ngFor=\"let option of filteredOptions\"\r\n      type=\"button\"\r\n      class=\"mb-combobox__option\"\r\n      [class.mb-combobox__option--selected]=\"isSelected(option)\"\r\n      [disabled]=\"option.disabled\"\r\n      (click)=\"selectOption(option)\">\r\n      {{ option.label }}\r\n    </button>\r\n\r\n    <div *ngIf=\"!filteredOptions.length\" class=\"mb-combobox__empty\">{{ messages.form.noMatches }}</div>\r\n  </div>\r\n</div>\r\n", styles: [".mb-combobox-host{display:block;width:100%}.mb-combobox{position:relative;width:100%}.mb-combobox__trigger{width:100%;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding:0 12px;cursor:pointer;font:inherit}.mb-combobox__trigger--sm{min-height:34px}.mb-combobox__trigger--lg{min-height:46px}.mb-combobox__trigger--invalid{border-color:var(--mb-danger, #dc2626)}.mb-combobox--disabled .mb-combobox__trigger{opacity:.6;cursor:not-allowed}.mb-combobox__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mb-combobox__value--placeholder{color:var(--mb-muted, #64748b)}.mb-combobox__actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.mb-combobox__clear{border:none;background:transparent;color:var(--mb-muted, #64748b);cursor:pointer;font-size:18px;line-height:1}.mb-combobox__chevron{transition:transform .15s ease}.mb-combobox__chevron--open{transform:rotate(180deg)}.mb-combobox__panel{position:absolute;inset-block-start:calc(100% + 4px);inset-inline:0;z-index:40;max-height:280px;overflow:auto;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-surface, #fff);box-shadow:var(--mb-shadow-md, 0 10px 24px rgba(15, 23, 42, .12));padding:6px}.mb-combobox__search{width:100%;min-height:34px;margin-bottom:6px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);padding:0 10px;font:inherit}.mb-combobox__option{width:100%;text-align:start;border:none;background:transparent;border-radius:var(--mb-radius-sm, 8px);padding:10px 12px;cursor:pointer;font:inherit}.mb-combobox__option:hover:not(:disabled),.mb-combobox__option--selected{background:color-mix(in srgb,var(--mb-primary, #2563eb) 10%,#fff);color:var(--mb-primary, #2563eb)}.mb-combobox__option:disabled{opacity:.45;cursor:not-allowed}.mb-combobox__empty{padding:12px;color:var(--mb-muted, #64748b);text-align:center;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-combobox', standalone: true, imports: [FormsModule, NgClass, NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbComboboxComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"mb-combobox\" [class.mb-combobox--open]=\"opened\" [class.mb-combobox--disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"mb-combobox__trigger\"\r\n    [ngClass]=\"['mb-combobox__trigger--' + size, invalid ? 'mb-combobox__trigger--invalid' : '']\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-expanded]=\"opened\"\r\n    aria-haspopup=\"listbox\"\r\n    (click)=\"toggle()\">\r\n    <span class=\"mb-combobox__value\" [class.mb-combobox__value--placeholder]=\"!displayLabel\">\r\n      {{ displayLabel || effectivePlaceholder }}\r\n    </span>\r\n    <span class=\"mb-combobox__actions\">\r\n      <button\r\n        *ngIf=\"clearable && value !== null && value !== undefined && !disabled\"\r\n        type=\"button\"\r\n        class=\"mb-combobox__clear\"\r\n        [attr.aria-label]=\"clearAriaLabel\"\r\n        (click)=\"clear($event)\">\u00D7</button>\r\n      <span class=\"mb-combobox__chevron\" [class.mb-combobox__chevron--open]=\"opened\">\u25BE</span>\r\n    </span>\r\n  </button>\r\n\r\n  <div *ngIf=\"opened\" class=\"mb-combobox__panel\" role=\"listbox\">\r\n    <input\r\n      *ngIf=\"filterable\"\r\n      class=\"mb-combobox__search\"\r\n      type=\"text\"\r\n      [placeholder]=\"effectiveSearchPlaceholder\"\r\n      [ngModel]=\"search\"\r\n      (ngModelChange)=\"search = $event\"\r\n      (click)=\"$event.stopPropagation()\" />\r\n\r\n    <button\r\n      *ngIf=\"defaultItem !== undefined\"\r\n      type=\"button\"\r\n      class=\"mb-combobox__option\"\r\n      (click)=\"selectDefault()\">\r\n      {{ effectiveDefaultItemText }}\r\n    </button>\r\n\r\n    <button\r\n      *ngFor=\"let option of filteredOptions\"\r\n      type=\"button\"\r\n      class=\"mb-combobox__option\"\r\n      [class.mb-combobox__option--selected]=\"isSelected(option)\"\r\n      [disabled]=\"option.disabled\"\r\n      (click)=\"selectOption(option)\">\r\n      {{ option.label }}\r\n    </button>\r\n\r\n    <div *ngIf=\"!filteredOptions.length\" class=\"mb-combobox__empty\">{{ messages.form.noMatches }}</div>\r\n  </div>\r\n</div>\r\n", styles: [".mb-combobox-host{display:block;width:100%}.mb-combobox{position:relative;width:100%}.mb-combobox__trigger{width:100%;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding:0 12px;cursor:pointer;font:inherit}.mb-combobox__trigger--sm{min-height:34px}.mb-combobox__trigger--lg{min-height:46px}.mb-combobox__trigger--invalid{border-color:var(--mb-danger, #dc2626)}.mb-combobox--disabled .mb-combobox__trigger{opacity:.6;cursor:not-allowed}.mb-combobox__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mb-combobox__value--placeholder{color:var(--mb-muted, #64748b)}.mb-combobox__actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.mb-combobox__clear{border:none;background:transparent;color:var(--mb-muted, #64748b);cursor:pointer;font-size:18px;line-height:1}.mb-combobox__chevron{transition:transform .15s ease}.mb-combobox__chevron--open{transform:rotate(180deg)}.mb-combobox__panel{position:absolute;inset-block-start:calc(100% + 4px);inset-inline:0;z-index:40;max-height:280px;overflow:auto;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-surface, #fff);box-shadow:var(--mb-shadow-md, 0 10px 24px rgba(15, 23, 42, .12));padding:6px}.mb-combobox__search{width:100%;min-height:34px;margin-bottom:6px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);padding:0 10px;font:inherit}.mb-combobox__option{width:100%;text-align:start;border:none;background:transparent;border-radius:var(--mb-radius-sm, 8px);padding:10px 12px;cursor:pointer;font:inherit}.mb-combobox__option:hover:not(:disabled),.mb-combobox__option--selected{background:color-mix(in srgb,var(--mb-primary, #2563eb) 10%,#fff);color:var(--mb-primary, #2563eb)}.mb-combobox__option:disabled{opacity:.45;cursor:not-allowed}.mb-combobox__empty{padding:12px;color:var(--mb-muted, #64748b);text-align:center;font-size:13px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], defaultItem: [{
+                type: Input
+            }], defaultItemText: [{
+                type: Input
+            }], valuePrimitive: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], openedChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+function mbGridDefaultState(take = 10) {
+    return { skip: 0, take, sort: [], group: [] };
+}
+function mbGridGetValue(row, field) {
+    if (!row || !field)
+        return undefined;
+    const path = String(field).split('.');
+    let cursor = row;
+    for (const segment of path) {
+        if (cursor == null)
+            return undefined;
+        cursor = cursor[segment];
+    }
+    return cursor;
+}
+function mbGridNormalize(value, ignoreCase = true) {
+    const text = value === null || value === undefined ? '' : String(value);
+    return ignoreCase ? text.trim().toLocaleLowerCase() : text.trim();
+}
+function mbGridApplyFilter(rows, filter, columns = []) {
+    if (!filter || !filter.filters?.length)
+        return rows;
+    return rows.filter((row) => mbGridEvaluateComposite(row, filter, columns));
+}
+function mbGridApplySort(rows, sort = [], columns = []) {
+    if (!sort.length)
+        return rows;
+    return [...rows].sort((a, b) => {
+        for (const descriptor of sort) {
+            const column = columns.find((item) => String(item.field) === String(descriptor.field));
+            const result = column?.compare
+                ? column.compare(a, b, descriptor.dir)
+                : mbGridCompareValues(column?.valueGetter ? column.valueGetter(a, -1) : mbGridGetValue(a, descriptor.field), column?.valueGetter ? column.valueGetter(b, -1) : mbGridGetValue(b, descriptor.field), descriptor.dir);
+            if (result !== 0)
+                return result;
+        }
+        return 0;
+    });
+}
+function mbGridProcess(rows, state, columns = [], expandedGroupKeys = new Set()) {
+    const filtered = mbGridApplyFilter(rows, state.filter, columns);
+    const sorted = mbGridApplySort(filtered, state.sort, columns);
+    const total = sorted.length;
+    const aggregates = mbGridAggregateRows(sorted, columns);
+    if (state.group?.length) {
+        const grouped = mbGridBuildGroupRows(sorted, state.group, columns, expandedGroupKeys);
+        return { data: grouped, total, aggregates };
+    }
+    const paged = sorted.slice(state.skip, state.skip + state.take);
+    return {
+        data: paged.map((dataItem, rowIndex) => ({ kind: 'data', dataItem, rowIndex: state.skip + rowIndex })),
+        total,
+        aggregates,
+    };
+}
+function mbGridFormatValue(row, column, rowIndex, localeOrOptions = 'en-US') {
+    const options = typeof localeOrOptions === 'string'
+        ? { locale: localeOrOptions }
+        : localeOrOptions;
+    const locale = options.locale ?? 'en-US';
+    const value = column.valueGetter ? column.valueGetter(row, rowIndex) : mbGridGetValue(row, column.field);
+    if (column.formatter)
+        return column.formatter(value, row, rowIndex);
+    if (value === null || value === undefined || value === '')
+        return '—';
+    if (column.type === 'boolean')
+        return value ? (options.yes ?? 'Yes') : (options.no ?? 'No');
+    if (column.type === 'enum' && column.enumMap)
+        return column.enumMap[value] ?? String(value);
+    if (column.type === 'number' && typeof value === 'number')
+        return new Intl.NumberFormat(locale).format(value);
+    if (column.type === 'date') {
+        const date = value instanceof Date ? value : new Date(String(value));
+        return Number.isNaN(date.getTime()) ? String(value) : new Intl.DateTimeFormat(locale).format(date);
+    }
+    return String(value);
+}
+function mbGridBuildFilter(filtersByField) {
+    const filters = Object.entries(filtersByField)
+        .filter(([, item]) => item.operator === 'isNull' || item.operator === 'isNotNull' || item.operator === 'isEmpty' || item.operator === 'isNotEmpty' || item.value !== null && item.value !== undefined && String(item.value).trim() !== '')
+        .map(([field, item]) => ({ field, operator: item.operator, value: item.value, ignoreCase: true }));
+    return filters.length ? { logic: 'and', filters } : undefined;
+}
+function mbGridToODataQuery(state) {
+    const params = [`$skip=${state.skip}`, `$top=${state.take}`];
+    if (state.sort?.length) {
+        params.push(`$orderby=${state.sort.map((s) => `${String(s.field)} ${s.dir}`).join(',')}`);
+    }
+    const filter = mbGridFilterToOData(state.filter);
+    if (filter)
+        params.push(`$filter=${encodeURIComponent(filter)}`);
+    return params.join('&');
+}
+function mbGridToLaravelQuery(state) {
+    return {
+        page: Math.floor(state.skip / state.take) + 1,
+        per_page: state.take,
+        sort: state.sort.map((s) => `${s.dir === 'desc' ? '-' : ''}${String(s.field)}`).join(','),
+        filter: state.filter,
+        group: state.group.map((g) => String(g.field)),
+    };
+}
+function mbGridExportCsv(rows, columns, fileName = 'grid-export.csv', localeOrOptions = 'en-US') {
+    const visibleColumns = columns.filter((column) => !column.hidden && column.exportable !== false);
+    const escape = (value) => `"${String(value ?? '').replace(/"/g, '""')}"`;
+    const header = visibleColumns.map((column) => escape(column.title)).join(',');
+    const body = rows
+        .map((row, rowIndex) => visibleColumns.map((column) => escape(mbGridFormatValue(row, column, rowIndex, localeOrOptions))).join(','))
+        .join('\n');
+    const blob = new Blob(['\ufeff', header, '\n', body], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.click();
+    URL.revokeObjectURL(url);
+}
+function mbGridEvaluateComposite(row, filter, columns) {
+    const results = filter.filters.map((item) => {
+        if ('logic' in item)
+            return mbGridEvaluateComposite(row, item, columns);
+        const column = columns.find((candidate) => String(candidate.field) === String(item.field));
+        if (column?.filterPredicate)
+            return column.filterPredicate(row, item);
+        const value = column?.valueGetter ? column.valueGetter(row, -1) : mbGridGetValue(row, item.field);
+        return mbGridEvaluateFilter(value, item.operator, item.value, item.ignoreCase !== false);
+    });
+    return filter.logic === 'or' ? results.some(Boolean) : results.every(Boolean);
+}
+function mbGridEvaluateFilter(value, operator, expected, ignoreCase = true) {
+    const actualText = mbGridNormalize(value, ignoreCase);
+    const expectedText = mbGridNormalize(expected, ignoreCase);
+    const actualNumber = typeof value === 'number' ? value : Number(value);
+    const expectedNumber = Number(expected);
+    switch (operator) {
+        case 'contains': return actualText.includes(expectedText);
+        case 'doesNotContain': return !actualText.includes(expectedText);
+        case 'startsWith': return actualText.startsWith(expectedText);
+        case 'endsWith': return actualText.endsWith(expectedText);
+        case 'eq': return actualText === expectedText;
+        case 'neq': return actualText !== expectedText;
+        case 'gt': return !Number.isNaN(actualNumber) && actualNumber > expectedNumber;
+        case 'gte': return !Number.isNaN(actualNumber) && actualNumber >= expectedNumber;
+        case 'lt': return !Number.isNaN(actualNumber) && actualNumber < expectedNumber;
+        case 'lte': return !Number.isNaN(actualNumber) && actualNumber <= expectedNumber;
+        case 'between': {
+            const range = Array.isArray(expected) ? expected : String(expected ?? '').split(',');
+            const min = Number(range[0]);
+            const max = Number(range[1]);
+            return !Number.isNaN(actualNumber) && !Number.isNaN(min) && !Number.isNaN(max) && actualNumber >= min && actualNumber <= max;
+        }
+        case 'isNull': return value === null || value === undefined;
+        case 'isNotNull': return value !== null && value !== undefined;
+        case 'isEmpty': return actualText.length === 0;
+        case 'isNotEmpty': return actualText.length > 0;
+        default: return true;
+    }
+}
+function mbGridCompareValues(first, second, direction) {
+    const modifier = direction === 'asc' ? 1 : -1;
+    if (first == null && second == null)
+        return 0;
+    if (first == null)
+        return -1 * modifier;
+    if (second == null)
+        return 1 * modifier;
+    if (first instanceof Date || second instanceof Date) {
+        return ((new Date(first).getTime() || 0) - (new Date(second).getTime() || 0)) * modifier;
+    }
+    if (typeof first === 'number' || typeof second === 'number') {
+        return (Number(first) - Number(second)) * modifier;
+    }
+    return mbGridNormalize(first).localeCompare(mbGridNormalize(second), undefined, { numeric: true }) * modifier;
+}
+function mbGridBuildGroupRows(rows, groups, columns, expandedGroupKeys, level = 0, parentKey = '') {
+    if (!groups.length) {
+        return rows.map((dataItem, rowIndex) => ({ kind: 'data', dataItem, rowIndex }));
+    }
+    const [descriptor, ...rest] = groups;
+    const buckets = new Map();
+    for (const row of rows) {
+        const raw = mbGridGetValue(row, descriptor.field);
+        const key = String(raw ?? '');
+        buckets.set(key, [...(buckets.get(key) ?? []), row]);
+    }
+    const sortedKeys = [...buckets.keys()].sort((a, b) => descriptor.dir === 'desc' ? b.localeCompare(a, undefined, { numeric: true }) : a.localeCompare(b, undefined, { numeric: true }));
+    const result = [];
+    for (const key of sortedKeys) {
+        const groupRows = buckets.get(key) ?? [];
+        const groupKey = `${parentKey}${String(descriptor.field)}:${key}|`;
+        const expanded = expandedGroupKeys.has(groupKey) || expandedGroupKeys.size === 0;
+        const groupRow = {
+            kind: 'group',
+            field: descriptor.field,
+            value: key || '—',
+            level,
+            count: groupRows.length,
+            expanded,
+            key: groupKey,
+            aggregates: mbGridAggregateRows(groupRows, columns),
+        };
+        result.push(groupRow);
+        if (expanded) {
+            result.push(...mbGridBuildGroupRows(groupRows, rest, columns, expandedGroupKeys, level + 1, groupKey));
+        }
+    }
+    return result;
+}
+function mbGridAggregateRows(rows, columns) {
+    const result = {};
+    for (const column of columns) {
+        const aggregates = Array.isArray(column.aggregate) ? column.aggregate : column.aggregate ? [column.aggregate] : [];
+        if (!aggregates.length)
+            continue;
+        const values = rows.map((row, index) => column.valueGetter ? column.valueGetter(row, index) : mbGridGetValue(row, column.field)).filter((value) => value !== null && value !== undefined && value !== '');
+        const numbers = values.map(Number).filter((value) => !Number.isNaN(value));
+        const field = String(column.field);
+        result[field] = {};
+        for (const aggregate of aggregates) {
+            result[field][aggregate] = mbGridAggregateValue(aggregate, numbers, values.length);
+        }
+    }
+    return result;
+}
+function mbGridAggregateValue(aggregate, numbers, count) {
+    switch (aggregate) {
+        case 'count': return count;
+        case 'sum': return numbers.reduce((sum, value) => sum + value, 0);
+        case 'avg': return numbers.length ? numbers.reduce((sum, value) => sum + value, 0) / numbers.length : 0;
+        case 'min': return numbers.length ? Math.min(...numbers) : 0;
+        case 'max': return numbers.length ? Math.max(...numbers) : 0;
+        default: return 0;
+    }
+}
+function mbGridFilterToOData(filter) {
+    if (!filter || !filter.filters.length)
+        return '';
+    const parts = filter.filters
+        .map((item) => {
+        if ('logic' in item)
+            return `(${mbGridFilterToOData(item)})`;
+        const field = String(item.field);
+        const value = typeof item.value === 'number' ? item.value : `'${String(item.value ?? '').replace(/'/g, "''")}'`;
+        switch (item.operator) {
+            case 'contains': return `contains(${field},${value})`;
+            case 'doesNotContain': return `not contains(${field},${value})`;
+            case 'startsWith': return `startswith(${field},${value})`;
+            case 'endsWith': return `endswith(${field},${value})`;
+            case 'eq': return `${field} eq ${value}`;
+            case 'neq': return `${field} ne ${value}`;
+            case 'gt': return `${field} gt ${value}`;
+            case 'gte': return `${field} ge ${value}`;
+            case 'lt': return `${field} lt ${value}`;
+            case 'lte': return `${field} le ${value}`;
+            case 'between': return `${field} ge ${Array.isArray(item.value) ? item.value[0] : item.value} and ${field} le ${item.valueTo ?? (Array.isArray(item.value) ? item.value[1] : item.value)}`;
+            case 'isNull': return `${field} eq null`;
+            case 'isNotNull': return `${field} ne null`;
+            case 'isEmpty': return `${field} eq ''`;
+            case 'isNotEmpty': return `${field} ne ''`;
+            default: return '';
+        }
+    })
+        .filter(Boolean);
+    return parts.join(` ${filter.logic} `);
+}
+
+function mbGridDownloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.click();
+    URL.revokeObjectURL(url);
+}
+function mbGridExportJson(rows, columns, fileName = 'grid-export.json') {
+    const visible = columns.filter((column) => !column.hidden && column.exportable !== false);
+    const data = rows.map((row, rowIndex) => {
+        const item = {};
+        for (const column of visible)
+            item[String(column.field)] = column.valueGetter ? column.valueGetter(row, rowIndex) : mbGridGetValue(row, column.field);
+        return item;
+    });
+    mbGridDownloadBlob(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json;charset=utf-8' }), fileName);
+}
+/**
+ * Excel-compatible HTML export. It opens directly in Excel/LibreOffice and keeps Unicode/RTL safely.
+ * For true XLSX, wrap this API with SheetJS/xlsx in the host application to avoid forcing a heavy dependency into mb-ui core.
+ */
+function mbGridExportExcelHtml(rows, columns, fileName = 'grid-export.xls', localeOrOptions = 'en-US', dir = 'ltr') {
+    const visible = columns.filter((column) => !column.hidden && column.exportable !== false);
+    const escape = (value) => String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    const header = `<tr>${visible.map((column) => `<th>${escape(column.title)}</th>`).join('')}</tr>`;
+    const body = rows.map((row, rowIndex) => `<tr>${visible.map((column) => `<td>${escape(mbGridFormatValue(row, column, rowIndex, localeOrOptions))}</td>`).join('')}</tr>`).join('');
+    const html = `<!doctype html><html><head><meta charset="utf-8"></head><body><table dir="${dir}">${header}${body}</table></body></html>`;
+    mbGridDownloadBlob(new Blob(['\ufeff', html], { type: 'application/vnd.ms-excel;charset=utf-8' }), fileName);
+}
+
+class MbGridCellTemplateDirective {
+    templateRef;
+    field = '';
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridCellTemplateDirective, isStandalone: true, selector: "ng-template[mbGridCell]", inputs: { field: ["mbGridCell", "field"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridCell]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['mbGridCell']
+            }] } });
+class MbGridEditTemplateDirective {
+    templateRef;
+    field = '';
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridEditTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridEditTemplateDirective, isStandalone: true, selector: "ng-template[mbGridEdit]", inputs: { field: ["mbGridEdit", "field"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridEditTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridEdit]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['mbGridEdit']
+            }] } });
+class MbGridHeaderTemplateDirective {
+    templateRef;
+    field = '';
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridHeaderTemplateDirective, isStandalone: true, selector: "ng-template[mbGridHeader]", inputs: { field: ["mbGridHeader", "field"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridHeader]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['mbGridHeader']
+            }] } });
+class MbGridFooterTemplateDirective {
+    templateRef;
+    field = '';
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridFooterTemplateDirective, isStandalone: true, selector: "ng-template[mbGridFooter]", inputs: { field: ["mbGridFooter", "field"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridFooter]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['mbGridFooter']
+            }] } });
+class MbGridToolbarTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridToolbarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridToolbarTemplateDirective, isStandalone: true, selector: "ng-template[mbGridToolbar]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridToolbarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridToolbar]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class MbGridDetailTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridDetailTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbGridDetailTemplateDirective, isStandalone: true, selector: "ng-template[mbGridDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridDetailTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mbGridDetail]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class MbGridStateService {
+    save(key, state, columns, selectedKeys = []) {
+        if (!key || typeof localStorage === 'undefined')
+            return;
+        const payload = {
+            state,
+            selectedKeys,
+            columns: columns.map((column) => ({
+                field: column.field,
+                width: column.width,
+                hidden: column.hidden,
+                locked: column.locked,
+                sticky: column.sticky,
+            })),
+            updatedAt: new Date().toISOString(),
+        };
+        localStorage.setItem(this.storageKey(key), JSON.stringify(payload));
+    }
+    load(key) {
+        if (!key || typeof localStorage === 'undefined')
+            return null;
+        const raw = localStorage.getItem(this.storageKey(key));
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    clear(key) {
+        if (!key || typeof localStorage === 'undefined')
+            return;
+        localStorage.removeItem(this.storageKey(key));
+    }
+    storageKey(key) { return `mb-ui:grid:${key}`; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MbGridComponent {
+    cdr;
+    stateStore;
+    uiConfig;
+    messages;
+    data = [];
+    columns = [];
+    loading = false;
+    dataMode = 'client';
+    state = mbGridDefaultState();
+    total = 0;
+    height = null;
+    rowHeight = 44;
+    density = 'comfortable';
+    locale;
+    dir;
+    noRecordsText;
+    loadingText;
+    pageable = true;
+    pageSizeOptions = [10, 20, 50, 100];
+    sortable = true;
+    multiSort = false;
+    filterable = true;
+    filterMode = 'row';
+    groupable = false;
+    selectable = false;
+    selectionMode = 'multiple';
+    rowKey = 'id';
+    selectedKeys = [];
+    resizable = true;
+    reorderable = true;
+    columnMenu = true;
+    showToolbar = true;
+    showSearch = true;
+    showColumnChooser = true;
+    showExport = true;
+    showFooter = false;
+    virtualScroll = false;
+    exportFileName = 'mb-grid-export.csv';
+    excelFileName = 'mb-grid-export.xls';
+    jsonFileName = 'mb-grid-export.json';
+    showExcelExport = true;
+    showJsonExport = true;
+    persistKey = '';
+    autoPersist = false;
+    editable = false;
+    editMode = 'inline';
+    allowAdd = false;
+    allowDelete = false;
+    confirmDelete = false;
+    commandColumnTitle;
+    newItemFactory;
+    expandable = false;
+    detailInitiallyExpanded = false;
+    rowClassName;
+    responsiveColumns = true;
+    stateChange = new EventEmitter();
+    pageChange = new EventEmitter();
+    sortChange = new EventEmitter();
+    filterChange = new EventEmitter();
+    groupChange = new EventEmitter();
+    selectedKeysChange = new EventEmitter();
+    columnResize = new EventEmitter();
+    columnReorder = new EventEmitter();
+    columnVisibilityChange = new EventEmitter();
+    columnLockChange = new EventEmitter();
+    selectionChange = new EventEmitter();
+    edit = new EventEmitter();
+    save = new EventEmitter();
+    cancel = new EventEmitter();
+    remove = new EventEmitter();
+    detailToggle = new EventEmitter();
+    rowClick = new EventEmitter();
+    cellClick = new EventEmitter();
+    cellTemplates;
+    headerTemplates;
+    editTemplates;
+    footerTemplates;
+    toolbarTemplate;
+    detailTemplate;
+    processed = { data: [], total: 0, aggregates: {} };
+    internalColumns = [];
+    globalSearch = '';
+    filtersByField = {};
+    openColumnMenuField = '';
+    resizing;
+    expandedGroupKeys = new Set();
+    expandedDetailKeys = new Set();
+    editingKey = null;
+    editingModel = null;
+    originalModel = null;
+    editingRowIndex = -1;
+    editingIsNew = false;
+    validationErrors = {};
+    mediaQueryLists = new Map();
+    mediaListeners = new Map();
+    textOperators = ['contains', 'doesNotContain', 'startsWith', 'endsWith', 'eq', 'neq', 'isEmpty', 'isNotEmpty'];
+    numericOperators = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'between', 'isNull', 'isNotNull'];
+    booleanOperators = ['eq', 'neq'];
+    constructor(cdr, stateStore, uiConfig, messages) {
+        this.cdr = cdr;
+        this.stateStore = stateStore;
+        this.uiConfig = uiConfig;
+        this.messages = messages;
+    }
+    get effectiveLocale() {
+        return this.locale ?? this.uiConfig.locale;
+    }
+    get effectiveDir() {
+        return this.dir ?? this.uiConfig.direction;
+    }
+    get effectiveCommandColumnTitle() {
+        return this.commandColumnTitle ?? this.messages.commandColumn;
+    }
+    get formatOptions() {
+        return { locale: this.effectiveLocale, yes: this.messages.yes, no: this.messages.no };
+    }
+    ngOnInit() {
+        this.syncMediaQueries();
+    }
+    ngOnDestroy() {
+        for (const [query, listener] of this.mediaListeners) {
+            this.mediaQueryLists.get(query)?.removeEventListener('change', listener);
+        }
+        this.mediaListeners.clear();
+        this.mediaQueryLists.clear();
+    }
+    ngOnChanges(changes) {
+        if (changes['columns']) {
+            this.internalColumns = (this.columns ?? []).map((column) => ({
+                sortable: true,
+                filterable: true,
+                groupable: true,
+                resizable: true,
+                reorderable: true,
+                menu: true,
+                exportable: true,
+                ...column,
+            }));
+            this.applyProjectedTemplates();
+            this.ensureFilterDefaults();
+            this.restorePersistedState();
+            this.syncMediaQueries();
+        }
+        if (changes['state'] && !this.state) {
+            this.state = mbGridDefaultState();
+        }
+        this.reprocess();
+    }
+    ngAfterContentInit() {
+        this.applyProjectedTemplates();
+        this.cellTemplates?.changes.subscribe(() => this.applyProjectedTemplates());
+        this.headerTemplates?.changes.subscribe(() => this.applyProjectedTemplates());
+        this.editTemplates?.changes.subscribe(() => this.applyProjectedTemplates());
+        this.footerTemplates?.changes.subscribe(() => this.applyProjectedTemplates());
+        this.reprocess();
+        this.cdr.markForCheck();
+    }
+    get visibleColumns() {
+        return this.internalColumns.filter((column) => !column.hidden && this.matchesMedia(column));
+    }
+    get lockedStartColumns() {
+        return this.visibleColumns.filter((column) => this.isLockedStart(column));
+    }
+    get lockedEndColumns() {
+        return this.visibleColumns.filter((column) => this.isLockedEnd(column));
+    }
+    get hasFilterRow() {
+        return this.filterable && (this.filterMode === 'row' || this.filterMode === 'both');
+    }
+    get hasColumnMenu() {
+        return this.columnMenu && (this.filterMode === 'menu' || this.filterMode === 'both' || this.showColumnChooser || this.groupable);
+    }
+    get pageIndex() {
+        return Math.floor((this.state?.skip ?? 0) / (this.state?.take || 1));
+    }
+    get pageSize() {
+        return this.state?.take ?? 10;
+    }
+    get effectiveTotal() {
+        return this.dataMode === 'server' ? this.total : this.processed.total;
+    }
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.effectiveTotal / this.pageSize));
+    }
+    get from() {
+        if (!this.effectiveTotal)
+            return 0;
+        return this.pageIndex * this.pageSize + 1;
+    }
+    get to() {
+        return Math.min((this.pageIndex + 1) * this.pageSize, this.effectiveTotal);
+    }
+    get gridStyle() {
+        return { height: typeof this.height === 'number' ? `${this.height}px` : this.height };
+    }
+    get allVisibleRowsSelected() {
+        const dataRows = this.dataRowsFromRendered();
+        return dataRows.length > 0 && dataRows.every((row) => this.selectedKeys.includes(this.getRowKey(row)));
+    }
+    get someVisibleRowsSelected() {
+        const dataRows = this.dataRowsFromRendered();
+        return dataRows.some((row) => this.selectedKeys.includes(this.getRowKey(row))) && !this.allVisibleRowsSelected;
+    }
+    get toolbarContext() {
+        return {
+            state: this.state,
+            total: this.effectiveTotal,
+            selectedKeys: this.selectedKeys,
+            selectedRows: this.selectedRows,
+            add: () => this.createRow(),
+            exportCsv: () => this.exportCsv(),
+            exportExcel: () => this.exportExcel(),
+            reset: () => this.resetState(),
+        };
+    }
+    get selectedRows() {
+        const allRows = this.data ?? [];
+        return allRows.filter((row) => this.selectedKeys.includes(this.getRowKey(row)));
+    }
+    get columnSpan() {
+        return this.visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) + (this.showCommandColumn ? 1 : 0);
+    }
+    get showCommandColumn() {
+        return this.editable || this.allowDelete;
+    }
+    getOperatorLabel(operator) {
+        return this.messages.operatorLabels[operator] ?? operator;
+    }
+    getOperators(column) {
+        if (column.type === 'number' || column.type === 'date')
+            return this.numericOperators;
+        if (column.type === 'boolean')
+            return this.booleanOperators;
+        return this.textOperators;
+    }
+    getColumnStyle(column) {
+        const lockedStart = this.isLockedStart(column);
+        const lockedEnd = this.isLockedEnd(column);
+        return {
+            width: this.toCssSize(column.width),
+            minWidth: this.toCssSize(column.minWidth),
+            maxWidth: this.toCssSize(column.maxWidth),
+            position: lockedStart || lockedEnd ? 'sticky' : null,
+            insetInlineStart: lockedStart ? `${this.getLockedOffset(column, 'start')}px` : null,
+            insetInlineEnd: lockedEnd ? `${this.getLockedOffset(column, 'end')}px` : null,
+            zIndex: lockedStart || lockedEnd ? '6' : null,
+        };
+    }
+    getColumnClass(column) {
+        return {
+            'mb-grid__cell--locked-start': this.isLockedStart(column),
+            'mb-grid__cell--locked-end': this.isLockedEnd(column),
+        };
+    }
+    isLockedStart(column) {
+        return !!column.locked || column.sticky === 'start';
+    }
+    isLockedEnd(column) {
+        return column.sticky === 'end';
+    }
+    matchesMedia(column) {
+        if (!this.responsiveColumns || !column.media || typeof window === 'undefined') {
+            return true;
+        }
+        return this.mediaQueryLists.get(column.media)?.matches ?? true;
+    }
+    pagerInfoText() {
+        return this.messages.pagerInfo(this.from, this.to, this.effectiveTotal);
+    }
+    getSortIndex(column) {
+        return (this.state.sort ?? []).findIndex((item) => String(item.field) === String(column.field));
+    }
+    getSortDirection(column) {
+        return this.state.sort?.find((item) => String(item.field) === String(column.field))?.dir ?? '';
+    }
+    getValue(row, column, rowIndex = -1) {
+        return column.valueGetter ? column.valueGetter(row, rowIndex) : mbGridGetValue(row, column.field);
+    }
+    formatCell(row, column, rowIndex) {
+        return mbGridFormatValue(row, column, rowIndex, this.formatOptions);
+    }
+    getCellClass(row, column, rowIndex) {
+        if (!column.className)
+            return null;
+        if (typeof column.className === 'function') {
+            return column.className(row, this.getValue(row, column, rowIndex), rowIndex);
+        }
+        return column.className;
+    }
+    getCellTemplate(column) {
+        return column.cellTemplate ?? null;
+    }
+    getHeaderTemplate(column) {
+        return column.headerTemplate ?? null;
+    }
+    getFooterTemplate(column) {
+        return column.footerTemplate ?? null;
+    }
+    getRowKey(row) {
+        if (typeof this.rowKey === 'function')
+            return this.rowKey(row);
+        return mbGridGetValue(row, this.rowKey);
+    }
+    toggleSort(column, event) {
+        if (!this.sortable || column.sortable === false)
+            return;
+        const field = String(column.field);
+        const current = [...(this.state.sort ?? [])];
+        const index = current.findIndex((item) => String(item.field) === field);
+        const isMulti = this.multiSort && !!event?.shiftKey;
+        const base = isMulti ? current : index >= 0 ? [current[index]] : [];
+        const targetIndex = base.findIndex((item) => String(item.field) === field);
+        if (targetIndex < 0) {
+            base.push({ field: column.field, dir: 'asc' });
+        }
+        else if (base[targetIndex].dir === 'asc') {
+            base[targetIndex] = { ...base[targetIndex], dir: 'desc' };
+        }
+        else {
+            base.splice(targetIndex, 1);
+        }
+        this.setState({ ...this.state, sort: base, skip: 0 });
+        this.sortChange.emit({ sort: base });
+    }
+    setFilterValue(column, value) {
+        const field = String(column.field);
+        const current = this.filtersByField[field] ?? { operator: this.defaultOperator(column), value: '' };
+        this.filtersByField = { ...this.filtersByField, [field]: { ...current, value } };
+        this.applyFilters();
+    }
+    setFilterOperator(column, operator) {
+        const field = String(column.field);
+        const current = this.filtersByField[field] ?? { operator, value: '' };
+        this.filtersByField = { ...this.filtersByField, [field]: { ...current, operator } };
+        this.applyFilters();
+    }
+    clearFilter(column) {
+        if (!column) {
+            this.filtersByField = {};
+        }
+        else {
+            const clone = { ...this.filtersByField };
+            delete clone[String(column.field)];
+            this.filtersByField = clone;
+        }
+        this.applyFilters();
+    }
+    applyGlobalSearch(value) {
+        this.globalSearch = value;
+        const filters = this.visibleColumns
+            .filter((column) => column.filterable !== false && column.type !== 'custom')
+            .map((column) => ({ field: column.field, operator: 'contains', value, ignoreCase: true }));
+        const columnFilter = mbGridBuildFilter(this.filtersByField);
+        const globalFilter = value?.trim()
+            ? { logic: 'or', filters }
+            : undefined;
+        const filter = columnFilter && globalFilter
+            ? { logic: 'and', filters: [columnFilter, globalFilter] }
+            : columnFilter ?? globalFilter;
+        this.setState({ ...this.state, filter, skip: 0 });
+        this.filterChange.emit({ filter });
+    }
+    changePage(pageIndex) {
+        const nextPage = Math.min(Math.max(pageIndex, 0), this.pageCount - 1);
+        const state = { ...this.state, skip: nextPage * this.pageSize };
+        this.setState(state);
+        this.pageChange.emit({ pageIndex: nextPage, pageSize: this.pageSize, skip: state.skip, take: state.take });
+    }
+    changePageSize(value) {
+        const take = Number(value);
+        const state = { ...this.state, skip: 0, take };
+        this.setState(state);
+        this.pageChange.emit({ pageIndex: 0, pageSize: take, skip: 0, take });
+    }
+    toggleRow(row, event) {
+        event?.stopPropagation();
+        const key = this.getRowKey(row);
+        const exists = this.selectedKeys.includes(key);
+        const next = this.selectionMode === 'single'
+            ? exists ? [] : [key]
+            : exists ? this.selectedKeys.filter((item) => item !== key) : [...this.selectedKeys, key];
+        this.selectedKeys = next;
+        this.selectedKeysChange.emit(next);
+        this.selectionChange.emit({ selectedKeys: next, selectedRows: this.selectedRows });
+    }
+    toggleAllVisible(event) {
+        event?.stopPropagation();
+        const visible = this.dataRowsFromRendered().map((row) => this.getRowKey(row));
+        const allSelected = visible.every((key) => this.selectedKeys.includes(key));
+        this.selectedKeys = allSelected
+            ? this.selectedKeys.filter((key) => !visible.includes(key))
+            : Array.from(new Set([...this.selectedKeys, ...visible]));
+        this.selectedKeysChange.emit(this.selectedKeys);
+        this.selectionChange.emit({ selectedKeys: this.selectedKeys, selectedRows: this.selectedRows });
+    }
+    isSelected(row) {
+        return this.selectedKeys.includes(this.getRowKey(row));
+    }
+    onRowClick(row, rowIndex) {
+        this.rowClick.emit({ row, rowIndex });
+    }
+    onCellClick(row, column, rowIndex) {
+        this.cellClick.emit({ row, column, value: this.getValue(row, column, rowIndex), rowIndex });
+    }
+    toggleColumnMenu(column, event) {
+        event.stopPropagation();
+        const field = String(column.field);
+        this.openColumnMenuField = this.openColumnMenuField === field ? '' : field;
+    }
+    hideColumn(column) {
+        column.hidden = true;
+        this.openColumnMenuField = '';
+        this.columnVisibilityChange.emit({ column, field: column.field, visible: false, columns: this.internalColumns });
+        this.persistState();
+        this.cdr.markForCheck();
+    }
+    showColumn(column, visible) {
+        column.hidden = !visible;
+        this.columnVisibilityChange.emit({ column, field: column.field, visible, columns: this.internalColumns });
+        this.persistState();
+        this.cdr.markForCheck();
+    }
+    toggleLock(column) {
+        column.locked = !column.locked;
+        column.sticky = column.locked ? 'start' : false;
+        this.columnLockChange.emit({ column, field: column.field, locked: !!column.locked, columns: this.internalColumns });
+        this.persistState();
+        this.cdr.markForCheck();
+    }
+    resetColumns() {
+        this.internalColumns = (this.columns ?? []).map((column) => ({ ...column }));
+        this.applyProjectedTemplates();
+        this.cdr.markForCheck();
+    }
+    toggleGroup(column) {
+        if (!this.groupable || column.groupable === false)
+            return;
+        const field = String(column.field);
+        const exists = this.state.group?.some((group) => String(group.field) === field);
+        const group = exists
+            ? this.state.group.filter((item) => String(item.field) !== field)
+            : [...(this.state.group ?? []), { field: column.field, dir: 'asc' }];
+        this.setState({ ...this.state, group, skip: 0 });
+        this.groupChange.emit({ group });
+        this.openColumnMenuField = '';
+    }
+    removeGroup(group) {
+        const next = this.state.group.filter((item) => String(item.field) !== String(group.field));
+        this.setState({ ...this.state, group: next, skip: 0 });
+        this.groupChange.emit({ group: next });
+    }
+    toggleGroupRow(row) {
+        if (row.kind !== 'group')
+            return;
+        if (this.expandedGroupKeys.has(row.key))
+            this.expandedGroupKeys.delete(row.key);
+        else
+            this.expandedGroupKeys.add(row.key);
+        this.reprocess();
+    }
+    startResize(column, event) {
+        if (!this.resizable || column.resizable === false)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const header = event.target.closest('th');
+        this.resizing = { field: String(column.field), startX: event.clientX, startWidth: header?.offsetWidth ?? 120 };
+        const move = (moveEvent) => this.resizeColumn(moveEvent);
+        const up = () => {
+            document.removeEventListener('mousemove', move);
+            document.removeEventListener('mouseup', up);
+            this.resizing = undefined;
+        };
+        document.addEventListener('mousemove', move);
+        document.addEventListener('mouseup', up);
+    }
+    dropColumn(event) {
+        if (!this.reorderable || event.previousIndex === event.currentIndex)
+            return;
+        moveItemInArray(this.internalColumns, event.previousIndex, event.currentIndex);
+        this.columnReorder.emit({ previousIndex: event.previousIndex, currentIndex: event.currentIndex, columns: this.internalColumns });
+        this.persistState();
+        this.cdr.markForCheck();
+    }
+    exportCsv() {
+        const rows = this.exportRows();
+        mbGridExportCsv(rows, this.visibleColumns, this.exportFileName, this.formatOptions);
+    }
+    exportExcel() {
+        mbGridExportExcelHtml(this.exportRows(), this.visibleColumns, this.excelFileName, this.formatOptions, this.effectiveDir);
+    }
+    exportJson() {
+        mbGridExportJson(this.exportRows(), this.visibleColumns, this.jsonFileName);
+    }
+    resetState() {
+        this.globalSearch = '';
+        this.filtersByField = {};
+        this.expandedGroupKeys.clear();
+        this.expandedDetailKeys.clear();
+        this.cancelEditInternal(false);
+        this.setState(mbGridDefaultState(this.pageSize));
+    }
+    createRow() {
+        if (!this.editable || !this.allowAdd)
+            return;
+        const row = this.newItemFactory ? this.newItemFactory() : {};
+        const key = `__new_${Date.now()}`;
+        this.editingKey = key;
+        this.editingModel = this.cloneRow(row);
+        this.originalModel = null;
+        this.editingRowIndex = 0;
+        this.editingIsNew = true;
+        this.validationErrors = {};
+        this.cdr.markForCheck();
+    }
+    startEdit(row, rowIndex, event) {
+        event?.stopPropagation();
+        if (!this.editable || this.editMode === 'none')
+            return;
+        const key = this.getRowKey(row);
+        this.editingKey = key;
+        this.editingModel = this.cloneRow(row);
+        this.originalModel = this.cloneRow(row);
+        this.editingRowIndex = rowIndex;
+        this.editingIsNew = false;
+        this.validationErrors = {};
+        this.edit.emit({ row, rowIndex, key });
+        this.cdr.markForCheck();
+    }
+    saveEdit(event) {
+        event?.stopPropagation();
+        if (!this.editingModel || this.editingKey === null)
+            return;
+        if (!this.validateEditingModel()) {
+            this.cdr.markForCheck();
+            return;
+        }
+        const row = this.cloneRow(this.editingModel);
+        const key = this.editingKey;
+        this.save.emit({ row, originalRow: this.originalModel, rowIndex: this.editingRowIndex, key, isNew: this.editingIsNew });
+        this.cancelEditInternal(false);
+        this.cdr.markForCheck();
+    }
+    cancelEditRow(event) {
+        event?.stopPropagation();
+        if (!this.editingModel || this.editingKey === null)
+            return;
+        this.cancel.emit({ row: this.editingModel, originalRow: this.originalModel, rowIndex: this.editingRowIndex, key: this.editingKey, isNew: this.editingIsNew });
+        this.cancelEditInternal(true);
+    }
+    removeRow(row, rowIndex, event) {
+        event?.stopPropagation();
+        if (this.confirmDelete && !confirm(this.messages.deleteConfirm))
+            return;
+        this.remove.emit({ row, rowIndex, key: this.getRowKey(row) });
+    }
+    isEditing(row) {
+        return this.editingKey !== null && this.getRowKey(row) === this.editingKey;
+    }
+    isNewRowEditing() {
+        return this.editingIsNew && !!this.editingModel;
+    }
+    setEditValue(column, value) {
+        if (!this.editingModel)
+            return;
+        if (column.valueSetter) {
+            this.editingModel = column.valueSetter(this.editingModel, value, this.editingRowIndex);
+        }
+        else {
+            this.setNestedValue(this.editingModel, String(column.field), value);
+        }
+        delete this.validationErrors[String(column.field)];
+        this.cdr.markForCheck();
+    }
+    getEditValue(column) {
+        return this.editingModel ? this.getValue(this.editingModel, column, this.editingRowIndex) : undefined;
+    }
+    canEditColumn(column) {
+        return this.editable && column.editable !== false && column.type !== 'custom';
+    }
+    getEditorType(column) {
+        if (column.editor)
+            return column.editor;
+        if (column.type === 'number')
+            return 'number';
+        if (column.type === 'date')
+            return 'date';
+        if (column.type === 'boolean')
+            return 'checkbox';
+        if (column.type === 'enum')
+            return 'select';
+        return 'text';
+    }
+    toggleDetail(row, rowIndex, event) {
+        event?.stopPropagation();
+        const key = this.getRowKey(row);
+        const expanded = !this.expandedDetailKeys.has(key);
+        if (expanded)
+            this.expandedDetailKeys.add(key);
+        else
+            this.expandedDetailKeys.delete(key);
+        this.detailToggle.emit({ row, rowIndex, key, expanded });
+        this.cdr.markForCheck();
+    }
+    isDetailExpanded(row) {
+        const key = this.getRowKey(row);
+        return this.detailInitiallyExpanded || this.expandedDetailKeys.has(key);
+    }
+    getRowClass(row, rowIndex) {
+        if (!this.rowClassName)
+            return null;
+        return typeof this.rowClassName === 'function' ? this.rowClassName(row, rowIndex) : this.rowClassName;
+    }
+    trackColumn(_, column) {
+        return String(column.field);
+    }
+    trackRow(_, row) {
+        return row.kind === 'group' ? row.key : this.getRowKey(row.dataItem);
+    }
+    toCssSize(value) {
+        if (value === undefined || value === null || value === '')
+            return null;
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    getLockedOffset(column, side) {
+        const columns = side === 'start' ? this.lockedStartColumns : this.lockedEndColumns;
+        let offset = 0;
+        for (const item of columns) {
+            if (String(item.field) === String(column.field))
+                break;
+            offset += this.resolveColumnWidth(item);
+        }
+        return offset;
+    }
+    resolveColumnWidth(column) {
+        if (typeof column.width === 'number')
+            return column.width;
+        if (typeof column.width === 'string' && column.width.endsWith('px')) {
+            return Number.parseFloat(column.width);
+        }
+        if (typeof column.minWidth === 'number')
+            return column.minWidth;
+        return 120;
+    }
+    syncMediaQueries() {
+        if (!this.responsiveColumns || typeof window === 'undefined')
+            return;
+        const queries = new Set(this.internalColumns
+            .map((column) => column.media)
+            .filter((media) => !!media));
+        for (const query of queries) {
+            if (this.mediaQueryLists.has(query))
+                continue;
+            const mediaQueryList = window.matchMedia(query);
+            const listener = () => {
+                this.cdr.markForCheck();
+            };
+            mediaQueryList.addEventListener('change', listener);
+            this.mediaQueryLists.set(query, mediaQueryList);
+            this.mediaListeners.set(query, listener);
+        }
+    }
+    setState(state) {
+        this.state = { ...state, sort: state.sort ?? [], group: state.group ?? [] };
+        this.stateChange.emit(this.state);
+        this.persistState();
+        this.reprocess();
+    }
+    reprocess() {
+        const safeState = this.state ?? mbGridDefaultState();
+        if (this.dataMode === 'server') {
+            this.processed = {
+                data: (this.data ?? []).map((dataItem, rowIndex) => ({ kind: 'data', dataItem, rowIndex: safeState.skip + rowIndex })),
+                total: this.total,
+                aggregates: {},
+            };
+        }
+        else {
+            this.processed = mbGridProcess(this.data ?? [], safeState, this.internalColumns, this.expandedGroupKeys);
+        }
+        this.cdr.markForCheck();
+    }
+    applyFilters() {
+        const columnFilter = mbGridBuildFilter(this.filtersByField);
+        if (this.globalSearch) {
+            this.applyGlobalSearch(this.globalSearch);
+            return;
+        }
+        this.setState({ ...this.state, filter: columnFilter, skip: 0 });
+        this.filterChange.emit({ filter: columnFilter });
+    }
+    defaultOperator(column) {
+        if (column.type === 'number' || column.type === 'date' || column.type === 'boolean')
+            return 'eq';
+        return 'contains';
+    }
+    ensureFilterDefaults() {
+        const next = { ...this.filtersByField };
+        for (const column of this.internalColumns) {
+            const field = String(column.field);
+            next[field] ??= { operator: this.defaultOperator(column), value: '' };
+        }
+        this.filtersByField = next;
+    }
+    applyProjectedTemplates() {
+        for (const column of this.internalColumns) {
+            const field = String(column.field);
+            const cell = this.cellTemplates?.find((item) => item.field === field);
+            const header = this.headerTemplates?.find((item) => item.field === field);
+            const footer = this.footerTemplates?.find((item) => item.field === field);
+            const edit = this.editTemplates?.find((item) => item.field === field);
+            if (cell)
+                column.cellTemplate = cell.templateRef;
+            if (header)
+                column.headerTemplate = header.templateRef;
+            if (footer)
+                column.footerTemplate = footer.templateRef;
+            if (edit)
+                column.editTemplate = edit.templateRef;
+        }
+    }
+    resizeColumn(event) {
+        if (!this.resizing)
+            return;
+        const delta = this.effectiveDir === 'rtl' ? this.resizing.startX - event.clientX : event.clientX - this.resizing.startX;
+        const width = Math.max(56, this.resizing.startWidth + delta);
+        const column = this.internalColumns.find((item) => String(item.field) === this.resizing?.field);
+        if (!column)
+            return;
+        column.width = width;
+        this.columnResize.emit({ column, field: column.field, width });
+        this.cdr.markForCheck();
+    }
+    exportRows() {
+        if (this.dataMode === 'server')
+            return this.data ?? [];
+        const safeState = { ...this.state, skip: 0, take: Number.MAX_SAFE_INTEGER };
+        return mbGridProcess(this.data ?? [], safeState, this.internalColumns, this.expandedGroupKeys)
+            .data
+            .filter((row) => row.kind === 'data')
+            .map((row) => row.dataItem);
+    }
+    validateEditingModel() {
+        if (!this.editingModel)
+            return true;
+        const errors = {};
+        for (const column of this.visibleColumns) {
+            if (!this.canEditColumn(column))
+                continue;
+            const value = this.getValue(this.editingModel, column, this.editingRowIndex);
+            const field = String(column.field);
+            if (column.required && (value === null || value === undefined || String(value).trim() === '')) {
+                errors[field] = this.messages.fieldRequired(column.title);
+                continue;
+            }
+            const custom = column.validator?.(value, this.editingModel, column);
+            if (custom)
+                errors[field] = custom;
+        }
+        this.validationErrors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    cloneRow(row) {
+        if (typeof structuredClone === 'function')
+            return structuredClone(row);
+        return JSON.parse(JSON.stringify(row));
+    }
+    setNestedValue(row, path, value) {
+        const parts = path.split('.');
+        let cursor = row;
+        for (let index = 0; index < parts.length - 1; index++) {
+            const part = parts[index];
+            cursor[part] ??= {};
+            cursor = cursor[part];
+        }
+        cursor[parts[parts.length - 1]] = value;
+    }
+    cancelEditInternal(mark = true) {
+        this.editingKey = null;
+        this.editingModel = null;
+        this.originalModel = null;
+        this.editingRowIndex = -1;
+        this.editingIsNew = false;
+        this.validationErrors = {};
+        if (mark)
+            this.cdr.markForCheck();
+    }
+    restorePersistedState() {
+        if (!this.persistKey)
+            return;
+        const saved = this.stateStore.load(this.persistKey);
+        if (!saved)
+            return;
+        this.state = saved.state ?? this.state;
+        this.selectedKeys = saved.selectedKeys ?? this.selectedKeys;
+        for (const savedColumn of saved.columns ?? []) {
+            const target = this.internalColumns.find((column) => String(column.field) === String(savedColumn.field));
+            if (!target)
+                continue;
+            target.width = savedColumn.width ?? target.width;
+            target.hidden = savedColumn.hidden ?? target.hidden;
+            target.locked = savedColumn.locked ?? target.locked;
+            target.sticky = savedColumn.sticky ?? target.sticky;
+        }
+    }
+    persistState() {
+        if (!this.autoPersist || !this.persistKey)
+            return;
+        this.stateStore.save(this.persistKey, this.state, this.internalColumns, this.selectedKeys);
+    }
+    dataRowsFromRendered() {
+        return this.processed.data.filter((row) => row.kind === 'data').map((row) => row.dataItem);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MbGridStateService }, { token: MB_UI_CONFIG }, { token: MB_GRID_MESSAGES }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbGridComponent, isStandalone: true, selector: "mb-grid", inputs: { data: "data", columns: "columns", loading: "loading", dataMode: "dataMode", state: "state", total: "total", height: "height", rowHeight: "rowHeight", density: "density", locale: "locale", dir: "dir", noRecordsText: "noRecordsText", loadingText: "loadingText", pageable: "pageable", pageSizeOptions: "pageSizeOptions", sortable: "sortable", multiSort: "multiSort", filterable: "filterable", filterMode: "filterMode", groupable: "groupable", selectable: "selectable", selectionMode: "selectionMode", rowKey: "rowKey", selectedKeys: "selectedKeys", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", showToolbar: "showToolbar", showSearch: "showSearch", showColumnChooser: "showColumnChooser", showExport: "showExport", showFooter: "showFooter", virtualScroll: "virtualScroll", exportFileName: "exportFileName", excelFileName: "excelFileName", jsonFileName: "jsonFileName", showExcelExport: "showExcelExport", showJsonExport: "showJsonExport", persistKey: "persistKey", autoPersist: "autoPersist", editable: "editable", editMode: "editMode", allowAdd: "allowAdd", allowDelete: "allowDelete", confirmDelete: "confirmDelete", commandColumnTitle: "commandColumnTitle", newItemFactory: "newItemFactory", expandable: "expandable", detailInitiallyExpanded: "detailInitiallyExpanded", rowClassName: "rowClassName", responsiveColumns: "responsiveColumns" }, outputs: { stateChange: "stateChange", pageChange: "pageChange", sortChange: "sortChange", filterChange: "filterChange", groupChange: "groupChange", selectedKeysChange: "selectedKeysChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockChange: "columnLockChange", selectionChange: "selectionChange", edit: "edit", save: "save", cancel: "cancel", remove: "remove", detailToggle: "detailToggle", rowClick: "rowClick", cellClick: "cellClick" }, queries: [{ propertyName: "toolbarTemplate", first: true, predicate: MbGridToolbarTemplateDirective, descendants: true }, { propertyName: "detailTemplate", first: true, predicate: MbGridDetailTemplateDirective, descendants: true }, { propertyName: "cellTemplates", predicate: MbGridCellTemplateDirective }, { propertyName: "headerTemplates", predicate: MbGridHeaderTemplateDirective }, { propertyName: "editTemplates", predicate: MbGridEditTemplateDirective }, { propertyName: "footerTemplates", predicate: MbGridFooterTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-grid\" [attr.dir]=\"effectiveDir\" [ngClass]=\"['mb-grid--' + density, loading ? 'mb-grid--loading' : '']\" [ngStyle]=\"gridStyle\">\n  <div *ngIf=\"showToolbar\" class=\"mb-grid__toolbar\">\n    <ng-container *ngIf=\"toolbarTemplate?.templateRef as toolbarTpl; else defaultToolbar\">\n      <ng-container [ngTemplateOutlet]=\"toolbarTpl\" [ngTemplateOutletContext]=\"toolbarContext\"></ng-container>\n    </ng-container>\n\n    <ng-template #defaultToolbar>\n      <div class=\"mb-grid__toolbar-start\">\n        <div *ngIf=\"groupable\" class=\"mb-grid__group-panel\">\n          <span class=\"mb-grid__group-label\">{{ messages.groupLabel }}</span>\n          <button\n            *ngFor=\"let group of state.group\"\n            type=\"button\"\n            class=\"mb-grid__group-chip\"\n            (click)=\"removeGroup(group)\">\n            {{ group.field }} \u00D7\n          </button>\n          <span *ngIf=\"!state.group.length\" class=\"mb-grid__group-hint\">{{ messages.groupHint }}</span>\n        </div>\n      </div>\n\n      <div class=\"mb-grid__toolbar-end\">\n        <button *ngIf=\"editable && allowAdd\" type=\"button\" class=\"mb-grid__tool-button mb-grid__tool-button--primary\" (click)=\"createRow()\">{{ messages.addRow }}</button>\n        <input\n          *ngIf=\"showSearch\"\n          class=\"mb-grid__search\"\n          [ngModel]=\"globalSearch\"\n          (ngModelChange)=\"applyGlobalSearch($event)\"\n          [placeholder]=\"messages.searchPlaceholder\" />\n\n        <div *ngIf=\"showColumnChooser\" class=\"mb-grid__chooser\">\n          <button type=\"button\" class=\"mb-grid__tool-button\" (click)=\"openColumnMenuField = openColumnMenuField === '__chooser' ? '' : '__chooser'\">\n            {{ messages.columns }}\n          </button>\n          <div *ngIf=\"openColumnMenuField === '__chooser'\" class=\"mb-grid__chooser-menu\" (click)=\"$event.stopPropagation()\">\n            <label *ngFor=\"let column of internalColumns\" class=\"mb-grid__chooser-option\">\n              <input type=\"checkbox\" [checked]=\"!column.hidden\" (change)=\"showColumn(column, $any($event.target).checked)\" />\n              <span>{{ column.title }}</span>\n            </label>\n            <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"resetColumns()\">{{ messages.resetColumns }}</button>\n          </div>\n        </div>\n\n        <button *ngIf=\"showExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportCsv()\">{{ messages.exportCsv }}</button>\n        <button *ngIf=\"showExport && showExcelExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportExcel()\">{{ messages.exportExcel }}</button>\n        <button *ngIf=\"showExport && showJsonExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportJson()\">{{ messages.exportJson }}</button>\n        <button type=\"button\" class=\"mb-grid__tool-button\" (click)=\"resetState()\">{{ messages.reset }}</button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div *ngIf=\"loading\" class=\"mb-grid__loading\" aria-live=\"polite\">\n    <span class=\"mb-grid__spinner\"></span>\n    <span>{{ loadingText || messages.loading }}</span>\n  </div>\n\n  <div class=\"mb-grid__scroll\">\n    <table class=\"mb-grid__table\">\n      <thead>\n        <tr\n          class=\"mb-grid__header-row\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          [cdkDropListDisabled]=\"!reorderable\"\n          [cdkDropListData]=\"visibleColumns\"\n          (cdkDropListDropped)=\"dropColumn($event)\">\n          <th *ngIf=\"expandable\" class=\"mb-grid__select-cell mb-grid__header-cell\"></th>\n            <th *ngIf=\"selectable\" class=\"mb-grid__select-cell mb-grid__header-cell\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleRowsSelected\"\n              [indeterminate]=\"someVisibleRowsSelected\"\n              (change)=\"toggleAllVisible($event)\"\n              [attr.aria-label]=\"messages.selectAllRows\" />\n          </th>\n\n          <th\n            *ngFor=\"let column of visibleColumns; let columnIndex = index; trackBy: trackColumn\"\n            cdkDrag\n            class=\"mb-grid__header-cell\"\n            [ngClass]=\"['mb-grid__cell--' + (column.headerAlign || column.align || 'start'), column.sortable === false ? '' : 'mb-grid__header-cell--sortable', getColumnClass(column)]\"\n            [ngStyle]=\"getColumnStyle(column)\">\n            <div class=\"mb-grid__header-content\" (click)=\"toggleSort(column, $event)\">\n              <ng-container *ngIf=\"getHeaderTemplate(column) as headerTpl; else defaultHeader\">\n                <ng-container [ngTemplateOutlet]=\"headerTpl\" [ngTemplateOutletContext]=\"{ $implicit: column, column: column }\"></ng-container>\n              </ng-container>\n              <ng-template #defaultHeader>\n                <span class=\"mb-grid__header-title\">{{ column.title }}</span>\n              </ng-template>\n\n              <span *ngIf=\"getSortDirection(column) as dir\" class=\"mb-grid__sort\">\n                <span>{{ dir === 'asc' ? '\u2191' : '\u2193' }}</span>\n                <small *ngIf=\"multiSort && getSortIndex(column) >= 0\">{{ getSortIndex(column) + 1 }}</small>\n              </span>\n            </div>\n\n            <button\n              *ngIf=\"hasColumnMenu && column.menu !== false\"\n              type=\"button\"\n              class=\"mb-grid__column-menu-button\"\n              [attr.aria-label]=\"messages.columnMenu\"\n              (click)=\"toggleColumnMenu(column, $event)\">\u22EE</button>\n\n            <span\n              *ngIf=\"resizable && column.resizable !== false\"\n              class=\"mb-grid__resize-handle\"\n              (mousedown)=\"startResize(column, $event)\"></span>\n\n            <div *ngIf=\"openColumnMenuField === column.field.toString()\" class=\"mb-grid__column-menu\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleSort(column)\">{{ messages.sort }}</button>\n              <button *ngIf=\"groupable && column.groupable !== false\" type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleGroup(column)\">\n                {{ state.group.length && state.group[0].field === column.field ? messages.removeGroup : messages.groupByColumn }}\n              </button>\n\n              <div *ngIf=\"filterable && column.filterable !== false && (filterMode === 'menu' || filterMode === 'both')\" class=\"mb-grid__menu-filter\">\n                <label>{{ messages.filter }}</label>\n                <select [ngModel]=\"filtersByField[column.field.toString()].operator\" (ngModelChange)=\"setFilterOperator(column, $event)\">\n                  <option *ngFor=\"let operator of getOperators(column)\" [ngValue]=\"operator\">{{ getOperatorLabel(operator) }}</option>\n                </select>\n                <input\n                  [type]=\"column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'\"\n                  [ngModel]=\"filtersByField[column.field.toString()].value\"\n                  (ngModelChange)=\"setFilterValue(column, $event)\"\n                  [placeholder]=\"messages.filterValuePlaceholder\" />\n                <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"clearFilter(column)\">{{ messages.clearFilter }}</button>\n              </div>\n\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleLock(column)\">{{ column.locked ? messages.unlockColumn : messages.lockColumn }}</button>\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"hideColumn(column)\">{{ messages.hideColumn }}</button>\n            </div>\n          </th>\n\n          <th *ngIf=\"showCommandColumn\" class=\"mb-grid__header-cell mb-grid__command-cell\">{{ effectiveCommandColumnTitle }}</th>\n        </tr>\n\n        <tr *ngIf=\"hasFilterRow\" class=\"mb-grid__filter-row\">\n          <th *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></th>\n          <th *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></th>\n          <th *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__filter-cell\" [ngClass]=\"getColumnClass(column)\" [ngStyle]=\"getColumnStyle(column)\">\n            <div *ngIf=\"column.filterable !== false\" class=\"mb-grid__filter-control\">\n              <select\n                class=\"mb-grid__filter-operator\"\n                [ngModel]=\"filtersByField[column.field.toString()].operator\"\n                (ngModelChange)=\"setFilterOperator(column, $event)\">\n                <option *ngFor=\"let operator of getOperators(column)\" [ngValue]=\"operator\">{{ getOperatorLabel(operator) }}</option>\n              </select>\n              <input\n                class=\"mb-grid__filter-input\"\n                [type]=\"column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'\"\n                [placeholder]=\"column.title\"\n                [ngModel]=\"filtersByField[column.field.toString()].value\"\n                (ngModelChange)=\"setFilterValue(column, $event)\" />\n            </div>\n          </th>\n          <th *ngIf=\"showCommandColumn\" class=\"mb-grid__command-cell\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngIf=\"!processed.data.length && !loading\" class=\"mb-grid__empty-row\">\n          <td class=\"mb-grid__empty\" [attr.colspan]=\"columnSpan\">{{ noRecordsText || messages.noRecords }}</td>\n        </tr>\n\n        <tr *ngIf=\"isNewRowEditing() && editingModel\" class=\"mb-grid__row mb-grid__row--editing mb-grid__row--new\">\n          <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__cell\">\n            <ng-container [ngTemplateOutlet]=\"editorTemplate\" [ngTemplateOutletContext]=\"{ column: column, row: editingModel, rowIndex: editingRowIndex }\"></ng-container>\n          </td>\n          <td *ngIf=\"showCommandColumn\" class=\"mb-grid__cell mb-grid__command-cell\">\n            <button type=\"button\" class=\"mb-grid__command\" (click)=\"saveEdit($event)\">{{ messages.save }}</button>\n            <button type=\"button\" class=\"mb-grid__command\" (click)=\"cancelEditRow($event)\">{{ messages.cancel }}</button>\n          </td>\n        </tr>\n\n        <ng-container *ngFor=\"let row of processed.data; trackBy: trackRow\">\n          <tr *ngIf=\"row.kind === 'group'\" class=\"mb-grid__group-row\" (click)=\"toggleGroupRow(row)\">\n            <td class=\"mb-grid__group-cell\" [attr.colspan]=\"columnSpan\">\n              <span class=\"mb-grid__group-toggle\">{{ row.expanded ? '\u25BE' : '\u25B8' }}</span>\n              <span [style.padding-inline-start.px]=\"row.level * 18\"></span>\n              <strong>{{ row.field }}:</strong>\n              <span>{{ row.value }}</span>\n              <small>({{ row.count }})</small>\n            </td>\n          </tr>\n\n          <tr\n            *ngIf=\"row.kind === 'data'\"\n            class=\"mb-grid__row\"\n            [class.mb-grid__row--selected]=\"isSelected(row.dataItem)\"\n            [class.mb-grid__row--editing]=\"isEditing(row.dataItem)\"\n            [ngClass]=\"getRowClass(row.dataItem, row.rowIndex)\"\n            (click)=\"onRowClick(row.dataItem, row.rowIndex)\">\n            <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"mb-grid__expand-button\" (click)=\"toggleDetail(row.dataItem, row.rowIndex, $event)\">{{ isDetailExpanded(row.dataItem) ? '\u25BE' : '\u25B8' }}</button>\n            </td>\n            <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isSelected(row.dataItem)\"\n                (change)=\"toggleRow(row.dataItem, $event)\"\n                [attr.aria-label]=\"messages.selectRow\" />\n            </td>\n\n            <td\n              *ngFor=\"let column of visibleColumns; trackBy: trackColumn\"\n              class=\"mb-grid__cell\"\n              [ngClass]=\"['mb-grid__cell--' + (column.align || 'start'), getCellClass(row.dataItem, column, row.rowIndex), getColumnClass(column)]\"\n              [ngStyle]=\"getColumnStyle(column)\"\n              (click)=\"onCellClick(row.dataItem, column, row.rowIndex)\">\n              <ng-container *ngIf=\"isEditing(row.dataItem) && canEditColumn(column); else readonlyCell\">\n                <ng-container [ngTemplateOutlet]=\"editorTemplate\" [ngTemplateOutletContext]=\"{ column: column, row: editingModel, rowIndex: row.rowIndex }\"></ng-container>\n              </ng-container>\n              <ng-template #readonlyCell>\n                <ng-container *ngIf=\"getCellTemplate(column) as cellTpl; else defaultCell\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"cellTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row.dataItem, dataItem: row.dataItem, column: column, value: getValue(row.dataItem, column, row.rowIndex), rowIndex: row.rowIndex, editing: isEditing(row.dataItem) }\">\n                  </ng-container>\n                </ng-container>\n                <ng-template #defaultCell>{{ formatCell(row.dataItem, column, row.rowIndex) }}</ng-template>\n              </ng-template>\n            </td>\n\n            <td *ngIf=\"showCommandColumn\" class=\"mb-grid__cell mb-grid__command-cell\" (click)=\"$event.stopPropagation()\">\n              <ng-container *ngIf=\"isEditing(row.dataItem); else readonlyCommands\">\n                <button type=\"button\" class=\"mb-grid__command\" (click)=\"saveEdit($event)\">{{ messages.save }}</button>\n                <button type=\"button\" class=\"mb-grid__command\" (click)=\"cancelEditRow($event)\">{{ messages.cancel }}</button>\n              </ng-container>\n              <ng-template #readonlyCommands>\n                <button *ngIf=\"editable\" type=\"button\" class=\"mb-grid__command\" (click)=\"startEdit(row.dataItem, row.rowIndex, $event)\">{{ messages.edit }}</button>\n                <button *ngIf=\"allowDelete\" type=\"button\" class=\"mb-grid__command mb-grid__command--danger\" (click)=\"removeRow(row.dataItem, row.rowIndex, $event)\">{{ messages.delete }}</button>\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"row.kind === 'data' && isDetailExpanded(row.dataItem) && detailTemplate?.templateRef as detailTpl\" class=\"mb-grid__detail-row\">\n            <td [attr.colspan]=\"columnSpan\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row.dataItem, dataItem: row.dataItem, rowIndex: row.rowIndex, expanded: isDetailExpanded(row.dataItem) }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n\n      <tfoot *ngIf=\"showFooter\">\n        <tr class=\"mb-grid__footer-row\">\n          <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__footer-cell\">\n            <ng-container *ngIf=\"getFooterTemplate(column) as footerTpl; else defaultFooter\">\n              <ng-container [ngTemplateOutlet]=\"footerTpl\" [ngTemplateOutletContext]=\"{ $implicit: column, column: column, aggregates: processed.aggregates }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultFooter>\n              <span *ngIf=\"processed.aggregates[column.field.toString()] as aggs\">\n                <ng-container *ngFor=\"let key of aggs | keyvalue\">{{ key.key }}: {{ key.value | number }} </ng-container>\n              </span>\n            </ng-template>\n          </td>\n          <td *ngIf=\"showCommandColumn\" class=\"mb-grid__command-cell\"></td>\n        </tr>\n      </tfoot>\n    </table>\n  </div>\n\n\n  <ng-template #editorTemplate let-column=\"column\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n    <ng-container *ngIf=\"column.editTemplate as editTpl; else defaultEditor\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, dataItem: row, column: column, value: getEditValue(column), rowIndex: rowIndex, setValue: setEditValue.bind(this, column), errors: validationErrors }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #defaultEditor>\n      <select\n        *ngIf=\"getEditorType(column) === 'select'; else nonSelectEditor\"\n        class=\"mb-grid__editor\"\n        [ngModel]=\"getEditValue(column)\"\n        (ngModelChange)=\"setEditValue(column, $event)\">\n        <option *ngFor=\"let option of column.editorOptions || []\" [ngValue]=\"option.value\">{{ option.label }}</option>\n      </select>\n      <ng-template #nonSelectEditor>\n        <input\n          *ngIf=\"getEditorType(column) !== 'checkbox'; else checkboxEditor\"\n          class=\"mb-grid__editor\"\n          [type]=\"getEditorType(column) === 'number' ? 'number' : getEditorType(column) === 'date' ? 'date' : 'text'\"\n          [ngModel]=\"getEditValue(column)\"\n          (ngModelChange)=\"setEditValue(column, $event)\" />\n        <ng-template #checkboxEditor>\n          <input type=\"checkbox\" [ngModel]=\"getEditValue(column)\" (ngModelChange)=\"setEditValue(column, $event)\" />\n        </ng-template>\n      </ng-template>\n      <small *ngIf=\"validationErrors[column.field.toString()]\" class=\"mb-grid__error\">{{ validationErrors[column.field.toString()] }}</small>\n    </ng-template>\n  </ng-template>\n\n  <div *ngIf=\"pageable\" class=\"mb-grid__pager\">\n    <div class=\"mb-grid__pager-info\">{{ pagerInfoText() }}</div>\n    <div class=\"mb-grid__pager-actions\">\n      <select class=\"mb-grid__page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n        <option *ngFor=\"let option of pageSizeOptions\" [ngValue]=\"option\">{{ option }}</option>\n      </select>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex === 0\" (click)=\"changePage(0)\">{{ messages.pagerFirst }}</button>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex === 0\" (click)=\"changePage(pageIndex - 1)\">{{ messages.pagerPrevious }}</button>\n      <span class=\"mb-grid__page-current\">{{ pageIndex + 1 }} / {{ pageCount }}</span>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex >= pageCount - 1\" (click)=\"changePage(pageIndex + 1)\">{{ messages.pagerNext }}</button>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex >= pageCount - 1\" (click)=\"changePage(pageCount - 1)\">{{ messages.pagerLast }}</button>\n    </div>\n  </div>\n</div>\n", styles: [".mb-grid{position:relative;display:flex;flex-direction:column;width:100%;min-height:180px;overflow:hidden;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);box-shadow:var(--mb-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));font-family:var(--mb-font-family, inherit)}.mb-grid--compact{--mb-grid-row-height: 36px;--mb-grid-cell-padding-y: 8px;--mb-grid-cell-padding-x: 10px}.mb-grid--comfortable{--mb-grid-row-height: 44px;--mb-grid-cell-padding-y: 11px;--mb-grid-cell-padding-x: 14px}.mb-grid--spacious{--mb-grid-row-height: 54px;--mb-grid-cell-padding-y: 15px;--mb-grid-cell-padding-x: 18px}.mb-grid__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-block-end:1px solid var(--mb-border, #e2e8f0);background:color-mix(in srgb,var(--mb-surface, #fff) 88%,var(--mb-primary, #2563eb) 12%)}.mb-grid__toolbar-start,.mb-grid__toolbar-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mb-grid__toolbar-end{margin-inline-start:auto}.mb-grid__group-panel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px}.mb-grid__group-label,.mb-grid__group-hint{color:var(--mb-muted, #64748b);font-size:12px}.mb-grid__group-chip{border:1px solid var(--mb-primary, #2563eb);color:var(--mb-primary, #2563eb);background:#fff;padding:5px 10px;border-radius:999px;cursor:pointer}.mb-grid__search,.mb-grid__filter-input,.mb-grid__filter-operator,.mb-grid__page-size,.mb-grid__column-menu input,.mb-grid__column-menu select{min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding:0 10px;outline:none;font:inherit}.mb-grid__search{min-width:220px}.mb-grid__search:focus,.mb-grid__filter-input:focus,.mb-grid__filter-operator:focus,.mb-grid__page-size:focus{border-color:var(--mb-primary, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-primary, #2563eb) 15%,transparent)}.mb-grid__tool-button,.mb-grid__pager-button,.mb-grid__menu-action{min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);padding:0 12px;cursor:pointer;font:inherit;transition:background .15s ease,border-color .15s ease,transform .15s ease}.mb-grid__tool-button:hover,.mb-grid__pager-button:hover:not(:disabled),.mb-grid__menu-action:hover{border-color:color-mix(in srgb,var(--mb-primary, #2563eb) 45%,var(--mb-border, #e2e8f0));background:color-mix(in srgb,var(--mb-primary, #2563eb) 8%,#fff)}.mb-grid__pager-button:disabled{opacity:.45;cursor:not-allowed}.mb-grid__chooser{position:relative}.mb-grid__chooser-menu,.mb-grid__column-menu{position:absolute;z-index:20;inset-block-start:calc(100% + 6px);inset-inline-end:0;min-width:230px;padding:8px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);box-shadow:var(--mb-shadow-lg, 0 16px 40px rgba(15, 23, 42, .16))}.mb-grid__chooser-option{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--mb-radius-md, 10px);cursor:pointer}.mb-grid__chooser-option:hover{background:var(--mb-hover, #f8fafc)}.mb-grid__scroll{flex:1;min-height:0;overflow:auto}.mb-grid__table{width:100%;min-width:max-content;border-collapse:separate;border-spacing:0;table-layout:fixed}.mb-grid__header-row,.mb-grid__filter-row,.mb-grid__footer-row{background:var(--mb-grid-header-bg, #f8fafc)}.mb-grid__header-cell,.mb-grid__filter-cell,.mb-grid__footer-cell,.mb-grid__cell,.mb-grid__select-cell{position:relative;border-block-end:1px solid var(--mb-border, #e2e8f0);border-inline-end:1px solid var(--mb-border-subtle, #eef2f7);padding:var(--mb-grid-cell-padding-y) var(--mb-grid-cell-padding-x);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;height:var(--mb-grid-row-height)}.mb-grid__cell--locked-start,.mb-grid__header-cell.mb-grid__cell--locked-start,.mb-grid__filter-cell.mb-grid__cell--locked-start,.mb-grid__footer-cell.mb-grid__cell--locked-start{background:var(--mb-grid-locked-bg, var(--mb-surface, #fff));box-shadow:4px 0 8px -4px #0f172a1f}.mb-grid__cell--locked-end,.mb-grid__header-cell.mb-grid__cell--locked-end,.mb-grid__filter-cell.mb-grid__cell--locked-end,.mb-grid__footer-cell.mb-grid__cell--locked-end{background:var(--mb-grid-locked-bg, var(--mb-surface, #fff));box-shadow:-4px 0 8px -4px #0f172a1f}.mb-grid__header-cell{position:sticky;inset-block-start:0;z-index:5;-webkit-user-select:none;user-select:none;font-weight:700;color:var(--mb-grid-header-text, #334155);background:var(--mb-grid-header-bg, #f8fafc)}.mb-grid__filter-cell{position:sticky;inset-block-start:var(--mb-grid-row-height);z-index:4;background:var(--mb-grid-header-bg, #f8fafc);padding:8px}.mb-grid__header-cell--sortable .mb-grid__header-content{cursor:pointer}.mb-grid__header-content{display:flex;align-items:center;gap:6px;min-width:0}.mb-grid__header-title{overflow:hidden;text-overflow:ellipsis}.mb-grid__sort{display:inline-flex;align-items:center;gap:2px;color:var(--mb-primary, #2563eb)}.mb-grid__sort small{font-size:10px}.mb-grid__column-menu-button{position:absolute;inset-inline-end:4px;inset-block-start:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:8px;background:transparent;cursor:pointer;opacity:.55}.mb-grid__column-menu-button:hover{background:var(--mb-hover, #f1f5f9);opacity:1}.mb-grid__resize-handle{position:absolute;inset-block:8px;inset-inline-end:-2px;width:5px;cursor:col-resize;z-index:7}.mb-grid__resize-handle:hover{background:color-mix(in srgb,var(--mb-primary, #2563eb) 40%,transparent)}.mb-grid__column-menu{inset-block-start:calc(100% - 4px);inset-inline-end:6px;text-align:start}.mb-grid__menu-action{display:flex;align-items:center;width:100%;justify-content:flex-start;margin-block:4px}.mb-grid__menu-filter{display:grid;gap:8px;margin-block:8px;padding-block:8px;border-block:1px solid var(--mb-border, #e2e8f0)}.mb-grid__filter-control{display:grid;grid-template-columns:minmax(105px,.75fr) minmax(120px,1fr);gap:6px}.mb-grid__row{background:var(--mb-surface, #fff);transition:background .12s ease}.mb-grid__row:hover{background:var(--mb-hover, #f8fafc)}.mb-grid__row--selected{background:color-mix(in srgb,var(--mb-primary, #2563eb) 10%,#fff)}.mb-grid__cell--start{text-align:start}.mb-grid__cell--center{text-align:center}.mb-grid__cell--end{text-align:end}.mb-grid__select-cell{width:48px;min-width:48px;max-width:48px;text-align:center}.mb-grid__group-row{background:color-mix(in srgb,var(--mb-primary, #2563eb) 8%,#fff);cursor:pointer}.mb-grid__group-cell{padding:11px 14px;border-block-end:1px solid var(--mb-border, #e2e8f0);font-weight:600}.mb-grid__group-toggle{display:inline-flex;width:20px;justify-content:center;color:var(--mb-primary, #2563eb)}.mb-grid__detail-row td{padding:0;border-block-end:1px solid var(--mb-border, #e2e8f0);background:var(--mb-subtle, #f8fafc)}.mb-grid__empty{text-align:center;padding:36px 16px;color:var(--mb-muted, #64748b)}.mb-grid__footer-cell{font-weight:700;background:var(--mb-grid-footer-bg, #f8fafc)}.mb-grid__pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-block-start:1px solid var(--mb-border, #e2e8f0);background:var(--mb-surface, #fff)}.mb-grid__pager-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mb-grid__pager-info,.mb-grid__page-current{color:var(--mb-muted, #64748b);font-size:13px}.mb-grid__loading{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#ffffffad;backdrop-filter:blur(2px)}.mb-grid__spinner{width:24px;height:24px;border-radius:50%;border:3px solid var(--mb-border, #e2e8f0);border-block-start-color:var(--mb-primary, #2563eb);animation:mb-grid-spin .8s linear infinite}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--mb-radius-md, 10px);box-shadow:var(--mb-shadow-lg, 0 16px 40px rgba(15, 23, 42, .16));background:#fff;padding:10px 14px}.cdk-drag-placeholder{opacity:.25}@keyframes mb-grid-spin{to{transform:rotate(360deg)}}@media (max-width: 720px){.mb-grid__toolbar,.mb-grid__pager{align-items:stretch;flex-direction:column}.mb-grid__toolbar-end,.mb-grid__pager-actions{width:100%}.mb-grid__search{width:100%;min-width:0}}.mb-grid__tool-button--primary{background:var(--mb-primary, #2563eb);border-color:var(--mb-primary, #2563eb);color:#fff}.mb-grid__command-cell{width:1%;white-space:nowrap;text-align:center}.mb-grid__command{min-height:30px;margin-inline:2px;padding:0 10px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);cursor:pointer;font:inherit}.mb-grid__command:hover{border-color:var(--mb-primary, #2563eb);color:var(--mb-primary, #2563eb)}.mb-grid__command--danger:hover{border-color:var(--mb-danger, #dc2626);color:var(--mb-danger, #dc2626)}.mb-grid__row--editing{background:color-mix(in srgb,var(--mb-primary, #2563eb) 7%,var(--mb-surface, #fff))}.mb-grid__row--new{border-block-start:2px solid var(--mb-primary, #2563eb)}.mb-grid__editor{width:100%;min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding-inline:8px;font:inherit;outline:none}.mb-grid__editor:focus{border-color:var(--mb-primary, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-primary, #2563eb) 15%,transparent)}.mb-grid__error{display:block;margin-block-start:4px;color:var(--mb-danger, #dc2626);font-size:11px}.mb-grid__expand-button{border:0;background:transparent;cursor:pointer;font-size:16px;color:var(--mb-muted, #64748b)}.mb-grid__detail-row td{padding:14px;background:color-mix(in srgb,var(--mb-surface, #fff) 92%,var(--mb-primary, #2563eb) 8%)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-grid', standalone: true, imports: [NgIf, NgFor, NgClass, NgStyle, NgTemplateOutlet, DecimalPipe, KeyValuePipe, FormsModule, DragDropModule, ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-grid\" [attr.dir]=\"effectiveDir\" [ngClass]=\"['mb-grid--' + density, loading ? 'mb-grid--loading' : '']\" [ngStyle]=\"gridStyle\">\n  <div *ngIf=\"showToolbar\" class=\"mb-grid__toolbar\">\n    <ng-container *ngIf=\"toolbarTemplate?.templateRef as toolbarTpl; else defaultToolbar\">\n      <ng-container [ngTemplateOutlet]=\"toolbarTpl\" [ngTemplateOutletContext]=\"toolbarContext\"></ng-container>\n    </ng-container>\n\n    <ng-template #defaultToolbar>\n      <div class=\"mb-grid__toolbar-start\">\n        <div *ngIf=\"groupable\" class=\"mb-grid__group-panel\">\n          <span class=\"mb-grid__group-label\">{{ messages.groupLabel }}</span>\n          <button\n            *ngFor=\"let group of state.group\"\n            type=\"button\"\n            class=\"mb-grid__group-chip\"\n            (click)=\"removeGroup(group)\">\n            {{ group.field }} \u00D7\n          </button>\n          <span *ngIf=\"!state.group.length\" class=\"mb-grid__group-hint\">{{ messages.groupHint }}</span>\n        </div>\n      </div>\n\n      <div class=\"mb-grid__toolbar-end\">\n        <button *ngIf=\"editable && allowAdd\" type=\"button\" class=\"mb-grid__tool-button mb-grid__tool-button--primary\" (click)=\"createRow()\">{{ messages.addRow }}</button>\n        <input\n          *ngIf=\"showSearch\"\n          class=\"mb-grid__search\"\n          [ngModel]=\"globalSearch\"\n          (ngModelChange)=\"applyGlobalSearch($event)\"\n          [placeholder]=\"messages.searchPlaceholder\" />\n\n        <div *ngIf=\"showColumnChooser\" class=\"mb-grid__chooser\">\n          <button type=\"button\" class=\"mb-grid__tool-button\" (click)=\"openColumnMenuField = openColumnMenuField === '__chooser' ? '' : '__chooser'\">\n            {{ messages.columns }}\n          </button>\n          <div *ngIf=\"openColumnMenuField === '__chooser'\" class=\"mb-grid__chooser-menu\" (click)=\"$event.stopPropagation()\">\n            <label *ngFor=\"let column of internalColumns\" class=\"mb-grid__chooser-option\">\n              <input type=\"checkbox\" [checked]=\"!column.hidden\" (change)=\"showColumn(column, $any($event.target).checked)\" />\n              <span>{{ column.title }}</span>\n            </label>\n            <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"resetColumns()\">{{ messages.resetColumns }}</button>\n          </div>\n        </div>\n\n        <button *ngIf=\"showExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportCsv()\">{{ messages.exportCsv }}</button>\n        <button *ngIf=\"showExport && showExcelExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportExcel()\">{{ messages.exportExcel }}</button>\n        <button *ngIf=\"showExport && showJsonExport\" type=\"button\" class=\"mb-grid__tool-button\" (click)=\"exportJson()\">{{ messages.exportJson }}</button>\n        <button type=\"button\" class=\"mb-grid__tool-button\" (click)=\"resetState()\">{{ messages.reset }}</button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div *ngIf=\"loading\" class=\"mb-grid__loading\" aria-live=\"polite\">\n    <span class=\"mb-grid__spinner\"></span>\n    <span>{{ loadingText || messages.loading }}</span>\n  </div>\n\n  <div class=\"mb-grid__scroll\">\n    <table class=\"mb-grid__table\">\n      <thead>\n        <tr\n          class=\"mb-grid__header-row\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          [cdkDropListDisabled]=\"!reorderable\"\n          [cdkDropListData]=\"visibleColumns\"\n          (cdkDropListDropped)=\"dropColumn($event)\">\n          <th *ngIf=\"expandable\" class=\"mb-grid__select-cell mb-grid__header-cell\"></th>\n            <th *ngIf=\"selectable\" class=\"mb-grid__select-cell mb-grid__header-cell\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleRowsSelected\"\n              [indeterminate]=\"someVisibleRowsSelected\"\n              (change)=\"toggleAllVisible($event)\"\n              [attr.aria-label]=\"messages.selectAllRows\" />\n          </th>\n\n          <th\n            *ngFor=\"let column of visibleColumns; let columnIndex = index; trackBy: trackColumn\"\n            cdkDrag\n            class=\"mb-grid__header-cell\"\n            [ngClass]=\"['mb-grid__cell--' + (column.headerAlign || column.align || 'start'), column.sortable === false ? '' : 'mb-grid__header-cell--sortable', getColumnClass(column)]\"\n            [ngStyle]=\"getColumnStyle(column)\">\n            <div class=\"mb-grid__header-content\" (click)=\"toggleSort(column, $event)\">\n              <ng-container *ngIf=\"getHeaderTemplate(column) as headerTpl; else defaultHeader\">\n                <ng-container [ngTemplateOutlet]=\"headerTpl\" [ngTemplateOutletContext]=\"{ $implicit: column, column: column }\"></ng-container>\n              </ng-container>\n              <ng-template #defaultHeader>\n                <span class=\"mb-grid__header-title\">{{ column.title }}</span>\n              </ng-template>\n\n              <span *ngIf=\"getSortDirection(column) as dir\" class=\"mb-grid__sort\">\n                <span>{{ dir === 'asc' ? '\u2191' : '\u2193' }}</span>\n                <small *ngIf=\"multiSort && getSortIndex(column) >= 0\">{{ getSortIndex(column) + 1 }}</small>\n              </span>\n            </div>\n\n            <button\n              *ngIf=\"hasColumnMenu && column.menu !== false\"\n              type=\"button\"\n              class=\"mb-grid__column-menu-button\"\n              [attr.aria-label]=\"messages.columnMenu\"\n              (click)=\"toggleColumnMenu(column, $event)\">\u22EE</button>\n\n            <span\n              *ngIf=\"resizable && column.resizable !== false\"\n              class=\"mb-grid__resize-handle\"\n              (mousedown)=\"startResize(column, $event)\"></span>\n\n            <div *ngIf=\"openColumnMenuField === column.field.toString()\" class=\"mb-grid__column-menu\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleSort(column)\">{{ messages.sort }}</button>\n              <button *ngIf=\"groupable && column.groupable !== false\" type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleGroup(column)\">\n                {{ state.group.length && state.group[0].field === column.field ? messages.removeGroup : messages.groupByColumn }}\n              </button>\n\n              <div *ngIf=\"filterable && column.filterable !== false && (filterMode === 'menu' || filterMode === 'both')\" class=\"mb-grid__menu-filter\">\n                <label>{{ messages.filter }}</label>\n                <select [ngModel]=\"filtersByField[column.field.toString()].operator\" (ngModelChange)=\"setFilterOperator(column, $event)\">\n                  <option *ngFor=\"let operator of getOperators(column)\" [ngValue]=\"operator\">{{ getOperatorLabel(operator) }}</option>\n                </select>\n                <input\n                  [type]=\"column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'\"\n                  [ngModel]=\"filtersByField[column.field.toString()].value\"\n                  (ngModelChange)=\"setFilterValue(column, $event)\"\n                  [placeholder]=\"messages.filterValuePlaceholder\" />\n                <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"clearFilter(column)\">{{ messages.clearFilter }}</button>\n              </div>\n\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"toggleLock(column)\">{{ column.locked ? messages.unlockColumn : messages.lockColumn }}</button>\n              <button type=\"button\" class=\"mb-grid__menu-action\" (click)=\"hideColumn(column)\">{{ messages.hideColumn }}</button>\n            </div>\n          </th>\n\n          <th *ngIf=\"showCommandColumn\" class=\"mb-grid__header-cell mb-grid__command-cell\">{{ effectiveCommandColumnTitle }}</th>\n        </tr>\n\n        <tr *ngIf=\"hasFilterRow\" class=\"mb-grid__filter-row\">\n          <th *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></th>\n          <th *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></th>\n          <th *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__filter-cell\" [ngClass]=\"getColumnClass(column)\" [ngStyle]=\"getColumnStyle(column)\">\n            <div *ngIf=\"column.filterable !== false\" class=\"mb-grid__filter-control\">\n              <select\n                class=\"mb-grid__filter-operator\"\n                [ngModel]=\"filtersByField[column.field.toString()].operator\"\n                (ngModelChange)=\"setFilterOperator(column, $event)\">\n                <option *ngFor=\"let operator of getOperators(column)\" [ngValue]=\"operator\">{{ getOperatorLabel(operator) }}</option>\n              </select>\n              <input\n                class=\"mb-grid__filter-input\"\n                [type]=\"column.type === 'number' ? 'number' : column.type === 'date' ? 'date' : 'text'\"\n                [placeholder]=\"column.title\"\n                [ngModel]=\"filtersByField[column.field.toString()].value\"\n                (ngModelChange)=\"setFilterValue(column, $event)\" />\n            </div>\n          </th>\n          <th *ngIf=\"showCommandColumn\" class=\"mb-grid__command-cell\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngIf=\"!processed.data.length && !loading\" class=\"mb-grid__empty-row\">\n          <td class=\"mb-grid__empty\" [attr.colspan]=\"columnSpan\">{{ noRecordsText || messages.noRecords }}</td>\n        </tr>\n\n        <tr *ngIf=\"isNewRowEditing() && editingModel\" class=\"mb-grid__row mb-grid__row--editing mb-grid__row--new\">\n          <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__cell\">\n            <ng-container [ngTemplateOutlet]=\"editorTemplate\" [ngTemplateOutletContext]=\"{ column: column, row: editingModel, rowIndex: editingRowIndex }\"></ng-container>\n          </td>\n          <td *ngIf=\"showCommandColumn\" class=\"mb-grid__cell mb-grid__command-cell\">\n            <button type=\"button\" class=\"mb-grid__command\" (click)=\"saveEdit($event)\">{{ messages.save }}</button>\n            <button type=\"button\" class=\"mb-grid__command\" (click)=\"cancelEditRow($event)\">{{ messages.cancel }}</button>\n          </td>\n        </tr>\n\n        <ng-container *ngFor=\"let row of processed.data; trackBy: trackRow\">\n          <tr *ngIf=\"row.kind === 'group'\" class=\"mb-grid__group-row\" (click)=\"toggleGroupRow(row)\">\n            <td class=\"mb-grid__group-cell\" [attr.colspan]=\"columnSpan\">\n              <span class=\"mb-grid__group-toggle\">{{ row.expanded ? '\u25BE' : '\u25B8' }}</span>\n              <span [style.padding-inline-start.px]=\"row.level * 18\"></span>\n              <strong>{{ row.field }}:</strong>\n              <span>{{ row.value }}</span>\n              <small>({{ row.count }})</small>\n            </td>\n          </tr>\n\n          <tr\n            *ngIf=\"row.kind === 'data'\"\n            class=\"mb-grid__row\"\n            [class.mb-grid__row--selected]=\"isSelected(row.dataItem)\"\n            [class.mb-grid__row--editing]=\"isEditing(row.dataItem)\"\n            [ngClass]=\"getRowClass(row.dataItem, row.rowIndex)\"\n            (click)=\"onRowClick(row.dataItem, row.rowIndex)\">\n            <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"mb-grid__expand-button\" (click)=\"toggleDetail(row.dataItem, row.rowIndex, $event)\">{{ isDetailExpanded(row.dataItem) ? '\u25BE' : '\u25B8' }}</button>\n            </td>\n            <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isSelected(row.dataItem)\"\n                (change)=\"toggleRow(row.dataItem, $event)\"\n                [attr.aria-label]=\"messages.selectRow\" />\n            </td>\n\n            <td\n              *ngFor=\"let column of visibleColumns; trackBy: trackColumn\"\n              class=\"mb-grid__cell\"\n              [ngClass]=\"['mb-grid__cell--' + (column.align || 'start'), getCellClass(row.dataItem, column, row.rowIndex), getColumnClass(column)]\"\n              [ngStyle]=\"getColumnStyle(column)\"\n              (click)=\"onCellClick(row.dataItem, column, row.rowIndex)\">\n              <ng-container *ngIf=\"isEditing(row.dataItem) && canEditColumn(column); else readonlyCell\">\n                <ng-container [ngTemplateOutlet]=\"editorTemplate\" [ngTemplateOutletContext]=\"{ column: column, row: editingModel, rowIndex: row.rowIndex }\"></ng-container>\n              </ng-container>\n              <ng-template #readonlyCell>\n                <ng-container *ngIf=\"getCellTemplate(column) as cellTpl; else defaultCell\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"cellTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row.dataItem, dataItem: row.dataItem, column: column, value: getValue(row.dataItem, column, row.rowIndex), rowIndex: row.rowIndex, editing: isEditing(row.dataItem) }\">\n                  </ng-container>\n                </ng-container>\n                <ng-template #defaultCell>{{ formatCell(row.dataItem, column, row.rowIndex) }}</ng-template>\n              </ng-template>\n            </td>\n\n            <td *ngIf=\"showCommandColumn\" class=\"mb-grid__cell mb-grid__command-cell\" (click)=\"$event.stopPropagation()\">\n              <ng-container *ngIf=\"isEditing(row.dataItem); else readonlyCommands\">\n                <button type=\"button\" class=\"mb-grid__command\" (click)=\"saveEdit($event)\">{{ messages.save }}</button>\n                <button type=\"button\" class=\"mb-grid__command\" (click)=\"cancelEditRow($event)\">{{ messages.cancel }}</button>\n              </ng-container>\n              <ng-template #readonlyCommands>\n                <button *ngIf=\"editable\" type=\"button\" class=\"mb-grid__command\" (click)=\"startEdit(row.dataItem, row.rowIndex, $event)\">{{ messages.edit }}</button>\n                <button *ngIf=\"allowDelete\" type=\"button\" class=\"mb-grid__command mb-grid__command--danger\" (click)=\"removeRow(row.dataItem, row.rowIndex, $event)\">{{ messages.delete }}</button>\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"row.kind === 'data' && isDetailExpanded(row.dataItem) && detailTemplate?.templateRef as detailTpl\" class=\"mb-grid__detail-row\">\n            <td [attr.colspan]=\"columnSpan\">\n              <ng-container\n                [ngTemplateOutlet]=\"detailTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: row.dataItem, dataItem: row.dataItem, rowIndex: row.rowIndex, expanded: isDetailExpanded(row.dataItem) }\">\n              </ng-container>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n\n      <tfoot *ngIf=\"showFooter\">\n        <tr class=\"mb-grid__footer-row\">\n          <td *ngIf=\"expandable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngIf=\"selectable\" class=\"mb-grid__select-cell\"></td>\n          <td *ngFor=\"let column of visibleColumns; trackBy: trackColumn\" class=\"mb-grid__footer-cell\">\n            <ng-container *ngIf=\"getFooterTemplate(column) as footerTpl; else defaultFooter\">\n              <ng-container [ngTemplateOutlet]=\"footerTpl\" [ngTemplateOutletContext]=\"{ $implicit: column, column: column, aggregates: processed.aggregates }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultFooter>\n              <span *ngIf=\"processed.aggregates[column.field.toString()] as aggs\">\n                <ng-container *ngFor=\"let key of aggs | keyvalue\">{{ key.key }}: {{ key.value | number }} </ng-container>\n              </span>\n            </ng-template>\n          </td>\n          <td *ngIf=\"showCommandColumn\" class=\"mb-grid__command-cell\"></td>\n        </tr>\n      </tfoot>\n    </table>\n  </div>\n\n\n  <ng-template #editorTemplate let-column=\"column\" let-row=\"row\" let-rowIndex=\"rowIndex\">\n    <ng-container *ngIf=\"column.editTemplate as editTpl; else defaultEditor\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, dataItem: row, column: column, value: getEditValue(column), rowIndex: rowIndex, setValue: setEditValue.bind(this, column), errors: validationErrors }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #defaultEditor>\n      <select\n        *ngIf=\"getEditorType(column) === 'select'; else nonSelectEditor\"\n        class=\"mb-grid__editor\"\n        [ngModel]=\"getEditValue(column)\"\n        (ngModelChange)=\"setEditValue(column, $event)\">\n        <option *ngFor=\"let option of column.editorOptions || []\" [ngValue]=\"option.value\">{{ option.label }}</option>\n      </select>\n      <ng-template #nonSelectEditor>\n        <input\n          *ngIf=\"getEditorType(column) !== 'checkbox'; else checkboxEditor\"\n          class=\"mb-grid__editor\"\n          [type]=\"getEditorType(column) === 'number' ? 'number' : getEditorType(column) === 'date' ? 'date' : 'text'\"\n          [ngModel]=\"getEditValue(column)\"\n          (ngModelChange)=\"setEditValue(column, $event)\" />\n        <ng-template #checkboxEditor>\n          <input type=\"checkbox\" [ngModel]=\"getEditValue(column)\" (ngModelChange)=\"setEditValue(column, $event)\" />\n        </ng-template>\n      </ng-template>\n      <small *ngIf=\"validationErrors[column.field.toString()]\" class=\"mb-grid__error\">{{ validationErrors[column.field.toString()] }}</small>\n    </ng-template>\n  </ng-template>\n\n  <div *ngIf=\"pageable\" class=\"mb-grid__pager\">\n    <div class=\"mb-grid__pager-info\">{{ pagerInfoText() }}</div>\n    <div class=\"mb-grid__pager-actions\">\n      <select class=\"mb-grid__page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n        <option *ngFor=\"let option of pageSizeOptions\" [ngValue]=\"option\">{{ option }}</option>\n      </select>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex === 0\" (click)=\"changePage(0)\">{{ messages.pagerFirst }}</button>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex === 0\" (click)=\"changePage(pageIndex - 1)\">{{ messages.pagerPrevious }}</button>\n      <span class=\"mb-grid__page-current\">{{ pageIndex + 1 }} / {{ pageCount }}</span>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex >= pageCount - 1\" (click)=\"changePage(pageIndex + 1)\">{{ messages.pagerNext }}</button>\n      <button type=\"button\" class=\"mb-grid__pager-button\" [disabled]=\"pageIndex >= pageCount - 1\" (click)=\"changePage(pageCount - 1)\">{{ messages.pagerLast }}</button>\n    </div>\n  </div>\n</div>\n", styles: [".mb-grid{position:relative;display:flex;flex-direction:column;width:100%;min-height:180px;overflow:hidden;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);box-shadow:var(--mb-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));font-family:var(--mb-font-family, inherit)}.mb-grid--compact{--mb-grid-row-height: 36px;--mb-grid-cell-padding-y: 8px;--mb-grid-cell-padding-x: 10px}.mb-grid--comfortable{--mb-grid-row-height: 44px;--mb-grid-cell-padding-y: 11px;--mb-grid-cell-padding-x: 14px}.mb-grid--spacious{--mb-grid-row-height: 54px;--mb-grid-cell-padding-y: 15px;--mb-grid-cell-padding-x: 18px}.mb-grid__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-block-end:1px solid var(--mb-border, #e2e8f0);background:color-mix(in srgb,var(--mb-surface, #fff) 88%,var(--mb-primary, #2563eb) 12%)}.mb-grid__toolbar-start,.mb-grid__toolbar-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mb-grid__toolbar-end{margin-inline-start:auto}.mb-grid__group-panel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px}.mb-grid__group-label,.mb-grid__group-hint{color:var(--mb-muted, #64748b);font-size:12px}.mb-grid__group-chip{border:1px solid var(--mb-primary, #2563eb);color:var(--mb-primary, #2563eb);background:#fff;padding:5px 10px;border-radius:999px;cursor:pointer}.mb-grid__search,.mb-grid__filter-input,.mb-grid__filter-operator,.mb-grid__page-size,.mb-grid__column-menu input,.mb-grid__column-menu select{min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding:0 10px;outline:none;font:inherit}.mb-grid__search{min-width:220px}.mb-grid__search:focus,.mb-grid__filter-input:focus,.mb-grid__filter-operator:focus,.mb-grid__page-size:focus{border-color:var(--mb-primary, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-primary, #2563eb) 15%,transparent)}.mb-grid__tool-button,.mb-grid__pager-button,.mb-grid__menu-action{min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-md, 10px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);padding:0 12px;cursor:pointer;font:inherit;transition:background .15s ease,border-color .15s ease,transform .15s ease}.mb-grid__tool-button:hover,.mb-grid__pager-button:hover:not(:disabled),.mb-grid__menu-action:hover{border-color:color-mix(in srgb,var(--mb-primary, #2563eb) 45%,var(--mb-border, #e2e8f0));background:color-mix(in srgb,var(--mb-primary, #2563eb) 8%,#fff)}.mb-grid__pager-button:disabled{opacity:.45;cursor:not-allowed}.mb-grid__chooser{position:relative}.mb-grid__chooser-menu,.mb-grid__column-menu{position:absolute;z-index:20;inset-block-start:calc(100% + 6px);inset-inline-end:0;min-width:230px;padding:8px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);box-shadow:var(--mb-shadow-lg, 0 16px 40px rgba(15, 23, 42, .16))}.mb-grid__chooser-option{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--mb-radius-md, 10px);cursor:pointer}.mb-grid__chooser-option:hover{background:var(--mb-hover, #f8fafc)}.mb-grid__scroll{flex:1;min-height:0;overflow:auto}.mb-grid__table{width:100%;min-width:max-content;border-collapse:separate;border-spacing:0;table-layout:fixed}.mb-grid__header-row,.mb-grid__filter-row,.mb-grid__footer-row{background:var(--mb-grid-header-bg, #f8fafc)}.mb-grid__header-cell,.mb-grid__filter-cell,.mb-grid__footer-cell,.mb-grid__cell,.mb-grid__select-cell{position:relative;border-block-end:1px solid var(--mb-border, #e2e8f0);border-inline-end:1px solid var(--mb-border-subtle, #eef2f7);padding:var(--mb-grid-cell-padding-y) var(--mb-grid-cell-padding-x);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;height:var(--mb-grid-row-height)}.mb-grid__cell--locked-start,.mb-grid__header-cell.mb-grid__cell--locked-start,.mb-grid__filter-cell.mb-grid__cell--locked-start,.mb-grid__footer-cell.mb-grid__cell--locked-start{background:var(--mb-grid-locked-bg, var(--mb-surface, #fff));box-shadow:4px 0 8px -4px #0f172a1f}.mb-grid__cell--locked-end,.mb-grid__header-cell.mb-grid__cell--locked-end,.mb-grid__filter-cell.mb-grid__cell--locked-end,.mb-grid__footer-cell.mb-grid__cell--locked-end{background:var(--mb-grid-locked-bg, var(--mb-surface, #fff));box-shadow:-4px 0 8px -4px #0f172a1f}.mb-grid__header-cell{position:sticky;inset-block-start:0;z-index:5;-webkit-user-select:none;user-select:none;font-weight:700;color:var(--mb-grid-header-text, #334155);background:var(--mb-grid-header-bg, #f8fafc)}.mb-grid__filter-cell{position:sticky;inset-block-start:var(--mb-grid-row-height);z-index:4;background:var(--mb-grid-header-bg, #f8fafc);padding:8px}.mb-grid__header-cell--sortable .mb-grid__header-content{cursor:pointer}.mb-grid__header-content{display:flex;align-items:center;gap:6px;min-width:0}.mb-grid__header-title{overflow:hidden;text-overflow:ellipsis}.mb-grid__sort{display:inline-flex;align-items:center;gap:2px;color:var(--mb-primary, #2563eb)}.mb-grid__sort small{font-size:10px}.mb-grid__column-menu-button{position:absolute;inset-inline-end:4px;inset-block-start:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:8px;background:transparent;cursor:pointer;opacity:.55}.mb-grid__column-menu-button:hover{background:var(--mb-hover, #f1f5f9);opacity:1}.mb-grid__resize-handle{position:absolute;inset-block:8px;inset-inline-end:-2px;width:5px;cursor:col-resize;z-index:7}.mb-grid__resize-handle:hover{background:color-mix(in srgb,var(--mb-primary, #2563eb) 40%,transparent)}.mb-grid__column-menu{inset-block-start:calc(100% - 4px);inset-inline-end:6px;text-align:start}.mb-grid__menu-action{display:flex;align-items:center;width:100%;justify-content:flex-start;margin-block:4px}.mb-grid__menu-filter{display:grid;gap:8px;margin-block:8px;padding-block:8px;border-block:1px solid var(--mb-border, #e2e8f0)}.mb-grid__filter-control{display:grid;grid-template-columns:minmax(105px,.75fr) minmax(120px,1fr);gap:6px}.mb-grid__row{background:var(--mb-surface, #fff);transition:background .12s ease}.mb-grid__row:hover{background:var(--mb-hover, #f8fafc)}.mb-grid__row--selected{background:color-mix(in srgb,var(--mb-primary, #2563eb) 10%,#fff)}.mb-grid__cell--start{text-align:start}.mb-grid__cell--center{text-align:center}.mb-grid__cell--end{text-align:end}.mb-grid__select-cell{width:48px;min-width:48px;max-width:48px;text-align:center}.mb-grid__group-row{background:color-mix(in srgb,var(--mb-primary, #2563eb) 8%,#fff);cursor:pointer}.mb-grid__group-cell{padding:11px 14px;border-block-end:1px solid var(--mb-border, #e2e8f0);font-weight:600}.mb-grid__group-toggle{display:inline-flex;width:20px;justify-content:center;color:var(--mb-primary, #2563eb)}.mb-grid__detail-row td{padding:0;border-block-end:1px solid var(--mb-border, #e2e8f0);background:var(--mb-subtle, #f8fafc)}.mb-grid__empty{text-align:center;padding:36px 16px;color:var(--mb-muted, #64748b)}.mb-grid__footer-cell{font-weight:700;background:var(--mb-grid-footer-bg, #f8fafc)}.mb-grid__pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-block-start:1px solid var(--mb-border, #e2e8f0);background:var(--mb-surface, #fff)}.mb-grid__pager-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mb-grid__pager-info,.mb-grid__page-current{color:var(--mb-muted, #64748b);font-size:13px}.mb-grid__loading{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#ffffffad;backdrop-filter:blur(2px)}.mb-grid__spinner{width:24px;height:24px;border-radius:50%;border:3px solid var(--mb-border, #e2e8f0);border-block-start-color:var(--mb-primary, #2563eb);animation:mb-grid-spin .8s linear infinite}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--mb-radius-md, 10px);box-shadow:var(--mb-shadow-lg, 0 16px 40px rgba(15, 23, 42, .16));background:#fff;padding:10px 14px}.cdk-drag-placeholder{opacity:.25}@keyframes mb-grid-spin{to{transform:rotate(360deg)}}@media (max-width: 720px){.mb-grid__toolbar,.mb-grid__pager{align-items:stretch;flex-direction:column}.mb-grid__toolbar-end,.mb-grid__pager-actions{width:100%}.mb-grid__search{width:100%;min-width:0}}.mb-grid__tool-button--primary{background:var(--mb-primary, #2563eb);border-color:var(--mb-primary, #2563eb);color:#fff}.mb-grid__command-cell{width:1%;white-space:nowrap;text-align:center}.mb-grid__command{min-height:30px;margin-inline:2px;padding:0 10px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);cursor:pointer;font:inherit}.mb-grid__command:hover{border-color:var(--mb-primary, #2563eb);color:var(--mb-primary, #2563eb)}.mb-grid__command--danger:hover{border-color:var(--mb-danger, #dc2626);color:var(--mb-danger, #dc2626)}.mb-grid__row--editing{background:color-mix(in srgb,var(--mb-primary, #2563eb) 7%,var(--mb-surface, #fff))}.mb-grid__row--new{border-block-start:2px solid var(--mb-primary, #2563eb)}.mb-grid__editor{width:100%;min-height:34px;border:1px solid var(--mb-border, #e2e8f0);border-radius:var(--mb-radius-sm, 8px);background:var(--mb-input-bg, #fff);color:var(--mb-text, #0f172a);padding-inline:8px;font:inherit;outline:none}.mb-grid__editor:focus{border-color:var(--mb-primary, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-primary, #2563eb) 15%,transparent)}.mb-grid__error{display:block;margin-block-start:4px;color:var(--mb-danger, #dc2626);font-size:11px}.mb-grid__expand-button{border:0;background:transparent;cursor:pointer;font-size:16px;color:var(--mb-muted, #64748b)}.mb-grid__detail-row td{padding:14px;background:color-mix(in srgb,var(--mb-surface, #fff) 92%,var(--mb-primary, #2563eb) 8%)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MbGridStateService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MB_UI_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MB_GRID_MESSAGES]
+                }] }], propDecorators: { data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], dataMode: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], noRecordsText: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], pageable: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], multiSort: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], filterMode: [{
+                type: Input
+            }], groupable: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], rowKey: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], showColumnChooser: [{
+                type: Input
+            }], showExport: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], exportFileName: [{
+                type: Input
+            }], excelFileName: [{
+                type: Input
+            }], jsonFileName: [{
+                type: Input
+            }], showExcelExport: [{
+                type: Input
+            }], showJsonExport: [{
+                type: Input
+            }], persistKey: [{
+                type: Input
+            }], autoPersist: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], allowAdd: [{
+                type: Input
+            }], allowDelete: [{
+                type: Input
+            }], confirmDelete: [{
+                type: Input
+            }], commandColumnTitle: [{
+                type: Input
+            }], newItemFactory: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], detailInitiallyExpanded: [{
+                type: Input
+            }], rowClassName: [{
+                type: Input
+            }], responsiveColumns: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], groupChange: [{
+                type: Output
+            }], selectedKeysChange: [{
+                type: Output
+            }], columnResize: [{
+                type: Output
+            }], columnReorder: [{
+                type: Output
+            }], columnVisibilityChange: [{
+                type: Output
+            }], columnLockChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], detailToggle: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [MbGridCellTemplateDirective]
+            }], headerTemplates: [{
+                type: ContentChildren,
+                args: [MbGridHeaderTemplateDirective]
+            }], editTemplates: [{
+                type: ContentChildren,
+                args: [MbGridEditTemplateDirective]
+            }], footerTemplates: [{
+                type: ContentChildren,
+                args: [MbGridFooterTemplateDirective]
+            }], toolbarTemplate: [{
+                type: ContentChild,
+                args: [MbGridToolbarTemplateDirective]
+            }], detailTemplate: [{
+                type: ContentChild,
+                args: [MbGridDetailTemplateDirective]
+            }] } });
+
+function mbGridStateFromLegacy(state, defaultTake = 10) {
+    if (!state)
+        return mbGridDefaultState(defaultTake);
+    return {
+        skip: state.skip ?? 0,
+        take: state.take ?? defaultTake,
+        sort: (state.sort ?? []).filter((item) => item.dir).map((item) => ({
+            field: item.field,
+            dir: item.dir,
+        })),
+        filter: state.filter,
+        group: (state.group ?? []).map((item) => ({
+            field: item.field,
+            dir: item.dir,
+        })),
+    };
+}
+function mbGridStateToLegacy(state) {
+    return {
+        skip: state.skip,
+        take: state.take,
+        sort: state.sort,
+        filter: state.filter,
+        group: state.group,
+    };
+}
+function normalizeSortField(field) {
+    const parts = field.split('.');
+    if (parts.length > 1) {
+        return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
+    }
+    return field;
+}
+function appendFilterQuery(query, filter, startIndex = 1) {
+    if (!filter?.filters?.length)
+        return startIndex;
+    let count = startIndex;
+    for (const item of filter.filters) {
+        if ('logic' in item && item.filters) {
+            let addLogic = false;
+            for (const innerItem of item.filters) {
+                const descriptor = innerItem;
+                let chunk = `filter[filters][${count}][field]=${encodeURIComponent(String(descriptor.field))}` +
+                    `&filter[filters][${count}][value]=${encodeURIComponent(String(descriptor.value ?? ''))}` +
+                    `&filter[filters][${count}][operator]=${encodeURIComponent(String(descriptor.operator))}`;
+                if (item.logic && item.filters.length > 1 && !addLogic) {
+                    chunk += `&filter[filters][${count}][logic]=${encodeURIComponent(item.logic)}`;
+                    addLogic = true;
+                }
+                query.push(chunk);
+                count += 1;
+            }
+            continue;
+        }
+        const descriptor = item;
+        query.push(`filter[filters][${count}][field]=${encodeURIComponent(String(descriptor.field))}` +
+            `&filter[filters][${count}][value]=${encodeURIComponent(String(descriptor.value ?? ''))}` +
+            `&filter[filters][${count}][operator]=${encodeURIComponent(String(descriptor.operator))}`);
+        count += 1;
+    }
+    return count;
+}
+/**
+ * Builds a nested query string for APIs that expect indexed sort, filter, and group parameters.
+ */
+function mbGridStateToNestedQuery(state) {
+    const parts = [];
+    if (state.skip) {
+        parts.push(`skip=${state.skip}`);
+    }
+    if (state.take) {
+        parts.push(`take=${state.take}`);
+    }
+    if (state.sort?.length) {
+        let count = 1;
+        for (const item of state.sort) {
+            const field = normalizeSortField(String(item.field));
+            parts.push(`sort[${count}][field]=${encodeURIComponent(field)}`);
+            parts.push(`sort[${count}][dir]=${encodeURIComponent(item.dir)}`);
+            count += 1;
+        }
+    }
+    appendFilterQuery(parts, state.filter);
+    if (state.group?.length) {
+        let count = 1;
+        for (const item of state.group) {
+            parts.push(`group[${count}][field]=${encodeURIComponent(String(item.field))}`);
+            if (item.dir) {
+                parts.push(`group[${count}][dir]=${encodeURIComponent(item.dir)}`);
+            }
+            count += 1;
+        }
+    }
+    return parts.join('&');
+}
+
+const MB_DIALOG_DATA = new InjectionToken('MB_DIALOG_DATA');
+
+class MbDialogRef {
+    overlayRef;
+    closedSubject = new Subject();
+    afterClosed$ = this.closedSubject.asObservable();
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    close(result) {
+        if (!this.overlayRef.hasAttached())
+            return;
+        this.overlayRef.dispose();
+        this.closedSubject.next(result);
+        this.closedSubject.complete();
+    }
+}
+
+class MbDialogContainerComponent {
+    ariaLabel = 'Dialog';
+    width = '560px';
+    maxWidth = 'calc(100vw - 2rem)';
+    minWidth = '280px';
+    portalOutlet;
+    hostClass = 'mb-dialog-host';
+    attachComponentPortal(portal) {
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDialogContainerComponent, isStandalone: true, selector: "mb-dialog-container", inputs: { ariaLabel: "ariaLabel", width: "width", maxWidth: "maxWidth", minWidth: "minWidth" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<section\n  class=\"mb-dialog\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"ariaLabel\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n  [style.width]=\"width\"\n  [style.max-width]=\"maxWidth\"\n  [style.min-width]=\"minWidth\">\n  <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: [":host{display:block}.mb-dialog{background:var(--mb-color-surface-elevated);color:var(--mb-color-text);border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-xl);box-shadow:var(--mb-shadow-lg);overflow:hidden;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-dialog-container', standalone: true, imports: [PortalModule, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  class=\"mb-dialog\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"ariaLabel\"\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"true\"\n  [style.width]=\"width\"\n  [style.max-width]=\"maxWidth\"\n  [style.min-width]=\"minWidth\">\n  <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: [":host{display:block}.mb-dialog{background:var(--mb-color-surface-elevated);color:var(--mb-color-text);border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-xl);box-shadow:var(--mb-shadow-lg);overflow:hidden;outline:none}\n"] }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbDialogService {
+    overlay;
+    injector;
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    open(component, config = {}) {
+        const overlayRef = this.overlay.create(this.createOverlayConfig(config));
+        const dialogRef = new MbDialogRef(overlayRef);
+        const containerPortal = new ComponentPortal(MbDialogContainerComponent, null, this.injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        containerRef.instance.ariaLabel = config.ariaLabel ?? 'Dialog';
+        containerRef.instance.width = config.width ?? '560px';
+        containerRef.instance.maxWidth = config.maxWidth ?? 'calc(100vw - 2rem)';
+        containerRef.instance.minWidth = config.minWidth ?? '280px';
+        const contentInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: MbDialogRef, useValue: dialogRef },
+                { provide: MB_DIALOG_DATA, useValue: config.data },
+            ],
+        });
+        containerRef.instance.attachComponentPortal(new ComponentPortal(component, null, contentInjector));
+        if (config.closeOnBackdropClick !== false) {
+            overlayRef.backdropClick().pipe(take(1)).subscribe(() => dialogRef.close());
+        }
+        if (config.closeOnEscape !== false) {
+            overlayRef
+                .keydownEvents()
+                .pipe(filter((event) => event.key === 'Escape'), take(1))
+                .subscribe(() => dialogRef.close());
+        }
+        return dialogRef;
+    }
+    createOverlayConfig(config) {
+        return new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: config.backdropClass ?? 'mb-overlay-backdrop',
+            panelClass: ['mb-dialog-panel', ...(Array.isArray(config.panelClass) ? config.panelClass : config.panelClass ? [config.panelClass] : [])],
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Injector }] });
+
+class MbDialogComponent {
+    messages = inject(MB_UI_MESSAGES);
+    open = false;
+    title = '';
+    width = '560px';
+    height;
+    minWidth = '280px';
+    maxWidth = 'calc(100vw - 2rem)';
+    closable = true;
+    closeOnBackdrop = true;
+    closeOnEscape = true;
+    ariaLabel;
+    get effectiveAriaLabel() {
+        return this.ariaLabel ?? this.messages.dialog.ariaLabel;
+    }
+    get closeAriaLabel() {
+        return this.messages.dialog.close;
+    }
+    close = new EventEmitter();
+    onEscape() {
+        if (this.open && this.closeOnEscape) {
+            this.requestClose();
+        }
+    }
+    get panelWidth() {
+        return typeof this.width === 'number' ? `${this.width}px` : this.width;
+    }
+    get panelHeight() {
+        if (this.height === undefined || this.height === null)
+            return null;
+        return typeof this.height === 'number' ? `${this.height}px` : this.height;
+    }
+    get panelMinWidth() {
+        return typeof this.minWidth === 'number' ? `${this.minWidth}px` : this.minWidth;
+    }
+    get panelMaxWidth() {
+        return typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth;
+    }
+    requestClose() {
+        if (!this.closable)
+            return;
+        this.close.emit();
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdrop) {
+            this.requestClose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDialogComponent, isStandalone: true, selector: "mb-dialog", inputs: { open: "open", title: "title", width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", closable: "closable", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape", ariaLabel: "ariaLabel" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"mb-dialog-backdrop\" (click)=\"onBackdropClick()\">\r\n  <section\r\n    class=\"mb-dialog-panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"effectiveAriaLabel\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    [style.width]=\"panelWidth\"\r\n    [style.height]=\"panelHeight\"\r\n    [style.min-width]=\"panelMinWidth\"\r\n    [style.max-width]=\"panelMaxWidth\"\r\n    (click)=\"$event.stopPropagation()\">\r\n    <header *ngIf=\"title || closable\" class=\"mb-dialog-panel__titlebar\">\r\n      <ng-content select=\"[mbDialogTitlebar],mb-dialog-titlebar\"></ng-content>\r\n      <h2 *ngIf=\"title\" class=\"mb-dialog-panel__title\">{{ title }}</h2>\r\n      <button\r\n        *ngIf=\"closable\"\r\n        type=\"button\"\r\n        class=\"mb-dialog-panel__close\"\r\n        [attr.aria-label]=\"closeAriaLabel\"\r\n        (click)=\"requestClose()\">\u00D7</button>\r\n    </header>\r\n\r\n    <div class=\"mb-dialog-panel__content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <footer class=\"mb-dialog-panel__actions\">\r\n      <ng-content select=\"[mbDialogActions],mb-dialog-actions\"></ng-content>\r\n    </footer>\r\n  </section>\r\n</div>\r\n", styles: [".mb-dialog-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0f172a73}.mb-dialog-panel{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);box-shadow:var(--mb-shadow-lg, 0 20px 40px rgba(15, 23, 42, .18));overflow:hidden}.mb-dialog-panel__titlebar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-block-end:1px solid var(--mb-border, #e2e8f0);background:color-mix(in srgb,var(--mb-surface, #fff) 90%,var(--mb-primary, #2563eb) 10%)}.mb-dialog-panel__title{margin:0;flex:1;font-size:1rem;font-weight:700}.mb-dialog-panel__close{border:none;background:transparent;color:var(--mb-muted, #64748b);font-size:24px;line-height:1;cursor:pointer}.mb-dialog-panel__content{flex:1;overflow:auto;padding:16px}.mb-dialog-panel__actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-block-start:1px solid var(--mb-border, #e2e8f0)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-dialog', standalone: true, imports: [NgIf, A11yModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"mb-dialog-backdrop\" (click)=\"onBackdropClick()\">\r\n  <section\r\n    class=\"mb-dialog-panel\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-label]=\"effectiveAriaLabel\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    [style.width]=\"panelWidth\"\r\n    [style.height]=\"panelHeight\"\r\n    [style.min-width]=\"panelMinWidth\"\r\n    [style.max-width]=\"panelMaxWidth\"\r\n    (click)=\"$event.stopPropagation()\">\r\n    <header *ngIf=\"title || closable\" class=\"mb-dialog-panel__titlebar\">\r\n      <ng-content select=\"[mbDialogTitlebar],mb-dialog-titlebar\"></ng-content>\r\n      <h2 *ngIf=\"title\" class=\"mb-dialog-panel__title\">{{ title }}</h2>\r\n      <button\r\n        *ngIf=\"closable\"\r\n        type=\"button\"\r\n        class=\"mb-dialog-panel__close\"\r\n        [attr.aria-label]=\"closeAriaLabel\"\r\n        (click)=\"requestClose()\">\u00D7</button>\r\n    </header>\r\n\r\n    <div class=\"mb-dialog-panel__content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <footer class=\"mb-dialog-panel__actions\">\r\n      <ng-content select=\"[mbDialogActions],mb-dialog-actions\"></ng-content>\r\n    </footer>\r\n  </section>\r\n</div>\r\n", styles: [".mb-dialog-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0f172a73}.mb-dialog-panel{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);border-radius:var(--mb-radius-lg, 14px);background:var(--mb-surface, #fff);color:var(--mb-text, #0f172a);box-shadow:var(--mb-shadow-lg, 0 20px 40px rgba(15, 23, 42, .18));overflow:hidden}.mb-dialog-panel__titlebar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-block-end:1px solid var(--mb-border, #e2e8f0);background:color-mix(in srgb,var(--mb-surface, #fff) 90%,var(--mb-primary, #2563eb) 10%)}.mb-dialog-panel__title{margin:0;flex:1;font-size:1rem;font-weight:700}.mb-dialog-panel__close{border:none;background:transparent;color:var(--mb-muted, #64748b);font-size:24px;line-height:1;cursor:pointer}.mb-dialog-panel__content{flex:1;overflow:auto;padding:16px}.mb-dialog-panel__actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-block-start:1px solid var(--mb-border, #e2e8f0)}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/** Lightweight Jalali (Persian) calendar conversion utilities. */
+const MB_JALALI_MONTH_NAMES = [
+    'فروردین',
+    'اردیبهشت',
+    'خرداد',
+    'تیر',
+    'مرداد',
+    'شهریور',
+    'مهر',
+    'آبان',
+    'آذر',
+    'دی',
+    'بهمن',
+    'اسفند',
+];
+function div(a, b) {
+    return ~~(a / b);
+}
+function mod(a, b) {
+    return a - ~~(a / b) * b;
+}
+function jalCal(jy) {
+    const breaks = [
+        -61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097, 2192, 2262, 2324, 2394, 2456, 3178,
+    ];
+    let bl = breaks.length;
+    let gy = jy + 621;
+    let leapJ = -14;
+    let jp = breaks[0];
+    let jm = 0;
+    let jump = 0;
+    if (jy < jp || jy >= breaks[bl - 1]) {
+        throw new Error(`Invalid Jalali year ${jy}`);
+    }
+    for (let i = 1; i < bl; i += 1) {
+        jm = breaks[i];
+        jump = jm - jp;
+        if (jy < jm)
+            break;
+        leapJ = leapJ + div(jump, 33) * 8 + div(mod(jump, 33) + 3, 4);
+        jp = jm;
+    }
+    const n = jy - jp;
+    leapJ = leapJ + div(n, 33) * 8 + div(mod(n, 33) + 3, 4);
+    if (mod(jump, 33) === 4 && jump - n === 4)
+        leapJ += 1;
+    const leapG = div(gy, 4) - div((div(gy, 100) + 1) * 3, 4) - 150;
+    const march = 20 + leapJ - leapG;
+    return jy < 100 ? [jump, march, 0] : [jump, march, div(jump, 33) * 8 + div(mod(jump, 33) + 3, 4)];
+}
+function j2d(jy, jm, jd) {
+    const [r, march] = jalCal(jy);
+    return g2d(jy + 621, 3, march) + (jm - 1) * 31 - div(jm, 7) * (jm - 7) + jd - 1;
+}
+function d2j(jdn) {
+    const gy = d2g(jdn).year;
+    let jy = gy - 621;
+    const [_, march, leap] = jalCal(jy);
+    let jdn1f = g2d(gy, 3, march);
+    let k = jdn - jdn1f;
+    if (k >= 0) {
+        if (k <= 185) {
+            return { year: jy, month: 1 + div(k, 31), day: mod(k, 31) + 1 };
+        }
+        k -= 186;
+    }
+    else {
+        jy -= 1;
+        k += 179;
+        if (leap === 1)
+            k += 1;
+    }
+    return { year: jy, month: 7 + div(k, 30), day: mod(k, 30) + 1 };
+}
+function g2d(gy, gm, gd) {
+    let d = div((gy + div(gm - 8, 6) + 100100) * 1461, 4) +
+        div(153 * mod(gm + 9, 12) + 2, 5) +
+        gd -
+        34840408;
+    d = d - div(div(gy + 100100 + div(gm - 8, 6), 100) * 3, 4) + 752;
+    return d;
+}
+function d2g(jdn) {
+    let j = 4 * jdn + 139361631 + div(div(4 * jdn + 183187720, 146097) * 3, 4) * 4 - 3908;
+    const i = div(mod(j, 1461), 4) * 5 + 308;
+    const gd = div(mod(i, 153), 5) + 1;
+    const gm = mod(div(i, 153), 12) + 1;
+    const gy = div(j, 1461) - 100100 + div(8 - gm, 6);
+    return { year: gy, month: gm, day: gd };
+}
+function mbGregorianToJalali(date) {
+    return d2j(g2d(date.year, date.month, date.day));
+}
+function mbJalaliToGregorian(date) {
+    const jdn = j2d(date.year, date.month, date.day);
+    return d2g(jdn);
+}
+function mbParseIsoDate(value) {
+    if (!value)
+        return null;
+    const parts = value.split('-').map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN))
+        return null;
+    return { year: parts[0], month: parts[1], day: parts[2] };
+}
+function mbToIsoDate(date) {
+    return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
+}
+function mbJalaliMonthLength(year, month) {
+    if (month <= 6)
+        return 31;
+    if (month <= 11)
+        return 30;
+    const [, , leap] = jalCal(year);
+    return leap + 29;
+}
+function mbFormatJalali(date, separator = '/') {
+    return `${date.year}${separator}${String(date.month).padStart(2, '0')}${separator}${String(date.day).padStart(2, '0')}`;
+}
+
+class MbToastService {
+    toastsSubject = new BehaviorSubject([]);
+    toasts$ = this.toastsSubject.asObservable();
+    show(message, options = {}) {
+        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+        const toast = {
+            id,
+            message,
+            title: options.title,
+            variant: options.variant ?? 'info',
+            duration: options.duration ?? 4000,
+        };
+        this.toastsSubject.next([...this.toastsSubject.value, toast]);
+        if (toast.duration > 0) {
+            globalThis.setTimeout(() => this.dismiss(id), toast.duration);
+        }
+        return id;
+    }
+    success(message, title) {
+        return this.show(message, { title, variant: 'success' });
+    }
+    info(message, title) {
+        return this.show(message, { title, variant: 'info' });
+    }
+    warning(message, title) {
+        return this.show(message, { title, variant: 'warning' });
+    }
+    danger(message, title) {
+        return this.show(message, { title, variant: 'danger' });
+    }
+    dismiss(id) {
+        this.toastsSubject.next(this.toastsSubject.value.filter((toast) => toast.id !== id));
+    }
+    clear() {
+        this.toastsSubject.next([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MbToastContainerComponent {
+    toastService;
+    messages = inject(MB_UI_MESSAGES);
+    toasts$;
+    constructor(toastService) {
+        this.toastService = toastService;
+        this.toasts$ = this.toastService.toasts$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbToastContainerComponent, deps: [{ token: MbToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbToastContainerComponent, isStandalone: true, selector: "mb-toast-container", ngImport: i0, template: "<div class=\"mb-toast-container\" aria-live=\"polite\" aria-atomic=\"true\">\n  <article\n    *ngFor=\"let toast of toasts$ | async\"\n    class=\"mb-toast\"\n    [ngClass]=\"'mb-toast--' + toast.variant\">\n    <div class=\"mb-toast__content\">\n      <strong *ngIf=\"toast.title\" class=\"mb-toast__title\">{{ toast.title }}</strong>\n      <p class=\"mb-toast__message\">{{ toast.message }}</p>\n    </div>\n    <button type=\"button\" class=\"mb-toast__close\" [attr.aria-label]=\"messages.common.close\" (click)=\"toastService.dismiss(toast.id)\">\u00D7</button>\n  </article>\n</div>\n", styles: [".mb-toast-container{position:fixed;inset-block-start:1rem;inset-inline-end:1rem;z-index:1100;display:flex;flex-direction:column;gap:.75rem;inline-size:min(24rem,100vw - 2rem);pointer-events:none}.mb-toast{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid var(--mb-color-border);border-inline-start:4px solid var(--mb-color-primary);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);border-radius:var(--mb-radius-lg);box-shadow:var(--mb-shadow-md);padding:.875rem;pointer-events:auto}.mb-toast--success{border-inline-start-color:var(--mb-color-success)}.mb-toast--warning{border-inline-start-color:var(--mb-color-warning)}.mb-toast--danger{border-inline-start-color:var(--mb-color-danger)}.mb-toast__title{display:block;margin-block-end:.2rem;font-size:.875rem}.mb-toast__message{margin:0;color:var(--mb-color-muted);font-size:.8125rem}.mb-toast__close{border:0;background:transparent;color:var(--mb-color-muted);cursor:pointer;font-size:1.25rem;line-height:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-toast-container', standalone: true, imports: [AsyncPipe, NgFor, NgIf, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-toast-container\" aria-live=\"polite\" aria-atomic=\"true\">\n  <article\n    *ngFor=\"let toast of toasts$ | async\"\n    class=\"mb-toast\"\n    [ngClass]=\"'mb-toast--' + toast.variant\">\n    <div class=\"mb-toast__content\">\n      <strong *ngIf=\"toast.title\" class=\"mb-toast__title\">{{ toast.title }}</strong>\n      <p class=\"mb-toast__message\">{{ toast.message }}</p>\n    </div>\n    <button type=\"button\" class=\"mb-toast__close\" [attr.aria-label]=\"messages.common.close\" (click)=\"toastService.dismiss(toast.id)\">\u00D7</button>\n  </article>\n</div>\n", styles: [".mb-toast-container{position:fixed;inset-block-start:1rem;inset-inline-end:1rem;z-index:1100;display:flex;flex-direction:column;gap:.75rem;inline-size:min(24rem,100vw - 2rem);pointer-events:none}.mb-toast{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid var(--mb-color-border);border-inline-start:4px solid var(--mb-color-primary);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);border-radius:var(--mb-radius-lg);box-shadow:var(--mb-shadow-md);padding:.875rem;pointer-events:auto}.mb-toast--success{border-inline-start-color:var(--mb-color-success)}.mb-toast--warning{border-inline-start-color:var(--mb-color-warning)}.mb-toast--danger{border-inline-start-color:var(--mb-color-danger)}.mb-toast__title{display:block;margin-block-end:.2rem;font-size:.875rem}.mb-toast__message{margin:0;color:var(--mb-color-muted);font-size:.8125rem}.mb-toast__close{border:0;background:transparent;color:var(--mb-color-muted);cursor:pointer;font-size:1.25rem;line-height:1}\n"] }]
+        }], ctorParameters: () => [{ type: MbToastService }] });
+
+class MbCheckboxComponent {
+    label = '';
+    hint = '';
+    size = 'md';
+    indeterminate = false;
+    disabled = false;
+    name;
+    checkedChange = new EventEmitter();
+    hostClass = 'mb-checkbox-host';
+    checked = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    blur() { this.onTouched(); }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.indeterminate = false;
+        this.onChange(this.checked);
+        this.checkedChange.emit(this.checked);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbCheckboxComponent, isStandalone: true, selector: "mb-checkbox", inputs: { label: "label", hint: "hint", size: "size", indeterminate: "indeterminate", disabled: "disabled", name: "name" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbCheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label class=\"mb-checkbox\" [class.mb-checkbox--disabled]=\"disabled\" [ngClass]=\"'mb-checkbox--' + size\">\n  <input\n    class=\"mb-checkbox__native\"\n    type=\"checkbox\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    (change)=\"toggle()\"\n    (blur)=\"blur()\"\n  />\n  <span class=\"mb-checkbox__box\" [class.mb-checkbox__box--indeterminate]=\"indeterminate\">\n    <span *ngIf=\"checked && !indeterminate\" class=\"mb-checkbox__mark\">\u2713</span>\n    <span *ngIf=\"indeterminate\" class=\"mb-checkbox__dash\"></span>\n  </span>\n  <span class=\"mb-checkbox__content\" *ngIf=\"label || hint\">\n    <span class=\"mb-checkbox__label\" *ngIf=\"label\">{{ label }}</span>\n    <span class=\"mb-checkbox__hint\" *ngIf=\"hint\">{{ hint }}</span>\n  </span>\n</label>\n", styles: [":host{display:inline-flex}.mb-checkbox{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;color:var(--mb-color-text);-webkit-user-select:none;user-select:none}.mb-checkbox__native{position:absolute;opacity:0;pointer-events:none}.mb-checkbox__box{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:var(--mb-radius-xs);background:var(--mb-color-bg);display:inline-grid;place-items:center;transition:var(--mb-transition-fast);margin-block-start:.08rem}.mb-checkbox:hover .mb-checkbox__box{border-color:var(--mb-color-primary)}.mb-checkbox__native:checked+.mb-checkbox__box,.mb-checkbox__box--indeterminate{background:var(--mb-color-primary);border-color:var(--mb-color-primary);color:#fff}.mb-checkbox__native:focus-visible+.mb-checkbox__box{box-shadow:var(--mb-focus-ring)}.mb-checkbox__mark{font-size:.78rem;line-height:1;font-weight:800}.mb-checkbox__dash{inline-size:.55rem;block-size:2px;background:currentColor;border-radius:999px}.mb-checkbox__content{display:grid;gap:.12rem}.mb-checkbox__label{font-weight:600;font-size:.9rem}.mb-checkbox__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-checkbox--sm .mb-checkbox__box{inline-size:.95rem;block-size:.95rem}.mb-checkbox--lg .mb-checkbox__box{inline-size:1.25rem;block-size:1.25rem}.mb-checkbox--disabled{cursor:not-allowed;opacity:.62}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-checkbox', standalone: true, imports: [NgClass, NgIf], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbCheckboxComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"mb-checkbox\" [class.mb-checkbox--disabled]=\"disabled\" [ngClass]=\"'mb-checkbox--' + size\">\n  <input\n    class=\"mb-checkbox__native\"\n    type=\"checkbox\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    (change)=\"toggle()\"\n    (blur)=\"blur()\"\n  />\n  <span class=\"mb-checkbox__box\" [class.mb-checkbox__box--indeterminate]=\"indeterminate\">\n    <span *ngIf=\"checked && !indeterminate\" class=\"mb-checkbox__mark\">\u2713</span>\n    <span *ngIf=\"indeterminate\" class=\"mb-checkbox__dash\"></span>\n  </span>\n  <span class=\"mb-checkbox__content\" *ngIf=\"label || hint\">\n    <span class=\"mb-checkbox__label\" *ngIf=\"label\">{{ label }}</span>\n    <span class=\"mb-checkbox__hint\" *ngIf=\"hint\">{{ hint }}</span>\n  </span>\n</label>\n", styles: [":host{display:inline-flex}.mb-checkbox{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;color:var(--mb-color-text);-webkit-user-select:none;user-select:none}.mb-checkbox__native{position:absolute;opacity:0;pointer-events:none}.mb-checkbox__box{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:var(--mb-radius-xs);background:var(--mb-color-bg);display:inline-grid;place-items:center;transition:var(--mb-transition-fast);margin-block-start:.08rem}.mb-checkbox:hover .mb-checkbox__box{border-color:var(--mb-color-primary)}.mb-checkbox__native:checked+.mb-checkbox__box,.mb-checkbox__box--indeterminate{background:var(--mb-color-primary);border-color:var(--mb-color-primary);color:#fff}.mb-checkbox__native:focus-visible+.mb-checkbox__box{box-shadow:var(--mb-focus-ring)}.mb-checkbox__mark{font-size:.78rem;line-height:1;font-weight:800}.mb-checkbox__dash{inline-size:.55rem;block-size:2px;background:currentColor;border-radius:999px}.mb-checkbox__content{display:grid;gap:.12rem}.mb-checkbox__label{font-weight:600;font-size:.9rem}.mb-checkbox__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-checkbox--sm .mb-checkbox__box{inline-size:.95rem;block-size:.95rem}.mb-checkbox--lg .mb-checkbox__box{inline-size:1.25rem;block-size:1.25rem}.mb-checkbox--disabled{cursor:not-allowed;opacity:.62}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbSwitchComponent {
+    label = '';
+    hint = '';
+    size = 'md';
+    disabled = false;
+    checkedChange = new EventEmitter();
+    hostClass = 'mb-switch-host';
+    checked = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) { this.checked = !!value; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.onChange(this.checked);
+        this.checkedChange.emit(this.checked);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbSwitchComponent, isStandalone: true, selector: "mb-switch", inputs: { label: "label", hint: "hint", size: "size", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbSwitchComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"mb-switch\"\n  [class.mb-switch--checked]=\"checked\"\n  [class.mb-switch--disabled]=\"disabled\"\n  [ngClass]=\"'mb-switch--' + size\"\n  [disabled]=\"disabled\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked\"\n  (click)=\"toggle()\">\n  <span class=\"mb-switch__track\"><span class=\"mb-switch__thumb\"></span></span>\n  <span class=\"mb-switch__content\" *ngIf=\"label || hint\">\n    <span class=\"mb-switch__label\" *ngIf=\"label\">{{ label }}</span>\n    <span class=\"mb-switch__hint\" *ngIf=\"hint\">{{ hint }}</span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.mb-switch{border:0;background:transparent;color:var(--mb-color-text);display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;padding:0;font:inherit;text-align:start}.mb-switch__track{inline-size:2.45rem;block-size:1.35rem;border-radius:999px;background:var(--mb-color-border-strong);padding:.15rem;transition:var(--mb-transition-fast);display:flex;align-items:center}.mb-switch__thumb{inline-size:1.05rem;block-size:1.05rem;border-radius:999px;background:#fff;box-shadow:var(--mb-shadow-sm);transition:transform var(--mb-transition-fast)}.mb-switch--checked .mb-switch__track{background:var(--mb-color-primary)}.mb-switch--checked .mb-switch__thumb{transform:translate(1.1rem)}:host-context([dir=rtl]) .mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--checked .mb-switch__thumb{transform:translate(-1.1rem)}.mb-switch:focus-visible .mb-switch__track{box-shadow:var(--mb-focus-ring)}.mb-switch__content{display:grid;gap:.1rem}.mb-switch__label{font-size:.9rem;font-weight:700}.mb-switch__hint{font-size:.78rem;color:var(--mb-color-muted)}.mb-switch--sm .mb-switch__track{inline-size:2rem;block-size:1.1rem}.mb-switch--sm .mb-switch__thumb{inline-size:.82rem;block-size:.82rem}.mb-switch--sm.mb-switch--checked .mb-switch__thumb{transform:translate(.9rem)}:host-context([dir=rtl]) .mb-switch--sm.mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--sm.mb-switch--checked .mb-switch__thumb{transform:translate(-.9rem)}.mb-switch--lg .mb-switch__track{inline-size:2.9rem;block-size:1.55rem}.mb-switch--lg .mb-switch__thumb{inline-size:1.25rem;block-size:1.25rem}.mb-switch--lg.mb-switch--checked .mb-switch__thumb{transform:translate(1.35rem)}:host-context([dir=rtl]) .mb-switch--lg.mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--lg.mb-switch--checked .mb-switch__thumb{transform:translate(-1.35rem)}.mb-switch--disabled{opacity:.62;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-switch', standalone: true, imports: [NgClass, NgIf], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbSwitchComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"mb-switch\"\n  [class.mb-switch--checked]=\"checked\"\n  [class.mb-switch--disabled]=\"disabled\"\n  [ngClass]=\"'mb-switch--' + size\"\n  [disabled]=\"disabled\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked\"\n  (click)=\"toggle()\">\n  <span class=\"mb-switch__track\"><span class=\"mb-switch__thumb\"></span></span>\n  <span class=\"mb-switch__content\" *ngIf=\"label || hint\">\n    <span class=\"mb-switch__label\" *ngIf=\"label\">{{ label }}</span>\n    <span class=\"mb-switch__hint\" *ngIf=\"hint\">{{ hint }}</span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.mb-switch{border:0;background:transparent;color:var(--mb-color-text);display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;padding:0;font:inherit;text-align:start}.mb-switch__track{inline-size:2.45rem;block-size:1.35rem;border-radius:999px;background:var(--mb-color-border-strong);padding:.15rem;transition:var(--mb-transition-fast);display:flex;align-items:center}.mb-switch__thumb{inline-size:1.05rem;block-size:1.05rem;border-radius:999px;background:#fff;box-shadow:var(--mb-shadow-sm);transition:transform var(--mb-transition-fast)}.mb-switch--checked .mb-switch__track{background:var(--mb-color-primary)}.mb-switch--checked .mb-switch__thumb{transform:translate(1.1rem)}:host-context([dir=rtl]) .mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--checked .mb-switch__thumb{transform:translate(-1.1rem)}.mb-switch:focus-visible .mb-switch__track{box-shadow:var(--mb-focus-ring)}.mb-switch__content{display:grid;gap:.1rem}.mb-switch__label{font-size:.9rem;font-weight:700}.mb-switch__hint{font-size:.78rem;color:var(--mb-color-muted)}.mb-switch--sm .mb-switch__track{inline-size:2rem;block-size:1.1rem}.mb-switch--sm .mb-switch__thumb{inline-size:.82rem;block-size:.82rem}.mb-switch--sm.mb-switch--checked .mb-switch__thumb{transform:translate(.9rem)}:host-context([dir=rtl]) .mb-switch--sm.mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--sm.mb-switch--checked .mb-switch__thumb{transform:translate(-.9rem)}.mb-switch--lg .mb-switch__track{inline-size:2.9rem;block-size:1.55rem}.mb-switch--lg .mb-switch__thumb{inline-size:1.25rem;block-size:1.25rem}.mb-switch--lg.mb-switch--checked .mb-switch__thumb{transform:translate(1.35rem)}:host-context([dir=rtl]) .mb-switch--lg.mb-switch--checked .mb-switch__thumb,:host-context(.mb-rtl) .mb-switch--lg.mb-switch--checked .mb-switch__thumb{transform:translate(-1.35rem)}.mb-switch--disabled{opacity:.62;cursor:not-allowed}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbRadioGroupComponent {
+    options = [];
+    name = `mb-radio-${Math.random().toString(36).slice(2)}`;
+    size = 'md';
+    direction = 'vertical';
+    disabled = false;
+    valueChange = new EventEmitter();
+    hostClass = 'mb-radio-group-host';
+    value = null;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) { this.value = value; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    choose(option) {
+        if (this.disabled || option.disabled)
+            return;
+        this.value = option.value;
+        this.onChange(option.value);
+        this.valueChange.emit(option.value);
+        this.onTouched();
+    }
+    trackByValue(index) { return index; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbRadioGroupComponent, isStandalone: true, selector: "mb-radio-group", inputs: { options: "options", name: "name", size: "size", direction: "direction", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbRadioGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"mb-radio-group\" [class.mb-radio-group--horizontal]=\"direction === 'horizontal'\" [ngClass]=\"'mb-radio-group--' + size\" role=\"radiogroup\">\n  <label\n    *ngFor=\"let option of options; trackBy: trackByValue\"\n    class=\"mb-radio\"\n    [class.mb-radio--checked]=\"value === option.value\"\n    [class.mb-radio--disabled]=\"disabled || option.disabled\">\n    <input\n      class=\"mb-radio__native\"\n      type=\"radio\"\n      [name]=\"name\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"disabled || option.disabled\"\n      (change)=\"choose(option)\" />\n    <span class=\"mb-radio__circle\"><span class=\"mb-radio__dot\"></span></span>\n    <span class=\"mb-radio__content\">\n      <span class=\"mb-radio__label\">{{ option.label }}</span>\n      <span class=\"mb-radio__hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\n    </span>\n  </label>\n</div>\n", styles: [".mb-radio-group{display:grid;gap:.7rem}.mb-radio-group--horizontal{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem}.mb-radio{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;-webkit-user-select:none;user-select:none}.mb-radio__native{position:absolute;opacity:0;pointer-events:none}.mb-radio__circle{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:999px;background:var(--mb-color-bg);display:grid;place-items:center;margin-block-start:.08rem;transition:var(--mb-transition-fast)}.mb-radio__dot{inline-size:.52rem;block-size:.52rem;border-radius:999px;background:transparent;transform:scale(.5);transition:var(--mb-transition-fast)}.mb-radio:hover .mb-radio__circle,.mb-radio--checked .mb-radio__circle{border-color:var(--mb-color-primary)}.mb-radio--checked .mb-radio__dot{background:var(--mb-color-primary);transform:scale(1)}.mb-radio__native:focus-visible+.mb-radio__circle{box-shadow:var(--mb-focus-ring)}.mb-radio__content{display:grid;gap:.1rem}.mb-radio__label{font-weight:650;font-size:.9rem;color:var(--mb-color-text)}.mb-radio__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-radio--disabled{opacity:.62;cursor:not-allowed}.mb-radio-group--sm .mb-radio__circle{inline-size:.95rem;block-size:.95rem}.mb-radio-group--lg .mb-radio__circle{inline-size:1.25rem;block-size:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-radio-group', standalone: true, imports: [NgFor, NgIf, NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbRadioGroupComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-radio-group\" [class.mb-radio-group--horizontal]=\"direction === 'horizontal'\" [ngClass]=\"'mb-radio-group--' + size\" role=\"radiogroup\">\n  <label\n    *ngFor=\"let option of options; trackBy: trackByValue\"\n    class=\"mb-radio\"\n    [class.mb-radio--checked]=\"value === option.value\"\n    [class.mb-radio--disabled]=\"disabled || option.disabled\">\n    <input\n      class=\"mb-radio__native\"\n      type=\"radio\"\n      [name]=\"name\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"disabled || option.disabled\"\n      (change)=\"choose(option)\" />\n    <span class=\"mb-radio__circle\"><span class=\"mb-radio__dot\"></span></span>\n    <span class=\"mb-radio__content\">\n      <span class=\"mb-radio__label\">{{ option.label }}</span>\n      <span class=\"mb-radio__hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\n    </span>\n  </label>\n</div>\n", styles: [".mb-radio-group{display:grid;gap:.7rem}.mb-radio-group--horizontal{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem}.mb-radio{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;-webkit-user-select:none;user-select:none}.mb-radio__native{position:absolute;opacity:0;pointer-events:none}.mb-radio__circle{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:999px;background:var(--mb-color-bg);display:grid;place-items:center;margin-block-start:.08rem;transition:var(--mb-transition-fast)}.mb-radio__dot{inline-size:.52rem;block-size:.52rem;border-radius:999px;background:transparent;transform:scale(.5);transition:var(--mb-transition-fast)}.mb-radio:hover .mb-radio__circle,.mb-radio--checked .mb-radio__circle{border-color:var(--mb-color-primary)}.mb-radio--checked .mb-radio__dot{background:var(--mb-color-primary);transform:scale(1)}.mb-radio__native:focus-visible+.mb-radio__circle{box-shadow:var(--mb-focus-ring)}.mb-radio__content{display:grid;gap:.1rem}.mb-radio__label{font-weight:650;font-size:.9rem;color:var(--mb-color-text)}.mb-radio__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-radio--disabled{opacity:.62;cursor:not-allowed}.mb-radio-group--sm .mb-radio__circle{inline-size:.95rem;block-size:.95rem}.mb-radio-group--lg .mb-radio__circle{inline-size:1.25rem;block-size:1.25rem}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbTextareaComponent {
+    placeholder = '';
+    rows = 4;
+    size = 'md';
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    autoResize = false;
+    maxLength;
+    valueChange = new EventEmitter();
+    textarea;
+    hostClass = 'mb-textarea-host';
+    value = '';
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) { this.value = value ?? ''; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    onInput(event) {
+        const next = event.target.value;
+        this.value = next;
+        this.onChange(next);
+        this.valueChange.emit(next);
+        if (this.autoResize)
+            this.resize();
+    }
+    blur() { this.onTouched(); }
+    resize() {
+        const el = this.textarea?.nativeElement;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbTextareaComponent, isStandalone: true, selector: "mb-textarea", inputs: { placeholder: "placeholder", rows: "rows", size: "size", disabled: "disabled", readonly: "readonly", invalid: "invalid", autoResize: "autoResize", maxLength: "maxLength" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbTextareaComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<textarea\n  #textarea\n  class=\"mb-textarea\"\n  [class.mb-textarea--invalid]=\"invalid\"\n  [ngClass]=\"'mb-textarea--' + size\"\n  [placeholder]=\"placeholder\"\n  [rows]=\"rows\"\n  [disabled]=\"disabled\"\n  [readOnly]=\"readonly\"\n  [maxLength]=\"maxLength ?? null\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"blur()\"></textarea>\n", styles: [":host{display:block}.mb-textarea{inline-size:100%;min-block-size:5rem;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);font:inherit;padding:.72rem .85rem;resize:vertical;outline:none;transition:var(--mb-transition-fast)}.mb-textarea:focus{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-textarea::placeholder{color:var(--mb-color-muted)}.mb-textarea:disabled{opacity:.7;cursor:not-allowed;background:var(--mb-color-surface)}.mb-textarea--invalid{border-color:var(--mb-color-danger)}.mb-textarea--sm{padding:.55rem .7rem;font-size:.86rem}.mb-textarea--lg{padding:.9rem 1rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-textarea', standalone: true, imports: [NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbTextareaComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<textarea\n  #textarea\n  class=\"mb-textarea\"\n  [class.mb-textarea--invalid]=\"invalid\"\n  [ngClass]=\"'mb-textarea--' + size\"\n  [placeholder]=\"placeholder\"\n  [rows]=\"rows\"\n  [disabled]=\"disabled\"\n  [readOnly]=\"readonly\"\n  [maxLength]=\"maxLength ?? null\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"blur()\"></textarea>\n", styles: [":host{display:block}.mb-textarea{inline-size:100%;min-block-size:5rem;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-md);background:var(--mb-color-bg);color:var(--mb-color-text);font:inherit;padding:.72rem .85rem;resize:vertical;outline:none;transition:var(--mb-transition-fast)}.mb-textarea:focus{border-color:var(--mb-color-primary);box-shadow:var(--mb-focus-ring)}.mb-textarea::placeholder{color:var(--mb-color-muted)}.mb-textarea:disabled{opacity:.7;cursor:not-allowed;background:var(--mb-color-surface)}.mb-textarea--invalid{border-color:var(--mb-color-danger)}.mb-textarea--sm{padding:.55rem .7rem;font-size:.86rem}.mb-textarea--lg{padding:.9rem 1rem;font-size:1rem}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], textarea: [{
+                type: ViewChild,
+                args: ['textarea']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbDatepickerComponent {
+    cdr;
+    host;
+    messages = inject(MB_UI_MESSAGES);
+    uiConfig = inject(MB_UI_CONFIG);
+    mode = 'date';
+    calendar = 'gregorian';
+    placeholder;
+    min;
+    max;
+    size = 'md';
+    disabled = false;
+    invalid = false;
+    clearable = true;
+    firstDayOfWeek = 0;
+    locale;
+    monthNames;
+    weekdayNames;
+    disabledDates = () => false;
+    valueChange = new EventEmitter();
+    openedChange = new EventEmitter();
+    hostClass = 'mb-datepicker-host';
+    value = '';
+    opened = false;
+    viewDate = this.startOfMonth(new Date());
+    viewJalali = mbGregorianToJalali(this.toGregorian(new Date()));
+    days = [];
+    years = Array.from({ length: 21 }, (_, index) => new Date().getFullYear() - 10 + index);
+    jalaliYears = Array.from({ length: 21 }, (_, index) => this.viewJalali.year - 10 + index);
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    constructor(cdr, host) {
+        this.cdr = cdr;
+        this.host = host;
+        this.rebuildCalendar();
+    }
+    get effectivePlaceholder() {
+        return this.placeholder ?? this.messages.datepicker.placeholder;
+    }
+    get effectiveLocale() {
+        return this.locale ?? this.uiConfig.locale;
+    }
+    get effectiveWeekdayNames() {
+        return this.weekdayNames ?? this.messages.datepicker.weekdayNames;
+    }
+    get effectiveGregorianMonthNames() {
+        return this.monthNames ?? this.messages.datepicker.monthNamesGregorian;
+    }
+    get activeMonthNames() {
+        return this.calendar === 'jalali' ? MB_JALALI_MONTH_NAMES : this.effectiveGregorianMonthNames;
+    }
+    get activeYears() {
+        if (this.calendar === 'jalali') {
+            const center = this.viewJalali.year;
+            return Array.from({ length: 21 }, (_, index) => center - 10 + index);
+        }
+        return this.years;
+    }
+    onDocumentClick(event) {
+        if (this.opened && !this.host.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    writeValue(value) {
+        if (value instanceof Date) {
+            this.value = this.toIso(value);
+            this.viewDate = this.startOfMonth(value);
+            this.viewJalali = mbGregorianToJalali(this.toGregorian(value));
+        }
+        else {
+            this.value = value ?? '';
+            const parsed = this.parseIso(this.value);
+            if (parsed) {
+                this.viewDate = this.startOfMonth(parsed);
+                this.viewJalali = mbGregorianToJalali(this.toGregorian(parsed));
+            }
+        }
+        this.rebuildCalendar();
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    toggle() {
+        if (!this.disabled) {
+            this.opened ? this.close() : this.open();
+        }
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.opened = true;
+        this.openedChange.emit(true);
+        this.rebuildCalendar();
+        this.cdr.markForCheck();
+    }
+    close() {
+        this.opened = false;
+        this.onTouched();
+        this.openedChange.emit(false);
+        this.cdr.markForCheck();
+    }
+    clear(event) {
+        event?.stopPropagation();
+        if (this.disabled)
+            return;
+        this.commit('');
+        this.close();
+    }
+    select(day) {
+        if (day.disabled)
+            return;
+        this.commit(day.iso);
+        this.close();
+    }
+    selectToday() {
+        const today = new Date();
+        if (!this.isDisabled(today)) {
+            this.viewDate = this.startOfMonth(today);
+            this.viewJalali = mbGregorianToJalali(this.toGregorian(today));
+            this.commit(this.toIso(today));
+            this.close();
+        }
+    }
+    prevMonth() {
+        if (this.calendar === 'jalali') {
+            const month = this.viewJalali.month === 1 ? 12 : this.viewJalali.month - 1;
+            const year = this.viewJalali.month === 1 ? this.viewJalali.year - 1 : this.viewJalali.year;
+            this.viewJalali = { year, month, day: 1 };
+            this.viewDate = this.startOfMonth(this.jalaliToDate(this.viewJalali));
+        }
+        else {
+            this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+        }
+        this.rebuildCalendar();
+    }
+    nextMonth() {
+        if (this.calendar === 'jalali') {
+            const month = this.viewJalali.month === 12 ? 1 : this.viewJalali.month + 1;
+            const year = this.viewJalali.month === 12 ? this.viewJalali.year + 1 : this.viewJalali.year;
+            this.viewJalali = { year, month, day: 1 };
+            this.viewDate = this.startOfMonth(this.jalaliToDate(this.viewJalali));
+        }
+        else {
+            this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+        }
+        this.rebuildCalendar();
+    }
+    setMonth(value) {
+        const month = Number(value);
+        if (this.calendar === 'jalali') {
+            this.viewJalali = { ...this.viewJalali, month: month + 1 };
+            this.viewDate = this.startOfMonth(this.jalaliToDate(this.viewJalali));
+            if (this.mode === 'month') {
+                const gregorian = mbJalaliToGregorian({ year: this.viewJalali.year, month: this.viewJalali.month, day: 1 });
+                this.commit(`${gregorian.year}-${String(gregorian.month).padStart(2, '0')}`);
+                this.close();
+                return;
+            }
+        }
+        else {
+            this.viewDate = new Date(this.viewDate.getFullYear(), month, 1);
+            if (this.mode === 'month') {
+                this.commit(`${this.viewDate.getFullYear()}-${String(month + 1).padStart(2, '0')}`);
+                this.close();
+                return;
+            }
+        }
+        this.rebuildCalendar();
+    }
+    setYear(value) {
+        const year = Number(value);
+        if (this.calendar === 'jalali') {
+            this.viewJalali = { ...this.viewJalali, year };
+            this.viewDate = this.startOfMonth(this.jalaliToDate(this.viewJalali));
+        }
+        else {
+            this.viewDate = new Date(year, this.viewDate.getMonth(), 1);
+        }
+        this.rebuildCalendar();
+    }
+    displayValue() {
+        if (!this.value)
+            return '';
+        if (this.mode === 'month') {
+            if (this.calendar === 'jalali') {
+                const parsed = mbParseIsoDate(this.value.length === 7 ? `${this.value}-01` : this.value);
+                if (!parsed)
+                    return this.value;
+                const jalali = mbGregorianToJalali(parsed);
+                return `${MB_JALALI_MONTH_NAMES[jalali.month - 1]} ${jalali.year}`;
+            }
+            const [year, month] = this.value.split('-');
+            return `${this.monthNames[Number(month) - 1] ?? month} ${year}`;
+        }
+        const parsed = this.parseIso(this.value);
+        if (!parsed)
+            return this.value;
+        if (this.calendar === 'jalali') {
+            return mbFormatJalali(mbGregorianToJalali(this.toGregorian(parsed)));
+        }
+        try {
+            return new Intl.DateTimeFormat(this.effectiveLocale, { dateStyle: 'medium' }).format(parsed);
+        }
+        catch {
+            return this.value;
+        }
+    }
+    currentMonthIndex() {
+        return this.calendar === 'jalali' ? this.viewJalali.month - 1 : this.viewDate.getMonth();
+    }
+    currentYear() {
+        return this.calendar === 'jalali' ? this.viewJalali.year : this.viewDate.getFullYear();
+    }
+    commit(value, emit = true) {
+        this.value = value;
+        this.onChange(value);
+        if (emit)
+            this.valueChange.emit(value);
+        this.rebuildCalendar();
+        this.cdr.markForCheck();
+    }
+    rebuildCalendar() {
+        this.days = this.calendar === 'jalali' ? this.buildJalaliCalendar() : this.buildGregorianCalendar();
+        this.cdr.markForCheck();
+    }
+    buildGregorianCalendar() {
+        const first = this.startOfMonth(this.viewDate);
+        const start = new Date(first);
+        const offset = (start.getDay() - this.firstDayOfWeek + 7) % 7;
+        start.setDate(start.getDate() - offset);
+        const selected = this.parseIso(this.value);
+        const todayIso = this.toIso(new Date());
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = new Date(start);
+            date.setDate(start.getDate() + index);
+            const iso = this.toIso(date);
+            return {
+                date,
+                iso,
+                label: date.getDate(),
+                currentMonth: date.getMonth() === first.getMonth(),
+                today: iso === todayIso,
+                selected: !!selected && iso === this.toIso(selected),
+                disabled: this.isDisabled(date),
+            };
+        });
+    }
+    buildJalaliCalendar() {
+        const month = this.viewJalali.month;
+        const year = this.viewJalali.year;
+        const firstGregorian = this.jalaliToDate({ year, month, day: 1 });
+        const start = new Date(firstGregorian);
+        const offset = (start.getDay() - this.firstDayOfWeek + 7) % 7;
+        start.setDate(start.getDate() - offset);
+        const selected = this.parseIso(this.value);
+        const todayIso = this.toIso(new Date());
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = new Date(start);
+            date.setDate(start.getDate() + index);
+            const jalali = mbGregorianToJalali(this.toGregorian(date));
+            const iso = this.toIso(date);
+            return {
+                date,
+                iso,
+                label: jalali.day,
+                jalali,
+                currentMonth: jalali.month === month && jalali.year === year,
+                today: iso === todayIso,
+                selected: !!selected && iso === this.toIso(selected),
+                disabled: this.isDisabled(date),
+            };
+        });
+    }
+    jalaliToDate(date) {
+        const gregorian = mbJalaliToGregorian(date);
+        return new Date(gregorian.year, gregorian.month - 1, gregorian.day);
+    }
+    toGregorian(date) {
+        return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
+    }
+    isDisabled(date) {
+        const iso = this.toIso(date);
+        if (this.min && iso < this.min)
+            return true;
+        if (this.max && iso > this.max)
+            return true;
+        if (this.calendar === 'jalali') {
+            const jalali = mbGregorianToJalali(this.toGregorian(date));
+            const monthLength = mbJalaliMonthLength(jalali.year, jalali.month);
+            if (jalali.day > monthLength)
+                return true;
+        }
+        return this.disabledDates(date);
+    }
+    parseIso(value) {
+        if (!value)
+            return null;
+        const parts = value.split('-').map(Number);
+        if (parts.length < 2 || parts.some(Number.isNaN))
+            return null;
+        const [year, month, day = 1] = parts;
+        return new Date(year, month - 1, day);
+    }
+    toIso(date) {
+        return mbToIsoDate(this.toGregorian(date));
+    }
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDatepickerComponent, isStandalone: true, selector: "mb-datepicker", inputs: { mode: "mode", calendar: "calendar", placeholder: "placeholder", min: "min", max: "max", size: "size", disabled: "disabled", invalid: "invalid", clearable: "clearable", firstDayOfWeek: "firstDayOfWeek", locale: "locale", monthNames: "monthNames", weekdayNames: "weekdayNames", disabledDates: "disabledDates" }, outputs: { valueChange: "valueChange", openedChange: "openedChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MbDatepickerComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"mb-datepicker-shell\" [class.mb-datepicker-shell--open]=\"opened\">\n  <button\n    type=\"button\"\n    class=\"mb-datepicker-trigger\"\n    [class.mb-datepicker-trigger--invalid]=\"invalid\"\n    [ngClass]=\"'mb-datepicker-trigger--' + size\"\n    [disabled]=\"disabled\"\n    (click)=\"toggle()\">\n    <span class=\"mb-datepicker-value\" [class.mb-datepicker-value--placeholder]=\"!value\">{{ value ? displayValue() : effectivePlaceholder }}</span>\n    <span class=\"mb-datepicker-actions\">\n      <button\n        *ngIf=\"clearable && value && !disabled\"\n        type=\"button\"\n        class=\"mb-datepicker-clear\"\n        [attr.aria-label]=\"messages.datepicker.clear\"\n        (click)=\"clear($event)\">\u00D7</button>\n      <span class=\"mb-datepicker-icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </span>\n  </button>\n\n  <div *ngIf=\"opened\" class=\"mb-datepicker-panel\" role=\"dialog\" [attr.aria-label]=\"messages.datepicker.pickDate\">\n    <div class=\"mb-datepicker-header\">\n      <button type=\"button\" class=\"mb-datepicker-nav\" (click)=\"prevMonth()\">\u2039</button>\n      <div class=\"mb-datepicker-title\">\n        <select [value]=\"currentMonthIndex()\" (change)=\"setMonth($any($event.target).value)\">\n          <option *ngFor=\"let month of activeMonthNames; index as monthIndex\" [value]=\"monthIndex\">{{ month }}</option>\n        </select>\n        <select [value]=\"currentYear()\" (change)=\"setYear($any($event.target).value)\">\n          <option *ngFor=\"let year of activeYears\" [value]=\"year\">{{ year }}</option>\n        </select>\n      </div>\n      <button type=\"button\" class=\"mb-datepicker-nav\" (click)=\"nextMonth()\">\u203A</button>\n    </div>\n\n    <ng-container *ngIf=\"mode === 'date'; else monthPicker\">\n      <div class=\"mb-datepicker-weekdays\">\n        <span *ngFor=\"let weekday of effectiveWeekdayNames\">{{ weekday }}</span>\n      </div>\n      <div class=\"mb-datepicker-grid\">\n        <button\n          *ngFor=\"let day of days\"\n          type=\"button\"\n          class=\"mb-datepicker-day\"\n          [class.mb-datepicker-day--muted]=\"!day.currentMonth\"\n          [class.mb-datepicker-day--today]=\"day.today\"\n          [class.mb-datepicker-day--selected]=\"day.selected\"\n          [disabled]=\"day.disabled\"\n          (click)=\"select(day)\">{{ day.label }}</button>\n      </div>\n    </ng-container>\n\n    <ng-template #monthPicker>\n      <div class=\"mb-datepicker-months\">\n        <button *ngFor=\"let month of activeMonthNames; index as monthIndex\" type=\"button\" class=\"mb-datepicker-month\" (click)=\"setMonth(monthIndex)\">{{ month }}</button>\n      </div>\n    </ng-template>\n\n    <div class=\"mb-datepicker-footer\">\n      <button type=\"button\" (click)=\"selectToday()\">{{ messages.datepicker.today }}</button>\n      <button type=\"button\" (click)=\"close()\">{{ messages.common.close }}</button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:inline-block;min-width:14rem;position:relative}.mb-datepicker-shell{position:relative;width:100%}.mb-datepicker-trigger{width:100%;min-height:var(--mb-control-height-md, 2.5rem);display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid var(--mb-color-border, #d0d5dd);border-radius:var(--mb-radius-md, .625rem);padding-inline:.75rem;background:var(--mb-color-surface, #fff);color:var(--mb-color-text, #101828);cursor:pointer}.mb-datepicker-trigger:hover{border-color:var(--mb-color-primary, #2563eb)}.mb-datepicker-trigger--invalid{border-color:var(--mb-color-danger, #dc2626)}.mb-datepicker-value--placeholder{color:var(--mb-color-muted, #667085)}.mb-datepicker-actions{display:inline-flex;align-items:center;gap:.25rem}.mb-datepicker-clear{border:0;background:transparent;color:var(--mb-color-muted, #667085);cursor:pointer;font-size:1.2rem}.mb-datepicker-panel{position:absolute;z-index:1000;inset-block-start:calc(100% + .4rem);inset-inline-start:0;inline-size:20rem;max-inline-size:min(20rem,100vw - 2rem);border:1px solid var(--mb-color-border, #e2e8f0);border-radius:var(--mb-radius-lg, .875rem);background:var(--mb-color-surface, #fff);color:var(--mb-color-text, #101828);box-shadow:var(--mb-shadow-lg, 0 18px 45px rgba(15, 23, 42, .16));padding:.75rem}.mb-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-end:.75rem}.mb-datepicker-nav,.mb-datepicker-footer button,.mb-datepicker-month,.mb-datepicker-day{border:1px solid transparent;border-radius:var(--mb-radius-md, .625rem);background:transparent;color:inherit;cursor:pointer}.mb-datepicker-nav{inline-size:2rem;block-size:2rem;font-size:1.4rem}.mb-datepicker-nav:hover,.mb-datepicker-footer button:hover,.mb-datepicker-month:hover,.mb-datepicker-day:hover:not(:disabled){background:var(--mb-color-surface-muted, #f1f5f9)}.mb-datepicker-title{display:flex;gap:.4rem}.mb-datepicker-title select{border:1px solid var(--mb-color-border, #e2e8f0);border-radius:var(--mb-radius-sm, .5rem);background:var(--mb-color-surface, #fff);color:inherit;padding:.25rem .45rem}.mb-datepicker-weekdays,.mb-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}.mb-datepicker-weekdays{color:var(--mb-color-muted, #64748b);font-size:.75rem;text-align:center;margin-block-end:.25rem}.mb-datepicker-day{aspect-ratio:1;font-variant-numeric:tabular-nums}.mb-datepicker-day--muted{color:var(--mb-color-muted, #64748b);opacity:.65}.mb-datepicker-day--today{border-color:var(--mb-color-primary, #2563eb)}.mb-datepicker-day--selected{background:var(--mb-color-primary, #2563eb);color:var(--mb-color-primary-contrast, #fff)}.mb-datepicker-day:disabled{opacity:.35;cursor:not-allowed}.mb-datepicker-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.mb-datepicker-month{padding:.6rem .35rem}.mb-datepicker-footer{display:flex;justify-content:space-between;gap:.5rem;margin-block-start:.75rem;border-block-start:1px solid var(--mb-color-border, #e2e8f0);padding-block-start:.75rem}.mb-datepicker-footer button{padding:.45rem .75rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-datepicker', standalone: true, imports: [NgClass, NgFor, NgIf], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MbDatepickerComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-datepicker-shell\" [class.mb-datepicker-shell--open]=\"opened\">\n  <button\n    type=\"button\"\n    class=\"mb-datepicker-trigger\"\n    [class.mb-datepicker-trigger--invalid]=\"invalid\"\n    [ngClass]=\"'mb-datepicker-trigger--' + size\"\n    [disabled]=\"disabled\"\n    (click)=\"toggle()\">\n    <span class=\"mb-datepicker-value\" [class.mb-datepicker-value--placeholder]=\"!value\">{{ value ? displayValue() : effectivePlaceholder }}</span>\n    <span class=\"mb-datepicker-actions\">\n      <button\n        *ngIf=\"clearable && value && !disabled\"\n        type=\"button\"\n        class=\"mb-datepicker-clear\"\n        [attr.aria-label]=\"messages.datepicker.clear\"\n        (click)=\"clear($event)\">\u00D7</button>\n      <span class=\"mb-datepicker-icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </span>\n  </button>\n\n  <div *ngIf=\"opened\" class=\"mb-datepicker-panel\" role=\"dialog\" [attr.aria-label]=\"messages.datepicker.pickDate\">\n    <div class=\"mb-datepicker-header\">\n      <button type=\"button\" class=\"mb-datepicker-nav\" (click)=\"prevMonth()\">\u2039</button>\n      <div class=\"mb-datepicker-title\">\n        <select [value]=\"currentMonthIndex()\" (change)=\"setMonth($any($event.target).value)\">\n          <option *ngFor=\"let month of activeMonthNames; index as monthIndex\" [value]=\"monthIndex\">{{ month }}</option>\n        </select>\n        <select [value]=\"currentYear()\" (change)=\"setYear($any($event.target).value)\">\n          <option *ngFor=\"let year of activeYears\" [value]=\"year\">{{ year }}</option>\n        </select>\n      </div>\n      <button type=\"button\" class=\"mb-datepicker-nav\" (click)=\"nextMonth()\">\u203A</button>\n    </div>\n\n    <ng-container *ngIf=\"mode === 'date'; else monthPicker\">\n      <div class=\"mb-datepicker-weekdays\">\n        <span *ngFor=\"let weekday of effectiveWeekdayNames\">{{ weekday }}</span>\n      </div>\n      <div class=\"mb-datepicker-grid\">\n        <button\n          *ngFor=\"let day of days\"\n          type=\"button\"\n          class=\"mb-datepicker-day\"\n          [class.mb-datepicker-day--muted]=\"!day.currentMonth\"\n          [class.mb-datepicker-day--today]=\"day.today\"\n          [class.mb-datepicker-day--selected]=\"day.selected\"\n          [disabled]=\"day.disabled\"\n          (click)=\"select(day)\">{{ day.label }}</button>\n      </div>\n    </ng-container>\n\n    <ng-template #monthPicker>\n      <div class=\"mb-datepicker-months\">\n        <button *ngFor=\"let month of activeMonthNames; index as monthIndex\" type=\"button\" class=\"mb-datepicker-month\" (click)=\"setMonth(monthIndex)\">{{ month }}</button>\n      </div>\n    </ng-template>\n\n    <div class=\"mb-datepicker-footer\">\n      <button type=\"button\" (click)=\"selectToday()\">{{ messages.datepicker.today }}</button>\n      <button type=\"button\" (click)=\"close()\">{{ messages.common.close }}</button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:inline-block;min-width:14rem;position:relative}.mb-datepicker-shell{position:relative;width:100%}.mb-datepicker-trigger{width:100%;min-height:var(--mb-control-height-md, 2.5rem);display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid var(--mb-color-border, #d0d5dd);border-radius:var(--mb-radius-md, .625rem);padding-inline:.75rem;background:var(--mb-color-surface, #fff);color:var(--mb-color-text, #101828);cursor:pointer}.mb-datepicker-trigger:hover{border-color:var(--mb-color-primary, #2563eb)}.mb-datepicker-trigger--invalid{border-color:var(--mb-color-danger, #dc2626)}.mb-datepicker-value--placeholder{color:var(--mb-color-muted, #667085)}.mb-datepicker-actions{display:inline-flex;align-items:center;gap:.25rem}.mb-datepicker-clear{border:0;background:transparent;color:var(--mb-color-muted, #667085);cursor:pointer;font-size:1.2rem}.mb-datepicker-panel{position:absolute;z-index:1000;inset-block-start:calc(100% + .4rem);inset-inline-start:0;inline-size:20rem;max-inline-size:min(20rem,100vw - 2rem);border:1px solid var(--mb-color-border, #e2e8f0);border-radius:var(--mb-radius-lg, .875rem);background:var(--mb-color-surface, #fff);color:var(--mb-color-text, #101828);box-shadow:var(--mb-shadow-lg, 0 18px 45px rgba(15, 23, 42, .16));padding:.75rem}.mb-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-end:.75rem}.mb-datepicker-nav,.mb-datepicker-footer button,.mb-datepicker-month,.mb-datepicker-day{border:1px solid transparent;border-radius:var(--mb-radius-md, .625rem);background:transparent;color:inherit;cursor:pointer}.mb-datepicker-nav{inline-size:2rem;block-size:2rem;font-size:1.4rem}.mb-datepicker-nav:hover,.mb-datepicker-footer button:hover,.mb-datepicker-month:hover,.mb-datepicker-day:hover:not(:disabled){background:var(--mb-color-surface-muted, #f1f5f9)}.mb-datepicker-title{display:flex;gap:.4rem}.mb-datepicker-title select{border:1px solid var(--mb-color-border, #e2e8f0);border-radius:var(--mb-radius-sm, .5rem);background:var(--mb-color-surface, #fff);color:inherit;padding:.25rem .45rem}.mb-datepicker-weekdays,.mb-datepicker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem}.mb-datepicker-weekdays{color:var(--mb-color-muted, #64748b);font-size:.75rem;text-align:center;margin-block-end:.25rem}.mb-datepicker-day{aspect-ratio:1;font-variant-numeric:tabular-nums}.mb-datepicker-day--muted{color:var(--mb-color-muted, #64748b);opacity:.65}.mb-datepicker-day--today{border-color:var(--mb-color-primary, #2563eb)}.mb-datepicker-day--selected{background:var(--mb-color-primary, #2563eb);color:var(--mb-color-primary-contrast, #fff)}.mb-datepicker-day:disabled{opacity:.35;cursor:not-allowed}.mb-datepicker-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.mb-datepicker-month{padding:.6rem .35rem}.mb-datepicker-footer{display:flex;justify-content:space-between;gap:.5rem;margin-block-start:.75rem;border-block-start:1px solid var(--mb-color-border, #e2e8f0);padding-block-start:.75rem}.mb-datepicker-footer button{padding:.45rem .75rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { mode: [{
+                type: Input
+            }], calendar: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], monthNames: [{
+                type: Input
+            }], weekdayNames: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], openedChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class MbBadgeComponent {
+    variant = 'neutral';
+    size = 'md';
+    dot = false;
+    pill = true;
+    hostClass = 'mb-badge-host';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbBadgeComponent, isStandalone: true, selector: "mb-badge", inputs: { variant: "variant", size: "size", dot: "dot", pill: "pill" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-badge\" [class.mb-badge--pill]=\"pill\" [class.mb-badge--dot-only]=\"dot\" [ngClass]=\"['mb-badge--' + variant, 'mb-badge--' + size]\">\n  <span class=\"mb-badge__dot\" *ngIf=\"dot\"></span>\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-flex}.mb-badge{display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;border-radius:var(--mb-radius-md);padding:.2rem .55rem;font-weight:750;font-size:.76rem;line-height:1.1}.mb-badge--pill{border-radius:999px}.mb-badge--sm{font-size:.68rem;padding:.14rem .42rem}.mb-badge--lg{font-size:.86rem;padding:.28rem .7rem}.mb-badge__dot{inline-size:.42rem;block-size:.42rem;border-radius:999px;background:currentColor}.mb-badge--dot-only{padding:.25rem}.mb-badge--primary{color:var(--mb-color-primary);background:var(--mb-color-primary-soft)}.mb-badge--success{color:var(--mb-color-success);background:var(--mb-color-success-soft)}.mb-badge--warning{color:var(--mb-color-warning);background:var(--mb-color-warning-soft)}.mb-badge--danger{color:var(--mb-color-danger);background:var(--mb-color-danger-soft)}.mb-badge--neutral{color:var(--mb-color-muted);background:var(--mb-color-surface);border-color:var(--mb-color-border)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-badge', standalone: true, imports: [NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-badge\" [class.mb-badge--pill]=\"pill\" [class.mb-badge--dot-only]=\"dot\" [ngClass]=\"['mb-badge--' + variant, 'mb-badge--' + size]\">\n  <span class=\"mb-badge__dot\" *ngIf=\"dot\"></span>\n  <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-flex}.mb-badge{display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;border-radius:var(--mb-radius-md);padding:.2rem .55rem;font-weight:750;font-size:.76rem;line-height:1.1}.mb-badge--pill{border-radius:999px}.mb-badge--sm{font-size:.68rem;padding:.14rem .42rem}.mb-badge--lg{font-size:.86rem;padding:.28rem .7rem}.mb-badge__dot{inline-size:.42rem;block-size:.42rem;border-radius:999px;background:currentColor}.mb-badge--dot-only{padding:.25rem}.mb-badge--primary{color:var(--mb-color-primary);background:var(--mb-color-primary-soft)}.mb-badge--success{color:var(--mb-color-success);background:var(--mb-color-success-soft)}.mb-badge--warning{color:var(--mb-color-warning);background:var(--mb-color-warning-soft)}.mb-badge--danger{color:var(--mb-color-danger);background:var(--mb-color-danger-soft)}.mb-badge--neutral{color:var(--mb-color-muted);background:var(--mb-color-surface);border-color:var(--mb-color-border)}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], pill: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbChipComponent {
+    removable = false;
+    selected = false;
+    disabled = false;
+    removed = new EventEmitter();
+    hostClass = 'mb-chip-host';
+    remove(event) {
+        event.stopPropagation();
+        if (!this.disabled)
+            this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbChipComponent, isStandalone: true, selector: "mb-chip", inputs: { removable: "removable", selected: "selected", disabled: "disabled" }, outputs: { removed: "removed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-chip\" [class.mb-chip--selected]=\"selected\" [class.mb-chip--disabled]=\"disabled\">\n  <ng-content></ng-content>\n  <button *ngIf=\"removable\" type=\"button\" class=\"mb-chip__remove\" [disabled]=\"disabled\" (click)=\"remove($event)\" aria-label=\"Remove\">\u00D7</button>\n</span>\n", styles: [":host{display:inline-flex}.mb-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:999px;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);color:var(--mb-color-text);font-weight:650;font-size:.82rem}.mb-chip--selected{background:var(--mb-color-primary-soft);color:var(--mb-color-primary);border-color:transparent}.mb-chip--disabled{opacity:.6}.mb-chip__remove{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-chip', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-chip\" [class.mb-chip--selected]=\"selected\" [class.mb-chip--disabled]=\"disabled\">\n  <ng-content></ng-content>\n  <button *ngIf=\"removable\" type=\"button\" class=\"mb-chip__remove\" [disabled]=\"disabled\" (click)=\"remove($event)\" aria-label=\"Remove\">\u00D7</button>\n</span>\n", styles: [":host{display:inline-flex}.mb-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:999px;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);color:var(--mb-color-text);font-weight:650;font-size:.82rem}.mb-chip--selected{background:var(--mb-color-primary-soft);color:var(--mb-color-primary);border-color:transparent}.mb-chip--disabled{opacity:.6}.mb-chip__remove{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}\n"] }]
+        }], propDecorators: { removable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], removed: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbAvatarComponent {
+    src;
+    alt = '';
+    name = '';
+    size = 'md';
+    hostClass = 'mb-avatar-host';
+    get initials() {
+        const parts = this.name.trim().split(/\s+/).filter(Boolean);
+        return parts.slice(0, 2).map((p) => p[0]?.toUpperCase() ?? '').join('') || '?';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAvatarComponent, isStandalone: true, selector: "mb-avatar", inputs: { src: "src", alt: "alt", name: "name", size: "size" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-avatar\" [class]=\"'mb-avatar mb-avatar--' + size\">\n  <img *ngIf=\"src; else fallback\" [src]=\"src\" [alt]=\"alt || name\" />\n  <ng-template #fallback>{{ initials }}</ng-template>\n</span>\n", styles: [":host{display:inline-flex}.mb-avatar{inline-size:2.3rem;block-size:2.3rem;border-radius:999px;overflow:hidden;display:inline-grid;place-items:center;background:var(--mb-color-primary-soft);color:var(--mb-color-primary);font-weight:800;border:1px solid var(--mb-color-border)}.mb-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.mb-avatar--sm{inline-size:1.75rem;block-size:1.75rem;font-size:.75rem}.mb-avatar--lg{inline-size:3rem;block-size:3rem;font-size:1.1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-avatar', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-avatar\" [class]=\"'mb-avatar mb-avatar--' + size\">\n  <img *ngIf=\"src; else fallback\" [src]=\"src\" [alt]=\"alt || name\" />\n  <ng-template #fallback>{{ initials }}</ng-template>\n</span>\n", styles: [":host{display:inline-flex}.mb-avatar{inline-size:2.3rem;block-size:2.3rem;border-radius:999px;overflow:hidden;display:inline-grid;place-items:center;background:var(--mb-color-primary-soft);color:var(--mb-color-primary);font-weight:800;border:1px solid var(--mb-color-border)}.mb-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.mb-avatar--sm{inline-size:1.75rem;block-size:1.75rem;font-size:.75rem}.mb-avatar--lg{inline-size:3rem;block-size:3rem;font-size:1.1rem}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbCardComponent {
+    title = '';
+    subtitle = '';
+    padding = 'md';
+    elevated = false;
+    hostClass = 'mb-card-host';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbCardComponent, isStandalone: true, selector: "mb-card", inputs: { title: "title", subtitle: "subtitle", padding: "padding", elevated: "elevated" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<section class=\"mb-card\" [class.mb-card--elevated]=\"elevated\" [class]=\"'mb-card mb-card--padding-' + padding\">\n  <header class=\"mb-card__header\" *ngIf=\"title || subtitle\">\n    <h3 class=\"mb-card__title\" *ngIf=\"title\">{{ title }}</h3>\n    <p class=\"mb-card__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</p>\n  </header>\n  <div class=\"mb-card__content\"><ng-content></ng-content></div>\n</section>\n", styles: [":host{display:block}.mb-card{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);overflow:hidden}.mb-card--elevated{box-shadow:var(--mb-shadow-md)}.mb-card__header{border-block-end:1px solid var(--mb-color-border);padding-block-end:.85rem;margin-block-end:.9rem}.mb-card__title{margin:0;font-size:1rem;font-weight:800}.mb-card__subtitle{margin:.25rem 0 0;color:var(--mb-color-muted);font-size:.86rem}.mb-card--padding-none{padding:0}.mb-card--padding-sm{padding:.75rem}.mb-card--padding-md{padding:1rem}.mb-card--padding-lg{padding:1.35rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-card', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mb-card\" [class.mb-card--elevated]=\"elevated\" [class]=\"'mb-card mb-card--padding-' + padding\">\n  <header class=\"mb-card__header\" *ngIf=\"title || subtitle\">\n    <h3 class=\"mb-card__title\" *ngIf=\"title\">{{ title }}</h3>\n    <p class=\"mb-card__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</p>\n  </header>\n  <div class=\"mb-card__content\"><ng-content></ng-content></div>\n</section>\n", styles: [":host{display:block}.mb-card{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);overflow:hidden}.mb-card--elevated{box-shadow:var(--mb-shadow-md)}.mb-card__header{border-block-end:1px solid var(--mb-color-border);padding-block-end:.85rem;margin-block-end:.9rem}.mb-card__title{margin:0;font-size:1rem;font-weight:800}.mb-card__subtitle{margin:.25rem 0 0;color:var(--mb-color-muted);font-size:.86rem}.mb-card--padding-none{padding:0}.mb-card--padding-sm{padding:.75rem}.mb-card--padding-md{padding:1rem}.mb-card--padding-lg{padding:1.35rem}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], elevated: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbAlertComponent {
+    variant = 'info';
+    title = '';
+    closable = false;
+    closed = new EventEmitter();
+    hostClass = 'mb-alert-host';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAlertComponent, isStandalone: true, selector: "mb-alert", inputs: { variant: "variant", title: "title", closable: "closable" }, outputs: { closed: "closed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-alert\" [class]=\"'mb-alert mb-alert--' + variant\" role=\"alert\">\n  <div class=\"mb-alert__body\">\n    <strong *ngIf=\"title\" class=\"mb-alert__title\">{{ title }}</strong>\n    <div class=\"mb-alert__content\"><ng-content></ng-content></div>\n  </div>\n  <button *ngIf=\"closable\" type=\"button\" class=\"mb-alert__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\u00D7</button>\n</div>\n", styles: [":host{display:block}.mb-alert{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--mb-radius-lg);border:1px solid transparent}.mb-alert__body{display:grid;gap:.25rem}.mb-alert__title{font-weight:850}.mb-alert__content{font-size:.9rem}.mb-alert__close{border:0;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}.mb-alert--info{background:var(--mb-color-primary-soft);color:var(--mb-color-primary)}.mb-alert--success{background:var(--mb-color-success-soft);color:var(--mb-color-success)}.mb-alert--warning{background:var(--mb-color-warning-soft);color:var(--mb-color-warning)}.mb-alert--danger{background:var(--mb-color-danger-soft);color:var(--mb-color-danger)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-alert', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-alert\" [class]=\"'mb-alert mb-alert--' + variant\" role=\"alert\">\n  <div class=\"mb-alert__body\">\n    <strong *ngIf=\"title\" class=\"mb-alert__title\">{{ title }}</strong>\n    <div class=\"mb-alert__content\"><ng-content></ng-content></div>\n  </div>\n  <button *ngIf=\"closable\" type=\"button\" class=\"mb-alert__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\u00D7</button>\n</div>\n", styles: [":host{display:block}.mb-alert{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--mb-radius-lg);border:1px solid transparent}.mb-alert__body{display:grid;gap:.25rem}.mb-alert__title{font-weight:850}.mb-alert__content{font-size:.9rem}.mb-alert__close{border:0;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}.mb-alert--info{background:var(--mb-color-primary-soft);color:var(--mb-color-primary)}.mb-alert--success{background:var(--mb-color-success-soft);color:var(--mb-color-success)}.mb-alert--warning{background:var(--mb-color-warning-soft);color:var(--mb-color-warning)}.mb-alert--danger{background:var(--mb-color-danger-soft);color:var(--mb-color-danger)}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbSpinnerComponent {
+    size = 'md';
+    label = 'Loading';
+    hostClass = 'mb-spinner-host';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbSpinnerComponent, isStandalone: true, selector: "mb-spinner", inputs: { size: "size", label: "label" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-spinner\" [class]=\"'mb-spinner mb-spinner--' + size\" role=\"status\" [attr.aria-label]=\"label\"></span>\n", styles: [":host{display:inline-flex}.mb-spinner{inline-size:1.35rem;block-size:1.35rem;border-radius:999px;border:2px solid var(--mb-color-border);border-block-start-color:var(--mb-color-primary);animation:mb-spin .75s linear infinite}.mb-spinner--sm{inline-size:1rem;block-size:1rem;border-width:2px}.mb-spinner--lg{inline-size:2rem;block-size:2rem;border-width:3px}@keyframes mb-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-spinner\" [class]=\"'mb-spinner mb-spinner--' + size\" role=\"status\" [attr.aria-label]=\"label\"></span>\n", styles: [":host{display:inline-flex}.mb-spinner{inline-size:1.35rem;block-size:1.35rem;border-radius:999px;border:2px solid var(--mb-color-border);border-block-start-color:var(--mb-color-primary);animation:mb-spin .75s linear infinite}.mb-spinner--sm{inline-size:1rem;block-size:1rem;border-width:2px}.mb-spinner--lg{inline-size:2rem;block-size:2rem;border-width:3px}@keyframes mb-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbSkeletonComponent {
+    width = '100%';
+    height = '1rem';
+    radius = 'var(--mb-radius-md)';
+    hostClass = 'mb-skeleton-host';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbSkeletonComponent, isStandalone: true, selector: "mb-skeleton", inputs: { width: "width", height: "height", radius: "radius" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-skeleton\" [style.width]=\"width\" [style.height]=\"height\" [style.border-radius]=\"radius\"></span>\n", styles: [":host{display:block}.mb-skeleton{display:block;background:linear-gradient(90deg,var(--mb-color-surface),var(--mb-color-border),var(--mb-color-surface));background-size:200% 100%;animation:mb-skeleton 1.2s ease-in-out infinite}@keyframes mb-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-skeleton\" [style.width]=\"width\" [style.height]=\"height\" [style.border-radius]=\"radius\"></span>\n", styles: [":host{display:block}.mb-skeleton{display:block;background:linear-gradient(90deg,var(--mb-color-surface),var(--mb-color-border),var(--mb-color-surface));background-size:200% 100%;animation:mb-skeleton 1.2s ease-in-out infinite}@keyframes mb-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbProgressComponent {
+    value = 0;
+    max = 100;
+    label = false;
+    indeterminate = false;
+    hostClass = 'mb-progress-host';
+    get percent() { return this.max <= 0 ? 0 : Math.max(0, Math.min(100, Math.round((this.value / this.max) * 100))); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbProgressComponent, isStandalone: true, selector: "mb-progress", inputs: { value: "value", max: "max", label: "label", indeterminate: "indeterminate" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-progress\" [class.mb-progress--indeterminate]=\"indeterminate\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : value\" [attr.aria-valuemax]=\"max\">\n  <span class=\"mb-progress__bar\" [style.width.%]=\"indeterminate ? null : percent\"></span>\n</div>\n<span class=\"mb-progress__label\" *ngIf=\"label && !indeterminate\">{{ percent }}%</span>\n", styles: [":host{display:grid;gap:.35rem}.mb-progress{block-size:.55rem;border-radius:999px;background:var(--mb-color-surface);overflow:hidden;border:1px solid var(--mb-color-border)}.mb-progress__bar{display:block;block-size:100%;background:var(--mb-color-primary);border-radius:inherit;transition:width var(--mb-transition-normal)}.mb-progress--indeterminate .mb-progress__bar{inline-size:45%;animation:mb-progress-slide 1.2s ease-in-out infinite}.mb-progress__label{font-size:.78rem;color:var(--mb-color-muted)}@keyframes mb-progress-slide{0%{transform:translate(-120%)}to{transform:translate(250%)}}:host-context([dir=rtl]) .mb-progress--indeterminate .mb-progress__bar,:host-context(.mb-rtl) .mb-progress--indeterminate .mb-progress__bar{animation-name:mb-progress-slide-rtl}@keyframes mb-progress-slide-rtl{0%{transform:translate(120%)}to{transform:translate(-250%)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-progress', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-progress\" [class.mb-progress--indeterminate]=\"indeterminate\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : value\" [attr.aria-valuemax]=\"max\">\n  <span class=\"mb-progress__bar\" [style.width.%]=\"indeterminate ? null : percent\"></span>\n</div>\n<span class=\"mb-progress__label\" *ngIf=\"label && !indeterminate\">{{ percent }}%</span>\n", styles: [":host{display:grid;gap:.35rem}.mb-progress{block-size:.55rem;border-radius:999px;background:var(--mb-color-surface);overflow:hidden;border:1px solid var(--mb-color-border)}.mb-progress__bar{display:block;block-size:100%;background:var(--mb-color-primary);border-radius:inherit;transition:width var(--mb-transition-normal)}.mb-progress--indeterminate .mb-progress__bar{inline-size:45%;animation:mb-progress-slide 1.2s ease-in-out infinite}.mb-progress__label{font-size:.78rem;color:var(--mb-color-muted)}@keyframes mb-progress-slide{0%{transform:translate(-120%)}to{transform:translate(250%)}}:host-context([dir=rtl]) .mb-progress--indeterminate .mb-progress__bar,:host-context(.mb-rtl) .mb-progress--indeterminate .mb-progress__bar{animation-name:mb-progress-slide-rtl}@keyframes mb-progress-slide-rtl{0%{transform:translate(120%)}to{transform:translate(-250%)}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbEmptyComponent {
+    messages = inject(MB_UI_MESSAGES);
+    title;
+    description = '';
+    hostClass = 'mb-empty-host';
+    get effectiveTitle() {
+        return this.title ?? this.messages.empty.title;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbEmptyComponent, isStandalone: true, selector: "mb-empty", inputs: { title: "title", description: "description" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-empty\">\n  <div class=\"mb-empty__icon\" aria-hidden=\"true\">\u2205</div>\n  <strong class=\"mb-empty__title\">{{ effectiveTitle }}</strong>\n  <p class=\"mb-empty__desc\" *ngIf=\"description\">{{ description }}</p>\n  <div class=\"mb-empty__actions\"><ng-content></ng-content></div>\n</div>\n", styles: [":host{display:block}.mb-empty{display:grid;justify-items:center;text-align:center;gap:.55rem;padding:2rem;color:var(--mb-color-muted)}.mb-empty__icon{inline-size:3rem;block-size:3rem;border-radius:999px;display:grid;place-items:center;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);font-size:1.6rem}.mb-empty__title{color:var(--mb-color-text);font-size:.95rem}.mb-empty__desc{margin:0;font-size:.86rem}.mb-empty__actions{margin-block-start:.5rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbEmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-empty', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-empty\">\n  <div class=\"mb-empty__icon\" aria-hidden=\"true\">\u2205</div>\n  <strong class=\"mb-empty__title\">{{ effectiveTitle }}</strong>\n  <p class=\"mb-empty__desc\" *ngIf=\"description\">{{ description }}</p>\n  <div class=\"mb-empty__actions\"><ng-content></ng-content></div>\n</div>\n", styles: [":host{display:block}.mb-empty{display:grid;justify-items:center;text-align:center;gap:.55rem;padding:2rem;color:var(--mb-color-muted)}.mb-empty__icon{inline-size:3rem;block-size:3rem;border-radius:999px;display:grid;place-items:center;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);font-size:1.6rem}.mb-empty__title{color:var(--mb-color-text);font-size:.95rem}.mb-empty__desc{margin:0;font-size:.86rem}.mb-empty__actions{margin-block-start:.5rem}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbDividerComponent {
+    orientation = 'horizontal';
+    get hostClass() { return `mb-divider-host mb-divider-host--${this.orientation}`; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDividerComponent, isStandalone: true, selector: "mb-divider", inputs: { orientation: "orientation" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: '<span class="mb-divider__text"><ng-content></ng-content></span>', isInline: true, styles: [":host{display:flex;align-items:center;color:var(--mb-color-muted)}:host(.mb-divider-host--horizontal){inline-size:100%;border-block-start:1px solid var(--mb-color-border);margin-block:1rem;justify-content:center}:host(.mb-divider-host--vertical){align-self:stretch;border-inline-start:1px solid var(--mb-color-border);margin-inline:.75rem}.mb-divider__text{background:var(--mb-color-bg);padding-inline:.5rem;margin-block-start:-.75rem;font-size:.78rem}:host(.mb-divider-host--vertical) .mb-divider__text{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-divider', standalone: true, template: '<span class="mb-divider__text"><ng-content></ng-content></span>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;color:var(--mb-color-muted)}:host(.mb-divider-host--horizontal){inline-size:100%;border-block-start:1px solid var(--mb-color-border);margin-block:1rem;justify-content:center}:host(.mb-divider-host--vertical){align-self:stretch;border-inline-start:1px solid var(--mb-color-border);margin-inline:.75rem}.mb-divider__text{background:var(--mb-color-bg);padding-inline:.5rem;margin-block-start:-.75rem;font-size:.78rem}:host(.mb-divider-host--vertical) .mb-divider__text{display:none}\n"] }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbBreadcrumbComponent {
+    items = [];
+    itemClick = new EventEmitter();
+    hostClass = 'mb-breadcrumb-host';
+    trackByIndex(index) { return index; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbBreadcrumbComponent, isStandalone: true, selector: "mb-breadcrumb", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<nav class=\"mb-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol>\n    <li *ngFor=\"let item of items; let last = last; trackBy: trackByIndex\">\n      <button type=\"button\" [disabled]=\"item.disabled || last\" (click)=\"itemClick.emit(item)\">{{ item.label }}</button>\n      <span *ngIf=\"!last\" aria-hidden=\"true\">/</span>\n    </li>\n  </ol>\n</nav>\n", styles: [".mb-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.mb-breadcrumb li{display:inline-flex;align-items:center;gap:.35rem;color:var(--mb-color-muted)}.mb-breadcrumb button{border:0;background:transparent;padding:.15rem .2rem;color:var(--mb-color-primary);cursor:pointer;font:inherit}.mb-breadcrumb button:disabled{color:var(--mb-color-muted);cursor:default}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-breadcrumb', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mb-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol>\n    <li *ngFor=\"let item of items; let last = last; trackBy: trackByIndex\">\n      <button type=\"button\" [disabled]=\"item.disabled || last\" (click)=\"itemClick.emit(item)\">{{ item.label }}</button>\n      <span *ngIf=\"!last\" aria-hidden=\"true\">/</span>\n    </li>\n  </ol>\n</nav>\n", styles: [".mb-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.mb-breadcrumb li{display:inline-flex;align-items:center;gap:.35rem;color:var(--mb-color-muted)}.mb-breadcrumb button{border:0;background:transparent;padding:.15rem .2rem;color:var(--mb-color-primary);cursor:pointer;font:inherit}.mb-breadcrumb button:disabled{color:var(--mb-color-muted);cursor:default}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbTabsComponent {
+    tabs = [];
+    activeId = '';
+    variant = 'line';
+    activeIdChange = new EventEmitter();
+    hostClass = 'mb-tabs-host';
+    select(tab) { if (!tab.disabled)
+        this.activeIdChange.emit(tab.id); }
+    trackById(_, item) { return item.id; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbTabsComponent, isStandalone: true, selector: "mb-tabs", inputs: { tabs: "tabs", activeId: "activeId", variant: "variant" }, outputs: { activeIdChange: "activeIdChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-tabs\" [class.mb-tabs--pills]=\"variant === 'pills'\" role=\"tablist\">\n  <button\n    *ngFor=\"let tab of tabs; trackBy: trackById\"\n    type=\"button\"\n    class=\"mb-tabs__tab\"\n    role=\"tab\"\n    [class.mb-tabs__tab--active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n    [attr.aria-selected]=\"tab.id === activeId\"\n    (click)=\"select(tab)\">\n    <span>{{ tab.label }}</span>\n    <span *ngIf=\"tab.badge !== undefined\" class=\"mb-tabs__badge\">{{ tab.badge }}</span>\n  </button>\n</div>\n", styles: [".mb-tabs{display:flex;gap:.25rem;border-block-end:1px solid var(--mb-color-border);overflow-x:auto}.mb-tabs__tab{border:0;background:transparent;color:var(--mb-color-muted);font:inherit;cursor:pointer;padding:.75rem 1rem;border-block-end:2px solid transparent;display:inline-flex;gap:.45rem;align-items:center;font-weight:700;white-space:nowrap}.mb-tabs__tab--active{color:var(--mb-color-primary);border-block-end-color:var(--mb-color-primary)}.mb-tabs__tab:disabled{opacity:.55;cursor:not-allowed}.mb-tabs__badge{background:var(--mb-color-surface);border:1px solid var(--mb-color-border);border-radius:999px;padding:.05rem .38rem;font-size:.72rem}.mb-tabs--pills{border:0;gap:.4rem}.mb-tabs--pills .mb-tabs__tab{border:1px solid var(--mb-color-border);border-radius:999px;padding:.5rem .85rem}.mb-tabs--pills .mb-tabs__tab--active{background:var(--mb-color-primary);color:#fff;border-color:var(--mb-color-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-tabs', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-tabs\" [class.mb-tabs--pills]=\"variant === 'pills'\" role=\"tablist\">\n  <button\n    *ngFor=\"let tab of tabs; trackBy: trackById\"\n    type=\"button\"\n    class=\"mb-tabs__tab\"\n    role=\"tab\"\n    [class.mb-tabs__tab--active]=\"tab.id === activeId\"\n    [disabled]=\"tab.disabled\"\n    [attr.aria-selected]=\"tab.id === activeId\"\n    (click)=\"select(tab)\">\n    <span>{{ tab.label }}</span>\n    <span *ngIf=\"tab.badge !== undefined\" class=\"mb-tabs__badge\">{{ tab.badge }}</span>\n  </button>\n</div>\n", styles: [".mb-tabs{display:flex;gap:.25rem;border-block-end:1px solid var(--mb-color-border);overflow-x:auto}.mb-tabs__tab{border:0;background:transparent;color:var(--mb-color-muted);font:inherit;cursor:pointer;padding:.75rem 1rem;border-block-end:2px solid transparent;display:inline-flex;gap:.45rem;align-items:center;font-weight:700;white-space:nowrap}.mb-tabs__tab--active{color:var(--mb-color-primary);border-block-end-color:var(--mb-color-primary)}.mb-tabs__tab:disabled{opacity:.55;cursor:not-allowed}.mb-tabs__badge{background:var(--mb-color-surface);border:1px solid var(--mb-color-border);border-radius:999px;padding:.05rem .38rem;font-size:.72rem}.mb-tabs--pills{border:0;gap:.4rem}.mb-tabs--pills .mb-tabs__tab{border:1px solid var(--mb-color-border);border-radius:999px;padding:.5rem .85rem}.mb-tabs--pills .mb-tabs__tab--active{background:var(--mb-color-primary);color:#fff;border-color:var(--mb-color-primary)}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeId: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], activeIdChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbAccordionComponent {
+    items = [];
+    multiple = false;
+    itemsChange = new EventEmitter();
+    hostClass = 'mb-accordion-host';
+    toggle(item) {
+        if (item.disabled)
+            return;
+        const next = this.items.map((candidate) => {
+            if (candidate.id === item.id)
+                return { ...candidate, open: !candidate.open };
+            return this.multiple ? candidate : { ...candidate, open: false };
+        });
+        this.items = next;
+        this.itemsChange.emit(next);
+    }
+    trackById(_, item) { return item.id; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAccordionComponent, isStandalone: true, selector: "mb-accordion", inputs: { items: "items", multiple: "multiple" }, outputs: { itemsChange: "itemsChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-accordion\">\n  <section *ngFor=\"let item of items; trackBy: trackById\" class=\"mb-accordion__item\" [class.mb-accordion__item--open]=\"item.open\">\n    <button type=\"button\" class=\"mb-accordion__header\" [disabled]=\"item.disabled\" (click)=\"toggle(item)\">\n      <span>{{ item.title }}</span>\n      <span aria-hidden=\"true\">\u2304</span>\n    </button>\n    <div class=\"mb-accordion__panel\" *ngIf=\"item.open\">\n      <ng-container *ngIf=\"item.content; else projected\">{{ item.content }}</ng-container>\n      <ng-template #projected><ng-content></ng-content></ng-template>\n    </div>\n  </section>\n</div>\n", styles: [".mb-accordion{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);overflow:hidden;background:var(--mb-color-bg)}.mb-accordion__item+.mb-accordion__item{border-block-start:1px solid var(--mb-color-border)}.mb-accordion__header{inline-size:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:0;background:transparent;color:var(--mb-color-text);cursor:pointer;font:inherit;font-weight:800;text-align:start}.mb-accordion__header:disabled{opacity:.55;cursor:not-allowed}.mb-accordion__item--open .mb-accordion__header span:last-child{transform:rotate(180deg)}.mb-accordion__panel{padding:0 1rem 1rem;color:var(--mb-color-muted);line-height:1.7}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-accordion', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-accordion\">\n  <section *ngFor=\"let item of items; trackBy: trackById\" class=\"mb-accordion__item\" [class.mb-accordion__item--open]=\"item.open\">\n    <button type=\"button\" class=\"mb-accordion__header\" [disabled]=\"item.disabled\" (click)=\"toggle(item)\">\n      <span>{{ item.title }}</span>\n      <span aria-hidden=\"true\">\u2304</span>\n    </button>\n    <div class=\"mb-accordion__panel\" *ngIf=\"item.open\">\n      <ng-container *ngIf=\"item.content; else projected\">{{ item.content }}</ng-container>\n      <ng-template #projected><ng-content></ng-content></ng-template>\n    </div>\n  </section>\n</div>\n", styles: [".mb-accordion{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);overflow:hidden;background:var(--mb-color-bg)}.mb-accordion__item+.mb-accordion__item{border-block-start:1px solid var(--mb-color-border)}.mb-accordion__header{inline-size:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:0;background:transparent;color:var(--mb-color-text);cursor:pointer;font:inherit;font-weight:800;text-align:start}.mb-accordion__header:disabled{opacity:.55;cursor:not-allowed}.mb-accordion__item--open .mb-accordion__header span:last-child{transform:rotate(180deg)}.mb-accordion__panel{padding:0 1rem 1rem;color:var(--mb-color-muted);line-height:1.7}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbPaginationComponent {
+    messages = inject(MB_UI_MESSAGES);
+    page = 1;
+    pageSize = 10;
+    total = 0;
+    maxButtons = 5;
+    pageChange = new EventEmitter();
+    hostClass = 'mb-pagination-host';
+    get pageCount() { return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize))); }
+    get pages() {
+        const count = this.pageCount;
+        const half = Math.floor(this.maxButtons / 2);
+        let start = Math.max(1, this.page - half);
+        const end = Math.min(count, start + this.maxButtons - 1);
+        start = Math.max(1, end - this.maxButtons + 1);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    go(page) {
+        const next = Math.max(1, Math.min(this.pageCount, page));
+        if (next !== this.page)
+            this.pageChange.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbPaginationComponent, isStandalone: true, selector: "mb-pagination", inputs: { page: "page", pageSize: "pageSize", total: "total", maxButtons: "maxButtons" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<nav class=\"mb-pagination\" [attr.aria-label]=\"messages.pagination.ariaLabel\">\n  <button type=\"button\" (click)=\"go(page - 1)\" [disabled]=\"page <= 1\">\u2039</button>\n  <button *ngFor=\"let p of pages\" type=\"button\" [class.mb-pagination__page--active]=\"p === page\" (click)=\"go(p)\">{{ p }}</button>\n  <button type=\"button\" (click)=\"go(page + 1)\" [disabled]=\"page >= pageCount\">\u203A</button>\n  <span class=\"mb-pagination__meta\" *ngIf=\"total\">{{ page }} / {{ pageCount }}</span>\n</nav>\n", styles: [".mb-pagination{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.mb-pagination button{min-inline-size:2.2rem;block-size:2.2rem;border:1px solid var(--mb-color-border);background:var(--mb-color-bg);color:var(--mb-color-text);border-radius:var(--mb-radius-md);cursor:pointer;font:inherit;font-weight:700}.mb-pagination button:hover:not(:disabled){border-color:var(--mb-color-primary);color:var(--mb-color-primary)}.mb-pagination button:disabled{opacity:.45;cursor:not-allowed}.mb-pagination__page--active{background:var(--mb-color-primary)!important;border-color:var(--mb-color-primary)!important;color:#fff!important}.mb-pagination__meta{color:var(--mb-color-muted);font-size:.82rem;margin-inline-start:.35rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-pagination', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mb-pagination\" [attr.aria-label]=\"messages.pagination.ariaLabel\">\n  <button type=\"button\" (click)=\"go(page - 1)\" [disabled]=\"page <= 1\">\u2039</button>\n  <button *ngFor=\"let p of pages\" type=\"button\" [class.mb-pagination__page--active]=\"p === page\" (click)=\"go(p)\">{{ p }}</button>\n  <button type=\"button\" (click)=\"go(page + 1)\" [disabled]=\"page >= pageCount\">\u203A</button>\n  <span class=\"mb-pagination__meta\" *ngIf=\"total\">{{ page }} / {{ pageCount }}</span>\n</nav>\n", styles: [".mb-pagination{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.mb-pagination button{min-inline-size:2.2rem;block-size:2.2rem;border:1px solid var(--mb-color-border);background:var(--mb-color-bg);color:var(--mb-color-text);border-radius:var(--mb-radius-md);cursor:pointer;font:inherit;font-weight:700}.mb-pagination button:hover:not(:disabled){border-color:var(--mb-color-primary);color:var(--mb-color-primary)}.mb-pagination button:disabled{opacity:.45;cursor:not-allowed}.mb-pagination__page--active{background:var(--mb-color-primary)!important;border-color:var(--mb-color-primary)!important;color:#fff!important}.mb-pagination__meta{color:var(--mb-color-muted);font-size:.82rem;margin-inline-start:.35rem}\n"] }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], maxButtons: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbDrawerComponent {
+    open = false;
+    title = '';
+    position = 'end';
+    closeOnBackdrop = true;
+    openChange = new EventEmitter();
+    hostClass = 'mb-drawer-host';
+    close() { this.openChange.emit(false); }
+    backdrop() { if (this.closeOnBackdrop)
+        this.close(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDrawerComponent, isStandalone: true, selector: "mb-drawer", inputs: { open: "open", title: "title", position: "position", closeOnBackdrop: "closeOnBackdrop" }, outputs: { openChange: "openChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-drawer-backdrop\" *ngIf=\"open\" (click)=\"backdrop()\"></div>\n<aside *ngIf=\"open\" class=\"mb-drawer\" [class]=\"'mb-drawer mb-drawer--' + position\" role=\"dialog\" aria-modal=\"true\">\n  <header class=\"mb-drawer__header\" *ngIf=\"title\">\n    <strong>{{ title }}</strong>\n    <button type=\"button\" (click)=\"close()\" aria-label=\"Close\">\u00D7</button>\n  </header>\n  <div class=\"mb-drawer__content\"><ng-content></ng-content></div>\n</aside>\n", styles: [".mb-drawer-backdrop{position:fixed;inset:0;background:#0f172a73;z-index:1000}.mb-drawer{position:fixed;z-index:1001;background:var(--mb-color-bg);color:var(--mb-color-text);box-shadow:var(--mb-shadow-lg);display:grid;grid-template-rows:auto 1fr}.mb-drawer--end{inset-block:0;inset-inline-end:0;inline-size:min(28rem,92vw)}.mb-drawer--start{inset-block:0;inset-inline-start:0;inline-size:min(28rem,92vw)}.mb-drawer--top{inset-inline:0;inset-block-start:0;block-size:min(24rem,72vh)}.mb-drawer--bottom{inset-inline:0;inset-block-end:0;block-size:min(24rem,72vh)}.mb-drawer__header{padding:1rem;border-block-end:1px solid var(--mb-color-border);display:flex;justify-content:space-between;gap:1rem;align-items:center}.mb-drawer__header button{border:0;background:transparent;color:inherit;font-size:1.3rem;cursor:pointer}.mb-drawer__content{padding:1rem;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-drawer', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-drawer-backdrop\" *ngIf=\"open\" (click)=\"backdrop()\"></div>\n<aside *ngIf=\"open\" class=\"mb-drawer\" [class]=\"'mb-drawer mb-drawer--' + position\" role=\"dialog\" aria-modal=\"true\">\n  <header class=\"mb-drawer__header\" *ngIf=\"title\">\n    <strong>{{ title }}</strong>\n    <button type=\"button\" (click)=\"close()\" aria-label=\"Close\">\u00D7</button>\n  </header>\n  <div class=\"mb-drawer__content\"><ng-content></ng-content></div>\n</aside>\n", styles: [".mb-drawer-backdrop{position:fixed;inset:0;background:#0f172a73;z-index:1000}.mb-drawer{position:fixed;z-index:1001;background:var(--mb-color-bg);color:var(--mb-color-text);box-shadow:var(--mb-shadow-lg);display:grid;grid-template-rows:auto 1fr}.mb-drawer--end{inset-block:0;inset-inline-end:0;inline-size:min(28rem,92vw)}.mb-drawer--start{inset-block:0;inset-inline-start:0;inline-size:min(28rem,92vw)}.mb-drawer--top{inset-inline:0;inset-block-start:0;block-size:min(24rem,72vh)}.mb-drawer--bottom{inset-inline:0;inset-block-end:0;block-size:min(24rem,72vh)}.mb-drawer__header{padding:1rem;border-block-end:1px solid var(--mb-color-border);display:flex;justify-content:space-between;gap:1rem;align-items:center}.mb-drawer__header button{border:0;background:transparent;color:inherit;font-size:1.3rem;cursor:pointer}.mb-drawer__content{padding:1rem;overflow:auto}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbDropdownComponent {
+    open = false;
+    align = 'start';
+    hostClass = 'mb-dropdown-host';
+    toggle() { this.open = !this.open; }
+    close() { this.open = false; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbDropdownComponent, isStandalone: true, selector: "mb-dropdown", inputs: { open: "open", align: "align" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-dropdown\" [class.mb-dropdown--open]=\"open\" [class.mb-dropdown--end]=\"align === 'end'\">\n  <div class=\"mb-dropdown__trigger\" (click)=\"toggle()\"><ng-content select=\"[mbDropdownTrigger]\"></ng-content></div>\n  <div class=\"mb-dropdown__panel\" *ngIf=\"open\"><ng-content></ng-content></div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.mb-dropdown{position:relative}.mb-dropdown__trigger{display:inline-flex}.mb-dropdown__panel{position:absolute;z-index:50;inset-block-start:calc(100% + .35rem);inset-inline-start:0;min-inline-size:12rem;padding:.45rem;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);box-shadow:var(--mb-shadow-md)}.mb-dropdown--end .mb-dropdown__panel{inset-inline-start:auto;inset-inline-end:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-dropdown', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-dropdown\" [class.mb-dropdown--open]=\"open\" [class.mb-dropdown--end]=\"align === 'end'\">\n  <div class=\"mb-dropdown__trigger\" (click)=\"toggle()\"><ng-content select=\"[mbDropdownTrigger]\"></ng-content></div>\n  <div class=\"mb-dropdown__panel\" *ngIf=\"open\"><ng-content></ng-content></div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.mb-dropdown{position:relative}.mb-dropdown__trigger{display:inline-flex}.mb-dropdown__panel{position:absolute;z-index:50;inset-block-start:calc(100% + .35rem);inset-inline-start:0;min-inline-size:12rem;padding:.45rem;border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);box-shadow:var(--mb-shadow-md)}.mb-dropdown--end .mb-dropdown__panel{inset-inline-start:auto;inset-inline-end:0}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MbTooltipDirective {
+    elementRef;
+    renderer;
+    text = '';
+    tooltip;
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    show() {
+        if (!this.text || this.tooltip)
+            return;
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const el = this.renderer.createElement('div');
+        this.renderer.addClass(el, 'mb-tooltip-panel');
+        this.renderer.setProperty(el, 'textContent', this.text);
+        this.renderer.appendChild(document.body, el);
+        const top = rect.top + window.scrollY - el.offsetHeight - 8;
+        const left = rect.left + window.scrollX + rect.width / 2 - el.offsetWidth / 2;
+        this.renderer.setStyle(el, 'top', `${Math.max(8, top)}px`);
+        this.renderer.setStyle(el, 'left', `${Math.max(8, left)}px`);
+        this.tooltip = el;
+    }
+    hide() {
+        if (this.tooltip) {
+            this.renderer.removeChild(document.body, this.tooltip);
+            this.tooltip = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MbTooltipDirective, isStandalone: true, selector: "[mbTooltip]", inputs: { text: ["mbTooltip", "text"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mbTooltip]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { text: [{
+                type: Input,
+                args: ['mbTooltip']
+            }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class MbConfirmDialogComponent {
+    options;
+    dialogRef;
+    messages = inject(MB_UI_MESSAGES);
+    constructor(options, dialogRef) {
+        this.options = options;
+        this.dialogRef = dialogRef;
+    }
+    get tone() {
+        return this.options.tone ?? 'default';
+    }
+    get titleText() {
+        return this.options.title ?? this.messages.confirm.title;
+    }
+    get okText() {
+        return this.options.okText ?? this.messages.confirm.okText;
+    }
+    get cancelText() {
+        return this.options.cancelText ?? this.messages.confirm.cancelText;
+    }
+    cancel() {
+        this.dialogRef.close(false);
+    }
+    accept() {
+        this.dialogRef.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbConfirmDialogComponent, deps: [{ token: MB_DIALOG_DATA }, { token: MbDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbConfirmDialogComponent, isStandalone: true, selector: "mb-confirm-dialog", ngImport: i0, template: "<section class=\"mb-confirm\" [ngClass]=\"'mb-confirm--' + tone\">\n  <div class=\"mb-confirm__icon\" aria-hidden=\"true\">\n    <span>{{ tone === 'danger' ? '!' : tone === 'warning' ? '?' : '\u2713' }}</span>\n  </div>\n  <div class=\"mb-confirm__content\">\n    <h2 class=\"mb-confirm__title\">{{ titleText }}</h2>\n    <p class=\"mb-confirm__message\">{{ options.message }}</p>\n  </div>\n  <div class=\"mb-confirm__actions\">\n    <mb-button variant=\"ghost\" (clicked)=\"cancel()\">{{ cancelText }}</mb-button>\n    <mb-button [variant]=\"tone === 'danger' ? 'danger' : 'primary'\" (clicked)=\"accept()\">{{ okText }}</mb-button>\n  </div>\n</section>\n", styles: [".mb-confirm{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem;min-inline-size:min(30rem,100vw - 2rem)}.mb-confirm__icon{inline-size:2.75rem;block-size:2.75rem;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--mb-color-primary, #2563eb) 14%,transparent);color:var(--mb-color-primary, #2563eb);font-weight:800}.mb-confirm--danger .mb-confirm__icon{background:color-mix(in srgb,var(--mb-color-danger, #dc2626) 14%,transparent);color:var(--mb-color-danger, #dc2626)}.mb-confirm--warning .mb-confirm__icon{background:color-mix(in srgb,var(--mb-color-warning, #f59e0b) 16%,transparent);color:var(--mb-color-warning, #f59e0b)}.mb-confirm__title{margin:0;color:var(--mb-color-text, #0f172a);font-size:1.05rem}.mb-confirm__message{margin:.4rem 0 0;color:var(--mb-color-muted, #64748b);line-height:1.8}.mb-confirm__actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.5rem;margin-block-start:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MbButtonComponent, selector: "mb-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mb-confirm-dialog', standalone: true, imports: [NgClass, MbButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mb-confirm\" [ngClass]=\"'mb-confirm--' + tone\">\n  <div class=\"mb-confirm__icon\" aria-hidden=\"true\">\n    <span>{{ tone === 'danger' ? '!' : tone === 'warning' ? '?' : '\u2713' }}</span>\n  </div>\n  <div class=\"mb-confirm__content\">\n    <h2 class=\"mb-confirm__title\">{{ titleText }}</h2>\n    <p class=\"mb-confirm__message\">{{ options.message }}</p>\n  </div>\n  <div class=\"mb-confirm__actions\">\n    <mb-button variant=\"ghost\" (clicked)=\"cancel()\">{{ cancelText }}</mb-button>\n    <mb-button [variant]=\"tone === 'danger' ? 'danger' : 'primary'\" (clicked)=\"accept()\">{{ okText }}</mb-button>\n  </div>\n</section>\n", styles: [".mb-confirm{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem;min-inline-size:min(30rem,100vw - 2rem)}.mb-confirm__icon{inline-size:2.75rem;block-size:2.75rem;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--mb-color-primary, #2563eb) 14%,transparent);color:var(--mb-color-primary, #2563eb);font-weight:800}.mb-confirm--danger .mb-confirm__icon{background:color-mix(in srgb,var(--mb-color-danger, #dc2626) 14%,transparent);color:var(--mb-color-danger, #dc2626)}.mb-confirm--warning .mb-confirm__icon{background:color-mix(in srgb,var(--mb-color-warning, #f59e0b) 16%,transparent);color:var(--mb-color-warning, #f59e0b)}.mb-confirm__title{margin:0;color:var(--mb-color-text, #0f172a);font-size:1.05rem}.mb-confirm__message{margin:.4rem 0 0;color:var(--mb-color-muted, #64748b);line-height:1.8}.mb-confirm__actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.5rem;margin-block-start:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MB_DIALOG_DATA]
+                }] }, { type: MbDialogRef }] });
+
+class MbConfirmService {
+    dialog;
+    messages = inject(MB_UI_MESSAGES);
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    async confirm(options) {
+        const ref = this.dialog.open(MbConfirmDialogComponent, {
+            data: options,
+            width: options.width ?? '420px',
+            closeOnBackdropClick: options.closeOnBackdropClick ?? true,
+            ariaLabel: options.title ?? this.messages.confirm.ariaLabel,
+        });
+        return (await firstValueFrom(ref.afterClosed$)) === true;
+    }
+    danger(message, title) {
+        const confirmMessages = this.messages.confirm;
+        return this.confirm({
+            title: title ?? confirmMessages.deleteTitle,
+            message,
+            tone: 'danger',
+            okText: confirmMessages.deleteOkText,
+            cancelText: confirmMessages.cancelText,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbConfirmService, deps: [{ token: MbDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbConfirmService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbConfirmService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: MbDialogService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MB_DIALOG_DATA, MB_GRID_DEFAULT_MESSAGES_FA, MB_GRID_MESSAGES, MB_GRID_MESSAGES_EN, MB_GRID_MESSAGES_FA, MB_JALALI_MONTH_NAMES, MB_UI_CONFIG, MB_UI_DEFAULT_CONFIG, MB_UI_MESSAGES, MB_UI_MESSAGES_EN, MB_UI_MESSAGES_FA, MbAccordionComponent, MbAlertComponent, MbAvatarComponent, MbBadgeComponent, MbBreadcrumbComponent, MbButtonComponent, MbCardComponent, MbCheckboxComponent, MbChipComponent, MbComboboxComponent, MbConfirmDialogComponent, MbConfirmService, MbDatepickerComponent, MbDialogComponent, MbDialogContainerComponent, MbDialogRef, MbDialogService, MbDividerComponent, MbDrawerComponent, MbDropdownComponent, MbEmptyComponent, MbFormFieldComponent, MbGridCellTemplateDirective, MbGridComponent, MbGridDetailTemplateDirective, MbGridEditTemplateDirective, MbGridFooterTemplateDirective, MbGridHeaderTemplateDirective, MbGridStateService, MbGridToolbarTemplateDirective, MbInputComponent, MbPaginationComponent, MbProgressComponent, MbRadioGroupComponent, MbSelectComponent, MbSkeletonComponent, MbSpinnerComponent, MbSwitchComponent, MbTabsComponent, MbTextareaComponent, MbToastContainerComponent, MbToastService, MbTooltipDirective, coerceBooleanProperty, getMbUiMessages, isNil, mbFormatJalali, mbGregorianToJalali, mbGridApplyFilter, mbGridApplySort, mbGridBuildFilter, mbGridDefaultState, mbGridDownloadBlob, mbGridExportCsv, mbGridExportExcelHtml, mbGridExportJson, mbGridFormatValue, mbGridGetValue, mbGridNormalize, mbGridProcess, mbGridStateFromLegacy, mbGridStateToLegacy, mbGridStateToNestedQuery, mbGridToLaravelQuery, mbGridToODataQuery, mbJalaliMonthLength, mbJalaliToGregorian, mbParseIsoDate, mbToIsoDate, mergeMbUiMessages, normalizeMbUiLocale, normalizeText, provideMbUi };
+//# sourceMappingURL=beshkari-mb-ui.mjs.map