ng-comps 2.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/fesm2022/ng-comps.mjs +208 -4
  2. package/package.json +1 -1
  3. package/types/ng-comps.d.ts +2 -0
package/fesm2022/ng-comps.mjs CHANGED
@@ -3265,6 +3265,8 @@ class MfTableComponent {
3265
3265
  }
3266
3266
  return columns;
3267
3267
  }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
3268
+ mobileTitleColumn = computed(() => this.visibleColumns()[0] ?? null, ...(ngDevMode ? [{ debugName: "mobileTitleColumn" }] : /* istanbul ignore next */ []));
3269
+ mobileDetailColumns = computed(() => this.visibleColumns().slice(1), ...(ngDevMode ? [{ debugName: "mobileDetailColumns" }] : /* istanbul ignore next */ []));
3268
3270
  filteredRows = computed(() => {
3269
3271
  const query = this.searchTerm().toLowerCase();
3270
3272
  const rows = this.data();
@@ -3562,7 +3564,7 @@ class MfTableComponent {
3562
3564
  [matMenuTriggerFor]="actionMenu"
3563
3565
  [attr.aria-label]="getRowMenuAriaLabel(row)"
3564
3566
  >
3565
- <mat-icon aria-hidden="true">more_horiz</mat-icon>
3567
+ <mat-icon aria-hidden="true">more_vert</mat-icon>
3566
3568
  </button>
3567
3569
  <mat-menu
3568
3570
  #actionMenu="matMenu"
@@ -3618,6 +3620,107 @@ class MfTableComponent {
3618
3620
  </table>
3619
3621
  </div>
3620
3622
 
3623
+ <div class="mf-table__mobile-list">
3624
+ @for (row of paginatedRows(); track row) {
3625
+ <article class="mf-table__mobile-card">
3626
+ <div class="mf-table__mobile-card-header">
3627
+ <div class="mf-table__mobile-card-intro">
3628
+ @if (mobileTitleColumn(); as primaryColumn) {
3629
+ <p class="mf-table__mobile-card-label">
3630
+ {{ primaryColumn.header }}
3631
+ </p>
3632
+ @if (primaryColumn.type === 'badge') {
3633
+ <span [class]="badgeClasses(primaryColumn, row)">
3634
+ {{ renderCell(primaryColumn, row) }}
3635
+ </span>
3636
+ } @else {
3637
+ <h3 class="mf-table__mobile-card-title">
3638
+ {{ renderCell(primaryColumn, row) }}
3639
+ </h3>
3640
+ }
3641
+ }
3642
+ </div>
3643
+
3644
+ @if (hasActions()) {
3645
+ <div class="mf-table__mobile-card-actions">
3646
+ @if (usesActionMenu()) {
3647
+ <button
3648
+ mat-icon-button
3649
+ type="button"
3650
+ class="mf-table__action-menu-trigger"
3651
+ [matMenuTriggerFor]="mobileActionMenu"
3652
+ [attr.aria-label]="getRowMenuAriaLabel(row)"
3653
+ >
3654
+ <mat-icon aria-hidden="true">more_vert</mat-icon>
3655
+ </button>
3656
+ <mat-menu
3657
+ #mobileActionMenu="matMenu"
3658
+ xPosition="before"
3659
+ class="mf-table__action-menu"
3660
+ >
3661
+ @for (action of resolvedActions(); track action.key) {
3662
+ <button
3663
+ mat-menu-item
3664
+ [disabled]="isActionDisabled(action, row)"
3665
+ [attr.aria-label]="getActionAriaLabel(action, row)"
3666
+ (click)="onActionClick(action, row)"
3667
+ >
3668
+ @if (action.icon) {
3669
+ <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
3670
+ }
3671
+ <span>{{ action.label }}</span>
3672
+ </button>
3673
+ }
3674
+ </mat-menu>
3675
+ } @else {
3676
+ <div class="mf-table__action-group">
3677
+ @for (action of resolvedActions(); track action.key) {
3678
+ <button
3679
+ mat-stroked-button
3680
+ type="button"
3681
+ [class]="actionClasses(action)"
3682
+ [disabled]="isActionDisabled(action, row)"
3683
+ [attr.aria-label]="getActionAriaLabel(action, row)"
3684
+ (click)="onActionClick(action, row)"
3685
+ >
3686
+ @if (action.icon) {
3687
+ <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
3688
+ }
3689
+ <span>{{ action.label }}</span>
3690
+ </button>
3691
+ }
3692
+ </div>
3693
+ }
3694
+ </div>
3695
+ }
3696
+ </div>
3697
+
3698
+ @if (mobileDetailColumns().length > 0) {
3699
+ <dl class="mf-table__mobile-grid">
3700
+ @for (column of mobileDetailColumns(); track column.key) {
3701
+ <div class="mf-table__mobile-item">
3702
+ <dt class="mf-table__mobile-item-label">
3703
+ {{ column.header }}
3704
+ </dt>
3705
+ <dd class="mf-table__mobile-item-value">
3706
+ @if (column.type === 'badge') {
3707
+ <span [class]="badgeClasses(column, row)">
3708
+ {{ renderCell(column, row) }}
3709
+ </span>
3710
+ } @else {
3711
+ <span class="mf-table__mobile-item-text">
3712
+ {{ renderCell(column, row) }}
3713
+ </span>
3714
+ }
3715
+ </dd>
3716
+ </div>
3717
+ }
3718
+ </dl>
3719
+ }
3720
+ </article>
3721
+ }
3722
+ </div>
3723
+
3621
3724
  @if (showPaginator()) {
3622
3725
  <footer class="mf-table__footer">
3623
3726
  <mf-paginator
@@ -3642,7 +3745,7 @@ class MfTableComponent {
3642
3745
  </div>
3643
3746
  }
3644
3747
  </section>
3645
- `, isInline: true, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$i.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$i.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$i.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$i.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$i.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$i.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$i.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$i.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$i.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$i.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$b.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$b.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$b.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MfInputComponent, selector: "mf-input", inputs: ["id", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "placeholder", "type", "size", "value", "disabled", "readonly", "required", "hint", "error", "leadingIcon", "trailingIcon", "fullWidth"], outputs: ["mfInput", "mfBlur"] }, { kind: "component", type: MfPaginatorComponent, selector: "mf-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions", "showFirstLastButtons", "hidePageSize"], outputs: ["mfPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3748
+ `, isInline: true, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__search mf-input{display:block;width:100%}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__mobile-list{display:none}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__wrapper{display:none}.mf-table__mobile-list{display:grid;gap:var(--mf-space-3)}.mf-table__mobile-card{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-4);border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background:linear-gradient(180deg,#fffffff5,#f8fafcf0),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-sm)}.mf-table__mobile-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mf-space-3)}.mf-table__mobile-card-intro{display:grid;gap:var(--mf-space-2);min-width:0}.mf-table__mobile-card-label{margin:0;color:var(--mf-color-neutral-500);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.08em;text-transform:uppercase}.mf-table__mobile-card-title{margin:0;color:var(--mf-color-neutral-900);font-family:var(--mf-font-display);font-size:var(--mf-text-lg);line-height:var(--mf-leading-tight)}.mf-table__mobile-card-actions{flex-shrink:0}.mf-table__mobile-grid{display:grid;gap:var(--mf-space-3);margin:0}.mf-table__mobile-item{display:grid;gap:var(--mf-space-1);padding-top:var(--mf-space-3);border-top:1px solid color-mix(in srgb,var(--mf-color-border) 85%,white)}.mf-table__mobile-item-label{color:var(--mf-color-neutral-500);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.08em;text-transform:uppercase}.mf-table__mobile-item-value{margin:0;color:var(--mf-color-on-surface)}.mf-table__mobile-item-text{display:block;line-height:var(--mf-leading-normal)}.mf-table__action-group{gap:var(--mf-space-2)}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$i.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$i.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$i.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$i.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$i.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$i.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$i.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$i.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$i.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$i.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$b.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$b.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$b.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MfInputComponent, selector: "mf-input", inputs: ["id", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "placeholder", "type", "size", "value", "disabled", "readonly", "required", "hint", "error", "leadingIcon", "trailingIcon", "fullWidth"], outputs: ["mfInput", "mfBlur"] }, { kind: "component", type: MfPaginatorComponent, selector: "mf-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions", "showFirstLastButtons", "hidePageSize"], outputs: ["mfPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3646
3749
  }
3647
3750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTableComponent, decorators: [{
3648
3751
  type: Component,
@@ -3773,7 +3876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
3773
3876
  [matMenuTriggerFor]="actionMenu"
3774
3877
  [attr.aria-label]="getRowMenuAriaLabel(row)"
3775
3878
  >
3776
- <mat-icon aria-hidden="true">more_horiz</mat-icon>
3879
+ <mat-icon aria-hidden="true">more_vert</mat-icon>
3777
3880
  </button>
3778
3881
  <mat-menu
3779
3882
  #actionMenu="matMenu"
@@ -3829,6 +3932,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
3829
3932
  </table>
3830
3933
  </div>
3831
3934
 
3935
+ <div class="mf-table__mobile-list">
3936
+ @for (row of paginatedRows(); track row) {
3937
+ <article class="mf-table__mobile-card">
3938
+ <div class="mf-table__mobile-card-header">
3939
+ <div class="mf-table__mobile-card-intro">
3940
+ @if (mobileTitleColumn(); as primaryColumn) {
3941
+ <p class="mf-table__mobile-card-label">
3942
+ {{ primaryColumn.header }}
3943
+ </p>
3944
+ @if (primaryColumn.type === 'badge') {
3945
+ <span [class]="badgeClasses(primaryColumn, row)">
3946
+ {{ renderCell(primaryColumn, row) }}
3947
+ </span>
3948
+ } @else {
3949
+ <h3 class="mf-table__mobile-card-title">
3950
+ {{ renderCell(primaryColumn, row) }}
3951
+ </h3>
3952
+ }
3953
+ }
3954
+ </div>
3955
+
3956
+ @if (hasActions()) {
3957
+ <div class="mf-table__mobile-card-actions">
3958
+ @if (usesActionMenu()) {
3959
+ <button
3960
+ mat-icon-button
3961
+ type="button"
3962
+ class="mf-table__action-menu-trigger"
3963
+ [matMenuTriggerFor]="mobileActionMenu"
3964
+ [attr.aria-label]="getRowMenuAriaLabel(row)"
3965
+ >
3966
+ <mat-icon aria-hidden="true">more_vert</mat-icon>
3967
+ </button>
3968
+ <mat-menu
3969
+ #mobileActionMenu="matMenu"
3970
+ xPosition="before"
3971
+ class="mf-table__action-menu"
3972
+ >
3973
+ @for (action of resolvedActions(); track action.key) {
3974
+ <button
3975
+ mat-menu-item
3976
+ [disabled]="isActionDisabled(action, row)"
3977
+ [attr.aria-label]="getActionAriaLabel(action, row)"
3978
+ (click)="onActionClick(action, row)"
3979
+ >
3980
+ @if (action.icon) {
3981
+ <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
3982
+ }
3983
+ <span>{{ action.label }}</span>
3984
+ </button>
3985
+ }
3986
+ </mat-menu>
3987
+ } @else {
3988
+ <div class="mf-table__action-group">
3989
+ @for (action of resolvedActions(); track action.key) {
3990
+ <button
3991
+ mat-stroked-button
3992
+ type="button"
3993
+ [class]="actionClasses(action)"
3994
+ [disabled]="isActionDisabled(action, row)"
3995
+ [attr.aria-label]="getActionAriaLabel(action, row)"
3996
+ (click)="onActionClick(action, row)"
3997
+ >
3998
+ @if (action.icon) {
3999
+ <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
4000
+ }
4001
+ <span>{{ action.label }}</span>
4002
+ </button>
4003
+ }
4004
+ </div>
4005
+ }
4006
+ </div>
4007
+ }
4008
+ </div>
4009
+
4010
+ @if (mobileDetailColumns().length > 0) {
4011
+ <dl class="mf-table__mobile-grid">
4012
+ @for (column of mobileDetailColumns(); track column.key) {
4013
+ <div class="mf-table__mobile-item">
4014
+ <dt class="mf-table__mobile-item-label">
4015
+ {{ column.header }}
4016
+ </dt>
4017
+ <dd class="mf-table__mobile-item-value">
4018
+ @if (column.type === 'badge') {
4019
+ <span [class]="badgeClasses(column, row)">
4020
+ {{ renderCell(column, row) }}
4021
+ </span>
4022
+ } @else {
4023
+ <span class="mf-table__mobile-item-text">
4024
+ {{ renderCell(column, row) }}
4025
+ </span>
4026
+ }
4027
+ </dd>
4028
+ </div>
4029
+ }
4030
+ </dl>
4031
+ }
4032
+ </article>
4033
+ }
4034
+ </div>
4035
+
3832
4036
  @if (showPaginator()) {
3833
4037
  <footer class="mf-table__footer">
3834
4038
  <mf-paginator
@@ -3853,7 +4057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
3853
4057
  </div>
3854
4058
  }
3855
4059
  </section>
3856
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"] }]
4060
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__search mf-input{display:block;width:100%}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__mobile-list{display:none}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__wrapper{display:none}.mf-table__mobile-list{display:grid;gap:var(--mf-space-3)}.mf-table__mobile-card{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-4);border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background:linear-gradient(180deg,#fffffff5,#f8fafcf0),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-sm)}.mf-table__mobile-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mf-space-3)}.mf-table__mobile-card-intro{display:grid;gap:var(--mf-space-2);min-width:0}.mf-table__mobile-card-label{margin:0;color:var(--mf-color-neutral-500);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.08em;text-transform:uppercase}.mf-table__mobile-card-title{margin:0;color:var(--mf-color-neutral-900);font-family:var(--mf-font-display);font-size:var(--mf-text-lg);line-height:var(--mf-leading-tight)}.mf-table__mobile-card-actions{flex-shrink:0}.mf-table__mobile-grid{display:grid;gap:var(--mf-space-3);margin:0}.mf-table__mobile-item{display:grid;gap:var(--mf-space-1);padding-top:var(--mf-space-3);border-top:1px solid color-mix(in srgb,var(--mf-color-border) 85%,white)}.mf-table__mobile-item-label{color:var(--mf-color-neutral-500);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.08em;text-transform:uppercase}.mf-table__mobile-item-value{margin:0;color:var(--mf-color-on-surface)}.mf-table__mobile-item-text{display:block;line-height:var(--mf-leading-normal)}.mf-table__action-group{gap:var(--mf-space-2)}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"] }]
3857
4061
  }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], rowActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionLabel", required: false }] }], rowActionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionHeader", required: false }] }], rowActionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionAriaLabel", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], mfSortChange: [{ type: i0.Output, args: ["mfSortChange"] }], mfSearchChange: [{ type: i0.Output, args: ["mfSearchChange"] }], mfPageChange: [{ type: i0.Output, args: ["mfPageChange"] }], mfAction: [{ type: i0.Output, args: ["mfAction"] }], mfRowAction: [{ type: i0.Output, args: ["mfRowAction"] }], mfRowClick: [{ type: i0.Output, args: ["mfRowClick"] }] } });
3858
4062
 
3859
4063
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-comps",
3
- "version": "2.0.0",
3
+ "version": "4.0.0",
4
4
  "description": "Angular UI components for mf-design-system",
5
5
  "keywords": [
6
6
  "angular",
package/types/ng-comps.d.ts CHANGED
@@ -1173,6 +1173,8 @@ declare class MfTableComponent {
1173
1173
  protected readonly hasActions: _angular_core.Signal<boolean>;
1174
1174
  protected readonly usesActionMenu: _angular_core.Signal<boolean>;
1175
1175
  readonly displayedColumns: _angular_core.Signal<string[]>;
1176
+ protected readonly mobileTitleColumn: _angular_core.Signal<MfTableColumn>;
1177
+ protected readonly mobileDetailColumns: _angular_core.Signal<MfTableColumn[]>;
1176
1178
  protected readonly filteredRows: _angular_core.Signal<Record<string, unknown>[]>;
1177
1179
  protected readonly sortedRows: _angular_core.Signal<Record<string, unknown>[]>;
1178
1180
  protected readonly paginatedRows: _angular_core.Signal<Record<string, unknown>[]>;