@masterteam/components 0.0.179 → 0.0.180

package/fesm2022/masterteam-components-table.mjs

@@ -112,11 +112,11 @@ class TableActionsMenu {
         this.menu()?.toggle(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableActionsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableActionsMenu, isStandalone: true, selector: "mt-table-actions-menu", inputs: { exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, activeGroup: { classPropertyName: "activeGroup", publicName: "activeGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested", printRequested: "printRequested", groupChange: "groupChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\n  (click)=\"toggle($event)\"\n  icon=\"general.dots-horizontal\"\n  severity=\"secondary\"\n  variant=\"outlined\"\n  size=\"small\"\n  [tooltip]=\"'components.table.actions' | transloco\"\n/>\n\n<p-tieredMenu\n  #menu\n  [model]=\"items()\"\n  [popup]=\"true\"\n  appendTo=\"body\"\n  styleClass=\"mt-table-actions-menu\"\n>\n  <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\n    <button\n      type=\"button\"\n      class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\n      [class.bg-primary-50]=\"item.selected\"\n      [class.dark:bg-primary-950]=\"item.selected\"\n      [class.text-primary-700]=\"item.selected\"\n    >\n      @if (item.iconKey) {\n        @if (item.useAvatar) {\n          <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\n        } @else {\n          <span\n            class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\n            [class]=\"toneClass[item.iconTone ?? 'secondary']\"\n          >\n            <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\n          </span>\n        }\n      }\n      <span class=\"flex-1 text-start truncate\">\n        @if (item.labelKey) {\n          {{ item.labelKey | transloco }}\n        } @else {\n          {{ item.rawLabel }}\n        }\n      </span>\n      @if (item.badge) {\n        <span\n          class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\n        >\n          {{ item.badge }}\n        </span>\n      }\n      @if (hasSubmenu) {\n        <mt-icon\n          icon=\"arrow.chevron-right\"\n          class=\"text-xs text-gray-400 shrink-0\"\n        />\n      }\n    </button>\n  </ng-template>\n</p-tieredMenu>\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i1.TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableActionsMenu, isStandalone: true, selector: "mt-table-actions-menu", inputs: { exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, activeGroup: { classPropertyName: "activeGroup", publicName: "activeGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested", printRequested: "printRequested", groupChange: "groupChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\r\n  (click)=\"toggle($event)\"\r\n  icon=\"general.dots-horizontal\"\r\n  severity=\"secondary\"\r\n  variant=\"outlined\"\r\n  size=\"small\"\r\n  [tooltip]=\"'components.table.actions' | transloco\"\r\n/>\r\n\r\n<p-tieredMenu\r\n  #menu\r\n  [model]=\"items()\"\r\n  [popup]=\"true\"\r\n  appendTo=\"body\"\r\n  styleClass=\"mt-table-actions-menu\"\r\n>\r\n  <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\r\n      [class.bg-primary-50]=\"item.selected\"\r\n      [class.dark:bg-primary-950]=\"item.selected\"\r\n      [class.text-primary-700]=\"item.selected\"\r\n    >\r\n      @if (item.iconKey) {\r\n        @if (item.useAvatar) {\r\n          <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\r\n            [class]=\"toneClass[item.iconTone ?? 'secondary']\"\r\n          >\r\n            <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\r\n          </span>\r\n        }\r\n      }\r\n      <span class=\"flex-1 text-start truncate\">\r\n        @if (item.labelKey) {\r\n          {{ item.labelKey | transloco }}\r\n        } @else {\r\n          {{ item.rawLabel }}\r\n        }\r\n      </span>\r\n      @if (item.badge) {\r\n        <span\r\n          class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\r\n        >\r\n          {{ item.badge }}\r\n        </span>\r\n      }\r\n      @if (hasSubmenu) {\r\n        <mt-icon\r\n          icon=\"arrow.chevron-right\"\r\n          class=\"text-xs text-gray-400 shrink-0\"\r\n        />\r\n      }\r\n    </button>\r\n  </ng-template>\r\n</p-tieredMenu>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: i1.TieredMenu, selector: "p-tieredMenu, p-tieredmenu, p-tiered-menu", inputs: ["model", "popup", "style", "styleClass", "breakpoint", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableActionsMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-table-actions-menu', standalone: true, imports: [Avatar, Button, Icon, TieredMenuModule, TranslocoModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-button\n  (click)=\"toggle($event)\"\n  icon=\"general.dots-horizontal\"\n  severity=\"secondary\"\n  variant=\"outlined\"\n  size=\"small\"\n  [tooltip]=\"'components.table.actions' | transloco\"\n/>\n\n<p-tieredMenu\n  #menu\n  [model]=\"items()\"\n  [popup]=\"true\"\n  appendTo=\"body\"\n  styleClass=\"mt-table-actions-menu\"\n>\n  <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\n    <button\n      type=\"button\"\n      class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\n      [class.bg-primary-50]=\"item.selected\"\n      [class.dark:bg-primary-950]=\"item.selected\"\n      [class.text-primary-700]=\"item.selected\"\n    >\n      @if (item.iconKey) {\n        @if (item.useAvatar) {\n          <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\n        } @else {\n          <span\n            class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\n            [class]=\"toneClass[item.iconTone ?? 'secondary']\"\n          >\n            <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\n          </span>\n        }\n      }\n      <span class=\"flex-1 text-start truncate\">\n        @if (item.labelKey) {\n          {{ item.labelKey | transloco }}\n        } @else {\n          {{ item.rawLabel }}\n        }\n      </span>\n      @if (item.badge) {\n        <span\n          class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\n        >\n          {{ item.badge }}\n        </span>\n      }\n      @if (hasSubmenu) {\n        <mt-icon\n          icon=\"arrow.chevron-right\"\n          class=\"text-xs text-gray-400 shrink-0\"\n        />\n      }\n    </button>\n  </ng-template>\n</p-tieredMenu>\n" }]
+            args: [{ selector: 'mt-table-actions-menu', standalone: true, imports: [Avatar, Button, Icon, TieredMenuModule, TranslocoModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-button\r\n  (click)=\"toggle($event)\"\r\n  icon=\"general.dots-horizontal\"\r\n  severity=\"secondary\"\r\n  variant=\"outlined\"\r\n  size=\"small\"\r\n  [tooltip]=\"'components.table.actions' | transloco\"\r\n/>\r\n\r\n<p-tieredMenu\r\n  #menu\r\n  [model]=\"items()\"\r\n  [popup]=\"true\"\r\n  appendTo=\"body\"\r\n  styleClass=\"mt-table-actions-menu\"\r\n>\r\n  <ng-template #item let-item let-hasSubmenu=\"hasSubmenu\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"flex items-center gap-2.5 w-full px-2.5 py-2 text-sm cursor-pointer text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-surface-700 transition-colors\"\r\n      [class.bg-primary-50]=\"item.selected\"\r\n      [class.dark:bg-primary-950]=\"item.selected\"\r\n      [class.text-primary-700]=\"item.selected\"\r\n    >\r\n      @if (item.iconKey) {\r\n        @if (item.useAvatar) {\r\n          <mt-avatar [icon]=\"item.iconKey\" shape=\"circle\" />\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center justify-center w-7 h-7 rounded-full shrink-0\"\r\n            [class]=\"toneClass[item.iconTone ?? 'secondary']\"\r\n          >\r\n            <mt-icon [icon]=\"item.iconKey\" class=\"text-sm\" />\r\n          </span>\r\n        }\r\n      }\r\n      <span class=\"flex-1 text-start truncate\">\r\n        @if (item.labelKey) {\r\n          {{ item.labelKey | transloco }}\r\n        } @else {\r\n          {{ item.rawLabel }}\r\n        }\r\n      </span>\r\n      @if (item.badge) {\r\n        <span\r\n          class=\"text-xs px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300 shrink-0\"\r\n        >\r\n          {{ item.badge }}\r\n        </span>\r\n      }\r\n      @if (hasSubmenu) {\r\n        <mt-icon\r\n          icon=\"arrow.chevron-right\"\r\n          class=\"text-xs text-gray-400 shrink-0\"\r\n        />\r\n      }\r\n    </button>\r\n  </ng-template>\r\n</p-tieredMenu>\r\n" }]
         }], propDecorators: { exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], printable: [{ type: i0.Input, args: [{ isSignal: true, alias: "printable", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], groupColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColumns", required: false }] }], activeGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeGroup", required: false }] }], exportRequested: [{ type: i0.Output, args: ["exportRequested"] }], printRequested: [{ type: i0.Output, args: ["printRequested"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
 
 class TableValueResolver {
@@ -980,7 +980,7 @@ class TableFilter {
                 useExisting: forwardRef(() => TableFilter),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\n  (click)=\"popover.toggle($event)\"\n  [label]=\"'components.table.filter' | transloco\"\n  [badge]=\"activeFilterCount()\"\n  severity=\"primary\"\n  size=\"small\"\n  icon=\"general.filter-funnel-01\"\n/>\n\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\n  <div class=\"flex flex-col max-h-[50vh]\">\n    <h4\n      class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\n    >\n      {{ \"components.table.filterOptions\" | transloco }}\n    </h4>\n\n    <div\n      class=\"space-y-3 overflow-y-auto flex-1 py-3\"\n      (keydown.enter)=\"apply(); popover.hide()\"\n    >\n      @for (col of filterableColumns(); track col.key) {\n        <div class=\"space-y-1\">\n          <label\n            class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\n          >\n            {{ col.filterConfig?.label || col.label }}\n          </label>\n          <mt-table-filter-field\n            [column]=\"col\"\n            [value]=\"pendingFilters()[col.key]\"\n            (valueChange)=\"updateFilter(col.key, $event)\"\n          />\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\n    >\n      <mt-button\n        variant=\"outlined\"\n        (click)=\"reset(); popover.hide()\"\n        [label]=\"'components.table.reset' | transloco\"\n      />\n      <mt-button\n        (click)=\"apply(); popover.hide()\"\n        [label]=\"'components.table.apply' | transloco\"\n      />\n    </div>\n  </div>\n</p-popover>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: TableFilterField, selector: "mt-table-filter-field", inputs: ["column", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-button\r\n  (click)=\"popover.toggle($event)\"\r\n  [label]=\"'components.table.filter' | transloco\"\r\n  [badge]=\"activeFilterCount()\"\r\n  severity=\"primary\"\r\n  size=\"small\"\r\n  icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n  <div class=\"flex flex-col max-h-[50vh]\">\r\n    <h4\r\n      class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n    >\r\n      {{ \"components.table.filterOptions\" | transloco }}\r\n    </h4>\r\n\r\n    <div\r\n      class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n      (keydown.enter)=\"apply(); popover.hide()\"\r\n    >\r\n      @for (col of filterableColumns(); track col.key) {\r\n        <div class=\"space-y-1\">\r\n          <label\r\n            class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n          >\r\n            {{ col.filterConfig?.label || col.label }}\r\n          </label>\r\n          <mt-table-filter-field\r\n            [column]=\"col\"\r\n            [value]=\"pendingFilters()[col.key]\"\r\n            (valueChange)=\"updateFilter(col.key, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n    >\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        (click)=\"reset(); popover.hide()\"\r\n        [label]=\"'components.table.reset' | transloco\"\r\n      />\r\n      <mt-button\r\n        (click)=\"apply(); popover.hide()\"\r\n        [label]=\"'components.table.apply' | transloco\"\r\n      />\r\n    </div>\r\n  </div>\r\n</p-popover>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: TableFilterField, selector: "mt-table-filter-field", inputs: ["column", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilter, decorators: [{
             type: Component,
@@ -996,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             useExisting: forwardRef(() => TableFilter),
                             multi: true,
                         },
-                    ], template: "<mt-button\n  (click)=\"popover.toggle($event)\"\n  [label]=\"'components.table.filter' | transloco\"\n  [badge]=\"activeFilterCount()\"\n  severity=\"primary\"\n  size=\"small\"\n  icon=\"general.filter-funnel-01\"\n/>\n\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\n  <div class=\"flex flex-col max-h-[50vh]\">\n    <h4\n      class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\n    >\n      {{ \"components.table.filterOptions\" | transloco }}\n    </h4>\n\n    <div\n      class=\"space-y-3 overflow-y-auto flex-1 py-3\"\n      (keydown.enter)=\"apply(); popover.hide()\"\n    >\n      @for (col of filterableColumns(); track col.key) {\n        <div class=\"space-y-1\">\n          <label\n            class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\n          >\n            {{ col.filterConfig?.label || col.label }}\n          </label>\n          <mt-table-filter-field\n            [column]=\"col\"\n            [value]=\"pendingFilters()[col.key]\"\n            (valueChange)=\"updateFilter(col.key, $event)\"\n          />\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\n    >\n      <mt-button\n        variant=\"outlined\"\n        (click)=\"reset(); popover.hide()\"\n        [label]=\"'components.table.reset' | transloco\"\n      />\n      <mt-button\n        (click)=\"apply(); popover.hide()\"\n        [label]=\"'components.table.apply' | transloco\"\n      />\n    </div>\n  </div>\n</p-popover>\n" }]
+                    ], template: "<mt-button\r\n  (click)=\"popover.toggle($event)\"\r\n  [label]=\"'components.table.filter' | transloco\"\r\n  [badge]=\"activeFilterCount()\"\r\n  severity=\"primary\"\r\n  size=\"small\"\r\n  icon=\"general.filter-funnel-01\"\r\n/>\r\n\r\n<p-popover #popover [style]=\"{ width: '320px' }\" appendTo=\"body\">\r\n  <div class=\"flex flex-col max-h-[50vh]\">\r\n    <h4\r\n      class=\"text-lg py-2 font-semibold border-b border-surface-200 dark:border-surface-700 shrink-0\"\r\n    >\r\n      {{ \"components.table.filterOptions\" | transloco }}\r\n    </h4>\r\n\r\n    <div\r\n      class=\"space-y-3 overflow-y-auto flex-1 py-3\"\r\n      (keydown.enter)=\"apply(); popover.hide()\"\r\n    >\r\n      @for (col of filterableColumns(); track col.key) {\r\n        <div class=\"space-y-1\">\r\n          <label\r\n            class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n          >\r\n            {{ col.filterConfig?.label || col.label }}\r\n          </label>\r\n          <mt-table-filter-field\r\n            [column]=\"col\"\r\n            [value]=\"pendingFilters()[col.key]\"\r\n            (valueChange)=\"updateFilter(col.key, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"flex justify-end gap-2 pt-4 border-t border-surface-200 dark:border-surface-700 shrink-0\"\r\n    >\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        (click)=\"reset(); popover.hide()\"\r\n        [label]=\"'components.table.reset' | transloco\"\r\n      />\r\n      <mt-button\r\n        (click)=\"apply(); popover.hide()\"\r\n        [label]=\"'components.table.apply' | transloco\"\r\n      />\r\n    </div>\r\n  </div>\r\n</p-popover>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterReset: [{ type: i0.Output, args: ["filterReset"] }], popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 /**