@masterteam/components 0.0.18 → 0.0.20

package/assets/common.css

@@ -1,57 +1 @@
-@import "tailwindcss";
-@plugin "tailwindcss-primeui";
-
-@source inline("{dark:,}bg-primary-{50,{100..900..100},950}");
-@source inline("bg-teal-{50,{100..900..100},550}");
-@source inline("bg-violet-{50,{100..900..100},550}");
-@source inline("bg-red-{50,{100..900..100},550}");
-
-@source inline("border-primary-{50,{100..500..100},550}");
-@source inline("border-teal-{50,{100..500..100},550}");
-@source inline("border-violet-{50,{100..500..100},550}");
-@source inline("border-red-{50,{100..500..100},550}");
-
-@source inline("ring-primary-{50,{100..500..100},550}");
-@source inline("ring-teal-{50,{100..500..100},550}");
-@source inline("ring-violet-{50,{100..500..100},550}");
-@source inline("ring-red-{50,{100..500..100},550}");
-
-@source inline("text-primary-{50,{100..500..100},550}");
-@source inline("text-teal-{50,{100..500..100},550}");
-@source inline("text-violet-{50,{100..500..100},550}");
-@source inline("text-red-{50,{100..500..100},550}");
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-:root {
-  --app-background: var(--p-surface-100);
-}
-
-:root[class="dark"] {
-  --app-background: var(--p-surface-950);
-}
-
-body {
-  background-color: var(--app-background);
-}
-
-@utility bg-content {
-  background-color: var(--p-content-background);
-}
-
-@layer components {
-  label.required {
-    &:after {
-      content: "*";
-      color: var(--p-red-500);
-      padding-inline-start: 2px;
-    }
-  }
-  .dark {
-    label.required {
-      &:after {
-        color: var(--p-red-600);
-      }
-    }
-  }
-}
+:root{--app-background:var(--p-surface-100)}:root[class=dark]{--app-background:var(--p-surface-950)}body{background-color:var(--app-background)}@utility bg-content{background-color: var(--p-content-background);}@layer components{label.required:after{content:"*";color:var(--p-red-500);padding-inline-start:2px}.dark label.required:after{color:var(--p-red-600)}}

package/fesm2022/masterteam-components-radio-cards.mjs

@@ -1,57 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, model, output, contentChild, TemplateRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, computed, model, output, contentChild, TemplateRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Avatar } from '@masterteam/components/avatar';
 import { NgTemplateOutlet } from '@angular/common';
 
 class RadioCards {
     circle = input(false, ...(ngDevMode ? [{ debugName: "circle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color", transform: (value) => {
-                if (value) {
-                    return value;
-                }
-                return 'primary';
-            } }] : [{
-            transform: (value) => {
-                if (value) {
-                    return value;
-                }
-                return 'primary';
-            },
-        }]));
-    size = input('medium', ...(ngDevMode ? [{ debugName: "size", transform: (value) => {
-                if (value) {
-                    switch (value) {
-                        case 'small':
-                            return 'xs';
-                        case 'medium':
-                            return 'base';
-                        case 'large':
-                            return '2xl';
-                    }
-                }
-                return 'base';
-            } }] : [{
-            transform: (value) => {
-                if (value) {
-                    switch (value) {
-                        case 'small':
-                            return 'xs';
-                        case 'medium':
-                            return 'base';
-                        case 'large':
-                            return '2xl';
-                    }
-                }
-                return 'base';
-            },
-        }]));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     avatarSize = computed(() => {
         switch (this.size()) {
-            case 'xs':
+            case 'small':
                 return 'normal';
-            case 'base':
+            case 'medium':
                 return 'large';
-            case '2xl':
+            case 'large':
                 return 'xlarge';
             default:
                 return 'normal';
@@ -62,51 +24,38 @@ class RadioCards {
     selectionChange = output();
     itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     itemTemplateContent = contentChild('option', ...(ngDevMode ? [{ debugName: "itemTemplateContent", read: TemplateRef }] : [{ read: TemplateRef }]));
-    /**
-     * A computed signal that generates the dynamic Tailwind CSS classes
-     * for the active state based on the color input.
-     */
+    textSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'small':
+                return 'text-xs';
+            case 'large':
+                return 'text-2xl';
+            default:
+                return 'text-base';
+        }
+    }, ...(ngDevMode ? [{ debugName: "textSizeClass" }] : []));
+    classes = computed(() => { }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     activeColorClasses = computed(() => {
-        const color = this.color();
-        return {
-            [`bg-${color}-50`]: true,
-            [`dark:bg-${color}-800`]: true,
-            [`border-${color}-400`]: true,
-            [`ring-${color}-200`]: true,
-        };
+        return [
+            'bg-primary-50',
+            'dark:bg-primary-800',
+            'border-primary-400',
+            'ring-primary-200',
+        ];
     }, ...(ngDevMode ? [{ debugName: "activeColorClasses" }] : []));
-    constructor() {
-        effect(() => {
-            const active = this.activeId();
-            console.log('Active ID changed to:', active);
-            this.options.update((options) => {
-                return options.map((option) => {
-                    option.active = option.id === active;
-                    return option;
-                });
-            });
-        });
-    }
     selectItem(item) {
         if (this.activeId() !== item.id) {
             this.activeId.set(item.id);
             this.selectionChange.emit(item);
         }
-        const options = this.options();
-        options.map((option) => {
-            const active = option.id === this.activeId();
-            option.active = active;
-            return option;
-        });
-        this.options.set(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioCards, isStandalone: true, selector: "mt-radio-cards", inputs: { circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { options: "optionsChange", activeId: "activeIdChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplateContent", first: true, predicate: ["option"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioCards, isStandalone: true, selector: "mt-radio-cards", inputs: { circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { options: "optionsChange", activeId: "activeIdChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplateContent", first: true, predicate: ["option"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      @let active = item.id === activeId();\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          active\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100'\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: active,\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      [class]=\"[\n        'font-semibold',\n        textSizeClass(),\n        'dark:text-gray-100',\n        'text-gray-600',\n      ]\"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCards, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-radio-cards', standalone: true, imports: [NgTemplateOutlet, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'mt-radio-cards', standalone: true, imports: [NgTemplateOutlet, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      @let active = item.id === activeId();\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          active\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100'\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: active,\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      [class]=\"[\n        'font-semibold',\n        textSizeClass(),\n        'dark:text-gray-100',\n        'text-gray-600',\n      ]\"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/masterteam-components-radio-cards.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-radio-cards.mjs","sources":["../../../../packages/masterteam/components/radio-cards/radio-cards.ts","../../../../packages/masterteam/components/radio-cards/radio-cards.html","../../../../packages/masterteam/components/radio-cards/masterteam-components-radio-cards.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  output,\n  TemplateRef,\n  computed,\n  model,\n  effect,\n  booleanAttribute,\n} from '@angular/core';\nimport { MTIcon } from '@masterteam/icons';\nimport { Avatar } from '@masterteam/components/avatar';\nimport { NgTemplateOutlet } from '@angular/common';\n\nexport interface RadioItem {\n  id: string | number;\n  name?: string;\n  active?: boolean;\n  icon?: MTIcon;\n  [key: string]: any;\n}\n\n@Component({\n  selector: 'mt-radio-cards',\n  standalone: true,\n  imports: [NgTemplateOutlet, Avatar],\n  templateUrl: './radio-cards.html',\n  styleUrl: './radio-cards.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioCards {\n  circle = input<boolean, unknown>(false, { transform: booleanAttribute });\n  color = input('primary', {\n    transform: (value: string) => {\n      if (value) {\n        return value;\n      }\n      return 'primary';\n    },\n  });\n  size = input('medium', {\n    transform: (value: 'small' | 'medium' | 'large') => {\n      if (value) {\n        switch (value) {\n          case 'small':\n            return 'xs';\n          case 'medium':\n            return 'base';\n          case 'large':\n            return '2xl';\n        }\n      }\n      return 'base';\n    },\n  });\n  avatarSize = computed(() => {\n    switch (this.size()) {\n      case 'xs':\n        return 'normal';\n      case 'base':\n        return 'large';\n      case '2xl':\n        return 'xlarge';\n      default:\n        return 'normal';\n    }\n  });\n  options = model.required<RadioItem[]>();\n  activeId = model<string | number>();\n  selectionChange = output<RadioItem>();\n\n  itemTemplate = input<TemplateRef<any> | null>(null);\n  itemTemplateContent = contentChild('option', { read: TemplateRef });\n\n  /**\n   * A computed signal that generates the dynamic Tailwind CSS classes\n   * for the active state based on the color input.\n   */\n  protected activeColorClasses = computed(() => {\n    const color = this.color();\n    return {\n      [`bg-${color}-50`]: true,\n      [`dark:bg-${color}-800`]: true,\n      [`border-${color}-400`]: true,\n      [`ring-${color}-200`]: true,\n    };\n  });\n\n  constructor() {\n    effect(() => {\n      const active = this.activeId();\n      console.log('Active ID changed to:', active);\n      this.options.update((options) => {\n        return options.map((option) => {\n          option.active = option.id === active;\n          return option;\n        });\n      });\n    });\n  }\n\n  public selectItem(item: RadioItem): void {\n    if (this.activeId() !== item.id) {\n      this.activeId.set(item.id);\n      this.selectionChange.emit(item);\n    }\n    const options = this.options();\n    options.map((option) => {\n      const active = option.id === this.activeId();\n      option.active = active;\n      return option;\n    });\n    this.options.set(options);\n  }\n}\n","<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-radio-cards.mjs","sources":["../../../../packages/masterteam/components/radio-cards/radio-cards.ts","../../../../packages/masterteam/components/radio-cards/radio-cards.html","../../../../packages/masterteam/components/radio-cards/masterteam-components-radio-cards.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  output,\n  TemplateRef,\n  computed,\n  model,\n  booleanAttribute,\n} from '@angular/core';\nimport { MTIcon } from '@masterteam/icons';\nimport { Avatar } from '@masterteam/components/avatar';\nimport { NgTemplateOutlet } from '@angular/common';\n\nexport interface RadioItem {\n  id: string | number;\n  name?: string;\n  icon?: MTIcon;\n  [key: string]: any;\n}\n\n@Component({\n  selector: 'mt-radio-cards',\n  standalone: true,\n  imports: [NgTemplateOutlet, Avatar],\n  templateUrl: './radio-cards.html',\n  styleUrl: './radio-cards.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioCards {\n  circle = input<boolean, unknown>(false, { transform: booleanAttribute });\n  color = input<string>('primary');\n  size = input<'small' | 'medium' | 'large'>('medium');\n  avatarSize = computed(() => {\n    switch (this.size()) {\n      case 'small':\n        return 'normal';\n      case 'medium':\n        return 'large';\n      case 'large':\n        return 'xlarge';\n      default:\n        return 'normal';\n    }\n  });\n  options = model.required<RadioItem[]>();\n  activeId = model<string | number>();\n  selectionChange = output<RadioItem>();\n\n  itemTemplate = input<TemplateRef<any> | null>(null);\n  itemTemplateContent = contentChild('option', { read: TemplateRef });\n\n  textSizeClass = computed(() => {\n    switch (this.size()) {\n      case 'small':\n        return 'text-xs';\n\n      case 'large':\n        return 'text-2xl';\n\n      default:\n        return 'text-base';\n    }\n  });\n  classes = computed(() => {});\n\n  protected activeColorClasses = computed(() => {\n    return [\n      'bg-primary-50',\n      'dark:bg-primary-800',\n      'border-primary-400',\n      'ring-primary-200',\n    ];\n  });\n\n  public selectItem(item: RadioItem): void {\n    if (this.activeId() !== item.id) {\n      this.activeId.set(item.id);\n      this.selectionChange.emit(item);\n    }\n  }\n}\n","<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      @let active = item.id === activeId();\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          active\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100'\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: active,\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      [class]=\"[\n        'font-semibold',\n        textSizeClass(),\n        'dark:text-gray-100',\n        'text-gray-600',\n      ]\"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-table.mjs

@@ -0,0 +1,163 @@
+import * as i0 from '@angular/core';
+import { output, input, model, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet, DatePipe } from '@angular/common';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Button } from '@masterteam/components/button';
+import { TextField } from '@masterteam/components/text-field';
+import { SelectField } from '@masterteam/components/select-field';
+import { Paginator } from '@masterteam/components/paginator';
+import { CheckboxField } from '@masterteam/components/checkbox-field';
+
+class Table {
+    selectionChange = output();
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    selectableRows = input(false, ...(ngDevMode ? [{ debugName: "selectableRows" }] : []));
+    generalSearch = input(false, ...(ngDevMode ? [{ debugName: "generalSearch" }] : []));
+    showFilters = input(false, ...(ngDevMode ? [{ debugName: "showFilters" }] : []));
+    paginatorPosition = input('end', ...(ngDevMode ? [{ debugName: "paginatorPosition" }] : []));
+    pageSize = model(5, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    currentPage = model(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    filterTerm = model('', ...(ngDevMode ? [{ debugName: "filterTerm" }] : []));
+    selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    isFilterPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFilterPanelOpen" }] : []));
+    pendingFilters = signal({}, ...(ngDevMode ? [{ debugName: "pendingFilters" }] : []));
+    appliedFilters = signal({}, ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
+    filterableColumns = computed(() => this.columns().filter((col) => !!col.filterConfig), ...(ngDevMode ? [{ debugName: "filterableColumns" }] : []));
+    activeFilterCount = computed(() => {
+        return Object.values(this.appliedFilters()).filter((value) => value !== null && value !== undefined && value !== '').length;
+    }, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : []));
+    filteredData = computed(() => {
+        const data = this.data();
+        const searchTerm = this.filterTerm().toLowerCase();
+        const filters = this.appliedFilters();
+        const filterKeys = Object.keys(filters);
+        if (searchTerm != '') {
+            return data.filter((item) => {
+                return Object.values(item).some((value) => {
+                    if (typeof value === 'string') {
+                        return value.toLowerCase().includes(searchTerm);
+                    }
+                    return false;
+                });
+            });
+        }
+        if (filterKeys.length === 0) {
+            return data;
+        }
+        return data.filter((item) => {
+            return filterKeys.every((key) => {
+                const filterValue = filters[key];
+                const itemValue = this.getProperty(item, key);
+                if (filterValue === null ||
+                    filterValue === undefined ||
+                    filterValue === '') {
+                    return true;
+                }
+                if (typeof itemValue === 'string') {
+                    return itemValue
+                        .toLowerCase()
+                        .includes(String(filterValue).toLowerCase());
+                }
+                return itemValue === filterValue;
+            });
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+    totalRecords = computed(() => this.filteredData().length, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    paginatedData = computed(() => {
+        const data = this.filteredData();
+        const first = this.first();
+        const pageSize = this.pageSize();
+        return data.slice(first, first + pageSize);
+    }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
+    allSelectedOnPage = computed(() => {
+        const pageData = this.paginatedData();
+        if (pageData.length === 0)
+            return false;
+        return pageData.every((row) => this.selectedRows().has(row));
+    }, ...(ngDevMode ? [{ debugName: "allSelectedOnPage" }] : []));
+    toggleFilterPanel() {
+        const isOpen = this.isFilterPanelOpen();
+        if (!isOpen) {
+            this.pendingFilters.set({ ...this.appliedFilters() });
+        }
+        this.isFilterPanelOpen.set(!isOpen);
+    }
+    updatePendingFilter(key, value) {
+        if (value === 'true')
+            value = true;
+        if (value === 'false')
+            value = false;
+        this.pendingFilters.update((current) => ({ ...current, [key]: value }));
+    }
+    applyFilters() {
+        this.appliedFilters.set({ ...this.pendingFilters() });
+        this.first.set(0);
+        this.currentPage.set(0);
+        this.isFilterPanelOpen.set(false);
+    }
+    resetFilters() {
+        this.pendingFilters.set({});
+        this.appliedFilters.set({});
+        this.first.set(0);
+        this.currentPage.set(0);
+        this.isFilterPanelOpen.set(false);
+    }
+    toggleRow(row) {
+        const newSet = new Set(this.selectedRows());
+        if (newSet.has(row))
+            newSet.delete(row);
+        else
+            newSet.add(row);
+        this.selectedRows.set(newSet);
+        this.selectionChange.emit(Array.from(this.selectedRows()));
+    }
+    toggleAllRowsOnPage() {
+        const currentSelection = new Set(this.selectedRows());
+        const pageData = this.paginatedData();
+        const allSelected = this.allSelectedOnPage();
+        if (allSelected) {
+            pageData.forEach((row) => currentSelection.delete(row));
+        }
+        else {
+            pageData.forEach((row) => currentSelection.add(row));
+        }
+        this.selectedRows.set(currentSelection);
+        this.selectionChange.emit(Array.from(this.selectedRows()));
+    }
+    getProperty(obj, key) {
+        return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);
+    }
+    onSearchChange(searchTerm) {
+        const value = searchTerm.target.value;
+        this.filterTerm.set(value);
+        this.currentPage.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: Table, isStandalone: true, selector: "mt-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, generalSearch: { classPropertyName: "generalSearch", publicName: "generalSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, filterTerm: { classPropertyName: "filterTerm", publicName: "filterTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", pageSize: "pageSizeChange", currentPage: "currentPageChange", first: "firstChange", filterTerm: "filterTermChange" }, providers: [], ngImport: i0, template: "<div class=\"space-y-4\">\n  <div\n    class=\"flex relative\"\n    [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\n  >\n    @if (generalSearch()) {\n      <mt-text-field\n        [(ngModel)]=\"filterTerm\"\n        (change)=\"onSearchChange($event)\"\n        placeholder=\"Search...\"\n      ></mt-text-field>\n    }\n    @if (showFilters()) {\n      <mt-button\n        variant=\"outline\"\n        (click)=\"toggleFilterPanel()\"\n        label=\"Filter\"\n        [badge]=\"activeFilterCount()\"\n        icon=\"general.filter-funnel-01\"\n      >\n      </mt-button>\n      @if (isFilterPanelOpen()) {\n        <div\n          class=\"absolute top-full right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-content shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\"\n          role=\"menu\"\n        >\n          <div class=\"p-4\">\n            <h3 class=\"text-base font-semibold\">Filter Options</h3>\n          </div>\n          <div\n            class=\"border-t border-surface-300 dark:border-surface-500 p-4 space-y-4\"\n          >\n            @for (col of filterableColumns(); track col.key) {\n              <div class=\"space-y-1\">\n                <label class=\"block text-sm font-medium\">\n                  {{ col.filterConfig?.label }}\n                </label>\n                @switch (col.filterConfig?.type) {\n                  @case (\"text\") {\n                    <mt-text-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                    ></mt-text-field>\n                  }\n                  @case (\"select\") {\n                    <mt-select-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                      [options]=\"col.filterConfig?.options\"\n                      [hasPlaceholderPrefix]=\"false\"\n                      [placeholder]=\"'Select ' + col.filterConfig?.label\"\n                      showClear\n                    ></mt-select-field>\n                  }\n                }\n              </div>\n            }\n          </div>\n          <div\n            class=\"flex items-center justify-end space-x-2 border-t border-surface-300 dark:border-surface-500 bg-surface-50 dark:bg-surface-950 p-4 rounded-b-md\"\n          >\n            <mt-button\n              variant=\"outlined\"\n              (click)=\"resetFilters()\"\n              label=\"Reset\"\n            />\n            <mt-button (click)=\"applyFilters()\" label=\"Apply\" />\n          </div>\n        </div>\n      }\n    }\n  </div>\n\n  <div\n    class=\"overflow-x-auto bg-content rounded-lg border border-surface-300 dark:border-surface-500\"\n  >\n    <table class=\"min-w-full text-sm align-middle table-fixed\">\n      <thead\n        class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\n      >\n        <tr>\n          @if (selectableRows()) {\n            <th class=\"p-4 w-12 text-start\">\n              <mt-checkbox-field\n                [ngModel]=\"allSelectedOnPage()\"\n                (ngModelChange)=\"toggleAllRowsOnPage()\"\n              ></mt-checkbox-field>\n            </th>\n          }\n\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"p-4 text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              {{ col.label }}\n            </th>\n          }\n\n          @if (actions().length > 0) {\n            <th\n              class=\"p-4 text-end font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              Actions\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"divide-y divide-gray-200\">\n        @for (row of paginatedData(); track row.id) {\n          <tr\n            class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\n          >\n            @if (selectableRows()) {\n              <td class=\"p-4 w-12\">\n                <mt-checkbox-field\n                  [ngModel]=\"selectedRows().has(row)\"\n                  (ngModelChange)=\"toggleRow(row)\"\n                ></mt-checkbox-field>\n              </td>\n            }\n\n            @for (col of columns(); track col.key) {\n              <td class=\"p-4 text-gray-700 dark:text-gray-100\">\n                @switch (col.type) {\n                  @case (\"boolean\") {\n                    <mt-toggle-field\n                      [(ngModel)]=\"row[col.key]\"\n                    ></mt-toggle-field>\n                  }\n                  @case (\"date\") {\n                    {{ getProperty(row, col.key) | date: \"mediumDate\" }}\n                  }\n                  @case (\"custom\") {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        col.customCellTpl;\n                        context: { $implicit: row }\n                      \"\n                    >\n                    </ng-container>\n                  }\n                  @default {\n                    {{ getProperty(row, col.key) }}\n                  }\n                }\n              </td>\n            }\n\n            @if (actions().length > 0) {\n              <td class=\"p-4 text-right\">\n                <div class=\"flex items-center justify-end space-x-2\">\n                  @for (action of actions(); track action.label) {\n                    <mt-button\n                      [icon]=\"action.icon\"\n                      [severity]=\"action.color\"\n                      [variant]=\"action.variant\"\n                      (click)=\"action.action(row)\"\n                      [tooltip]=\"action.label\"\n                    ></mt-button>\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td\n              [colSpan]=\"columns().length + (actions().length > 0 ? 2 : 1)\"\n              class=\"text-center p-8 text-gray-500 dark:text-gray-200\"\n            >\n              No data available.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex flex-col gap-3\" [class]=\"'items-' + paginatorPosition()\">\n    <mt-paginator\n      [(rows)]=\"pageSize\"\n      [(first)]=\"first\"\n      [(page)]=\"currentPage\"\n      [totalRecords]=\"totalRecords()\"\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\n    ></mt-paginator>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "pKeyFilter", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: Paginator, selector: "mt-paginator", inputs: ["rows", "totalRecords", "first", "page", "rowsPerPageOptions", "showFirstLastIcon", "showCurrentPageReport", "fluid", "pageLinkSize", "alwaysShow"], outputs: ["rowsChange", "firstChange", "pageChange", "onPageChange"] }, { kind: "component", type: CheckboxField, selector: "mt-checkbox-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-table', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        DatePipe,
+                        ToggleField,
+                        FormsModule,
+                        Button,
+                        TextField,
+                        SelectField,
+                        Paginator,
+                        CheckboxField,
+                    ], providers: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"space-y-4\">\n  <div\n    class=\"flex relative\"\n    [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\n  >\n    @if (generalSearch()) {\n      <mt-text-field\n        [(ngModel)]=\"filterTerm\"\n        (change)=\"onSearchChange($event)\"\n        placeholder=\"Search...\"\n      ></mt-text-field>\n    }\n    @if (showFilters()) {\n      <mt-button\n        variant=\"outline\"\n        (click)=\"toggleFilterPanel()\"\n        label=\"Filter\"\n        [badge]=\"activeFilterCount()\"\n        icon=\"general.filter-funnel-01\"\n      >\n      </mt-button>\n      @if (isFilterPanelOpen()) {\n        <div\n          class=\"absolute top-full right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-content shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\"\n          role=\"menu\"\n        >\n          <div class=\"p-4\">\n            <h3 class=\"text-base font-semibold\">Filter Options</h3>\n          </div>\n          <div\n            class=\"border-t border-surface-300 dark:border-surface-500 p-4 space-y-4\"\n          >\n            @for (col of filterableColumns(); track col.key) {\n              <div class=\"space-y-1\">\n                <label class=\"block text-sm font-medium\">\n                  {{ col.filterConfig?.label }}\n                </label>\n                @switch (col.filterConfig?.type) {\n                  @case (\"text\") {\n                    <mt-text-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                    ></mt-text-field>\n                  }\n                  @case (\"select\") {\n                    <mt-select-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                      [options]=\"col.filterConfig?.options\"\n                      [hasPlaceholderPrefix]=\"false\"\n                      [placeholder]=\"'Select ' + col.filterConfig?.label\"\n                      showClear\n                    ></mt-select-field>\n                  }\n                }\n              </div>\n            }\n          </div>\n          <div\n            class=\"flex items-center justify-end space-x-2 border-t border-surface-300 dark:border-surface-500 bg-surface-50 dark:bg-surface-950 p-4 rounded-b-md\"\n          >\n            <mt-button\n              variant=\"outlined\"\n              (click)=\"resetFilters()\"\n              label=\"Reset\"\n            />\n            <mt-button (click)=\"applyFilters()\" label=\"Apply\" />\n          </div>\n        </div>\n      }\n    }\n  </div>\n\n  <div\n    class=\"overflow-x-auto bg-content rounded-lg border border-surface-300 dark:border-surface-500\"\n  >\n    <table class=\"min-w-full text-sm align-middle table-fixed\">\n      <thead\n        class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\n      >\n        <tr>\n          @if (selectableRows()) {\n            <th class=\"p-4 w-12 text-start\">\n              <mt-checkbox-field\n                [ngModel]=\"allSelectedOnPage()\"\n                (ngModelChange)=\"toggleAllRowsOnPage()\"\n              ></mt-checkbox-field>\n            </th>\n          }\n\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"p-4 text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              {{ col.label }}\n            </th>\n          }\n\n          @if (actions().length > 0) {\n            <th\n              class=\"p-4 text-end font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              Actions\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"divide-y divide-gray-200\">\n        @for (row of paginatedData(); track row.id) {\n          <tr\n            class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\n          >\n            @if (selectableRows()) {\n              <td class=\"p-4 w-12\">\n                <mt-checkbox-field\n                  [ngModel]=\"selectedRows().has(row)\"\n                  (ngModelChange)=\"toggleRow(row)\"\n                ></mt-checkbox-field>\n              </td>\n            }\n\n            @for (col of columns(); track col.key) {\n              <td class=\"p-4 text-gray-700 dark:text-gray-100\">\n                @switch (col.type) {\n                  @case (\"boolean\") {\n                    <mt-toggle-field\n                      [(ngModel)]=\"row[col.key]\"\n                    ></mt-toggle-field>\n                  }\n                  @case (\"date\") {\n                    {{ getProperty(row, col.key) | date: \"mediumDate\" }}\n                  }\n                  @case (\"custom\") {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        col.customCellTpl;\n                        context: { $implicit: row }\n                      \"\n                    >\n                    </ng-container>\n                  }\n                  @default {\n                    {{ getProperty(row, col.key) }}\n                  }\n                }\n              </td>\n            }\n\n            @if (actions().length > 0) {\n              <td class=\"p-4 text-right\">\n                <div class=\"flex items-center justify-end space-x-2\">\n                  @for (action of actions(); track action.label) {\n                    <mt-button\n                      [icon]=\"action.icon\"\n                      [severity]=\"action.color\"\n                      [variant]=\"action.variant\"\n                      (click)=\"action.action(row)\"\n                      [tooltip]=\"action.label\"\n                    ></mt-button>\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td\n              [colSpan]=\"columns().length + (actions().length > 0 ? 2 : 1)\"\n              class=\"text-center p-8 text-gray-500 dark:text-gray-200\"\n            >\n              No data available.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex flex-col gap-3\" [class]=\"'items-' + paginatorPosition()\">\n    <mt-paginator\n      [(rows)]=\"pageSize\"\n      [(first)]=\"first\"\n      [(page)]=\"currentPage\"\n      [totalRecords]=\"totalRecords()\"\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\n    ></mt-paginator>\n  </div>\n</div>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Table };
+//# sourceMappingURL=masterteam-components-table.mjs.map

package/fesm2022/masterteam-components-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-table.mjs","sources":["../../../../packages/masterteam/components/table/table.ts","../../../../packages/masterteam/components/table/table.html","../../../../packages/masterteam/components/table/masterteam-components-table.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgTemplateOutlet, DatePipe } from '@angular/common';\nimport { ColumnDef, TableAction } from './table-types';\nimport { ToggleField } from '@masterteam/components/toggle-field';\nimport { FormsModule } from '@angular/forms';\nimport { Button } from '@masterteam/components/button';\nimport { TextField } from '@masterteam/components/text-field';\nimport { SelectField } from '@masterteam/components/select-field';\nimport { Paginator } from '@masterteam/components/paginator';\nimport { CheckboxField } from '@masterteam/components/checkbox-field';\n\n@Component({\n  selector: 'mt-table',\n  templateUrl: './table.html',\n  styleUrls: ['./table.css'],\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    DatePipe,\n    ToggleField,\n    FormsModule,\n    Button,\n    TextField,\n    SelectField,\n    Paginator,\n    CheckboxField,\n  ],\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Table {\n  selectionChange = output<any[]>();\n\n  data = input.required<any[]>();\n  columns = input.required<ColumnDef[]>();\n  actions = input<TableAction[]>([]);\n  selectableRows = input<boolean>(false);\n  generalSearch = input<boolean>(false);\n  showFilters = input<boolean>(false);\n\n  paginatorPosition = input<'end' | 'start' | 'center'>('end');\n  pageSize = model<number>(5);\n  currentPage = model<number>(0);\n  first = model<number>(0);\n  filterTerm = model<string>('');\n\n  protected selectedRows = signal<Set<any>>(new Set());\n  protected isFilterPanelOpen = signal<boolean>(false);\n\n  protected pendingFilters = signal<Record<string, any>>({});\n  protected appliedFilters = signal<Record<string, any>>({});\n\n  protected filterableColumns = computed(() =>\n    this.columns().filter((col) => !!col.filterConfig),\n  );\n\n  protected activeFilterCount = computed(() => {\n    return Object.values(this.appliedFilters()).filter(\n      (value) => value !== null && value !== undefined && value !== '',\n    ).length;\n  });\n\n  protected filteredData = computed(() => {\n    const data = this.data();\n    const searchTerm = this.filterTerm().toLowerCase();\n\n    const filters = this.appliedFilters();\n    const filterKeys = Object.keys(filters);\n\n    if (searchTerm != '') {\n      return data.filter((item) => {\n        return Object.values(item).some((value) => {\n          if (typeof value === 'string') {\n            return value.toLowerCase().includes(searchTerm);\n          }\n          return false;\n        });\n      });\n    }\n\n    if (filterKeys.length === 0) {\n      return data;\n    }\n\n    return data.filter((item) => {\n      return filterKeys.every((key) => {\n        const filterValue = filters[key];\n        const itemValue = this.getProperty(item, key);\n\n        if (\n          filterValue === null ||\n          filterValue === undefined ||\n          filterValue === ''\n        ) {\n          return true;\n        }\n\n        if (typeof itemValue === 'string') {\n          return itemValue\n            .toLowerCase()\n            .includes(String(filterValue).toLowerCase());\n        }\n        return itemValue === filterValue;\n      });\n    });\n  });\n\n  protected totalRecords = computed(() => this.filteredData().length);\n\n  protected paginatedData = computed(() => {\n    const data = this.filteredData();\n    const first = this.first();\n    const pageSize = this.pageSize();\n    return data.slice(first, first + pageSize);\n  });\n\n  protected allSelectedOnPage = computed(() => {\n    const pageData = this.paginatedData();\n    if (pageData.length === 0) return false;\n    return pageData.every((row) => this.selectedRows().has(row));\n  });\n\n  toggleFilterPanel(): void {\n    const isOpen = this.isFilterPanelOpen();\n    if (!isOpen) {\n      this.pendingFilters.set({ ...this.appliedFilters() });\n    }\n    this.isFilterPanelOpen.set(!isOpen);\n  }\n\n  updatePendingFilter(key: string, value: any): void {\n    if (value === 'true') value = true;\n    if (value === 'false') value = false;\n\n    this.pendingFilters.update((current) => ({ ...current, [key]: value }));\n  }\n\n  applyFilters(): void {\n    this.appliedFilters.set({ ...this.pendingFilters() });\n    this.first.set(0);\n    this.currentPage.set(0);\n    this.isFilterPanelOpen.set(false);\n  }\n\n  resetFilters(): void {\n    this.pendingFilters.set({});\n    this.appliedFilters.set({});\n    this.first.set(0);\n    this.currentPage.set(0);\n    this.isFilterPanelOpen.set(false);\n  }\n\n  toggleRow(row: any): void {\n    const newSet = new Set(this.selectedRows());\n    if (newSet.has(row)) newSet.delete(row);\n    else newSet.add(row);\n    this.selectedRows.set(newSet);\n    this.selectionChange.emit(Array.from(this.selectedRows()));\n  }\n\n  toggleAllRowsOnPage(): void {\n    const currentSelection = new Set(this.selectedRows());\n    const pageData = this.paginatedData();\n    const allSelected = this.allSelectedOnPage();\n    if (allSelected) {\n      pageData.forEach((row) => currentSelection.delete(row));\n    } else {\n      pageData.forEach((row) => currentSelection.add(row));\n    }\n    this.selectedRows.set(currentSelection);\n    this.selectionChange.emit(Array.from(this.selectedRows()));\n  }\n\n  getProperty(obj: any, key: string): any {\n    return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);\n  }\n\n  onSearchChange(searchTerm: Event) {\n    const value = (searchTerm.target as HTMLInputElement).value;\n    this.filterTerm.set(value);\n    this.currentPage.set(1);\n  }\n}\n","<div class=\"space-y-4\">\n  <div\n    class=\"flex relative\"\n    [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\n  >\n    @if (generalSearch()) {\n      <mt-text-field\n        [(ngModel)]=\"filterTerm\"\n        (change)=\"onSearchChange($event)\"\n        placeholder=\"Search...\"\n      ></mt-text-field>\n    }\n    @if (showFilters()) {\n      <mt-button\n        variant=\"outline\"\n        (click)=\"toggleFilterPanel()\"\n        label=\"Filter\"\n        [badge]=\"activeFilterCount()\"\n        icon=\"general.filter-funnel-01\"\n      >\n      </mt-button>\n      @if (isFilterPanelOpen()) {\n        <div\n          class=\"absolute top-full right-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-content shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\"\n          role=\"menu\"\n        >\n          <div class=\"p-4\">\n            <h3 class=\"text-base font-semibold\">Filter Options</h3>\n          </div>\n          <div\n            class=\"border-t border-surface-300 dark:border-surface-500 p-4 space-y-4\"\n          >\n            @for (col of filterableColumns(); track col.key) {\n              <div class=\"space-y-1\">\n                <label class=\"block text-sm font-medium\">\n                  {{ col.filterConfig?.label }}\n                </label>\n                @switch (col.filterConfig?.type) {\n                  @case (\"text\") {\n                    <mt-text-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                    ></mt-text-field>\n                  }\n                  @case (\"select\") {\n                    <mt-select-field\n                      [(ngModel)]=\"pendingFilters()[col.key]\"\n                      (ngModelChange)=\"updatePendingFilter(col.key, $event)\"\n                      [options]=\"col.filterConfig?.options\"\n                      [hasPlaceholderPrefix]=\"false\"\n                      [placeholder]=\"'Select ' + col.filterConfig?.label\"\n                      showClear\n                    ></mt-select-field>\n                  }\n                }\n              </div>\n            }\n          </div>\n          <div\n            class=\"flex items-center justify-end space-x-2 border-t border-surface-300 dark:border-surface-500 bg-surface-50 dark:bg-surface-950 p-4 rounded-b-md\"\n          >\n            <mt-button\n              variant=\"outlined\"\n              (click)=\"resetFilters()\"\n              label=\"Reset\"\n            />\n            <mt-button (click)=\"applyFilters()\" label=\"Apply\" />\n          </div>\n        </div>\n      }\n    }\n  </div>\n\n  <div\n    class=\"overflow-x-auto bg-content rounded-lg border border-surface-300 dark:border-surface-500\"\n  >\n    <table class=\"min-w-full text-sm align-middle table-fixed\">\n      <thead\n        class=\"bg-surface-50 dark:bg-surface-950 border-b border-surface-300 dark:border-surface-500\"\n      >\n        <tr>\n          @if (selectableRows()) {\n            <th class=\"p-4 w-12 text-start\">\n              <mt-checkbox-field\n                [ngModel]=\"allSelectedOnPage()\"\n                (ngModelChange)=\"toggleAllRowsOnPage()\"\n              ></mt-checkbox-field>\n            </th>\n          }\n\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"p-4 text-start font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              {{ col.label }}\n            </th>\n          }\n\n          @if (actions().length > 0) {\n            <th\n              class=\"p-4 text-end font-semibold text-gray-600 dark:text-gray-50 uppercase tracking-wider\"\n            >\n              Actions\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"divide-y divide-gray-200\">\n        @for (row of paginatedData(); track row.id) {\n          <tr\n            class=\"hover:bg-gray-50 dark:hover:bg-surface-950 border-surface-300 dark:border-surface-500\"\n          >\n            @if (selectableRows()) {\n              <td class=\"p-4 w-12\">\n                <mt-checkbox-field\n                  [ngModel]=\"selectedRows().has(row)\"\n                  (ngModelChange)=\"toggleRow(row)\"\n                ></mt-checkbox-field>\n              </td>\n            }\n\n            @for (col of columns(); track col.key) {\n              <td class=\"p-4 text-gray-700 dark:text-gray-100\">\n                @switch (col.type) {\n                  @case (\"boolean\") {\n                    <mt-toggle-field\n                      [(ngModel)]=\"row[col.key]\"\n                    ></mt-toggle-field>\n                  }\n                  @case (\"date\") {\n                    {{ getProperty(row, col.key) | date: \"mediumDate\" }}\n                  }\n                  @case (\"custom\") {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        col.customCellTpl;\n                        context: { $implicit: row }\n                      \"\n                    >\n                    </ng-container>\n                  }\n                  @default {\n                    {{ getProperty(row, col.key) }}\n                  }\n                }\n              </td>\n            }\n\n            @if (actions().length > 0) {\n              <td class=\"p-4 text-right\">\n                <div class=\"flex items-center justify-end space-x-2\">\n                  @for (action of actions(); track action.label) {\n                    <mt-button\n                      [icon]=\"action.icon\"\n                      [severity]=\"action.color\"\n                      [variant]=\"action.variant\"\n                      (click)=\"action.action(row)\"\n                      [tooltip]=\"action.label\"\n                    ></mt-button>\n                  }\n                </div>\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td\n              [colSpan]=\"columns().length + (actions().length > 0 ? 2 : 1)\"\n              class=\"text-center p-8 text-gray-500 dark:text-gray-200\"\n            >\n              No data available.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex flex-col gap-3\" [class]=\"'items-' + paginatorPosition()\">\n    <mt-paginator\n      [(rows)]=\"pageSize\"\n      [(first)]=\"first\"\n      [(page)]=\"currentPage\"\n      [totalRecords]=\"totalRecords()\"\n      [rowsPerPageOptions]=\"[5, 10, 20, 50]\"\n    ></mt-paginator>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterteam/components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "publishConfig": {
     "directory": ".",
     "linkDirectory": false,
@@ -38,10 +38,6 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/masterteam-components.mjs"
     },
-    "./avatar-text": {
-      "types": "./avatar-text/index.d.ts",
-      "default": "./fesm2022/masterteam-components-avatar-text.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/masterteam-components-avatar.mjs"
@@ -62,49 +58,57 @@
       "types": "./card/index.d.ts",
       "default": "./fesm2022/masterteam-components-card.mjs"
     },
-    "./color-picker-field": {
-      "types": "./color-picker-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-color-picker-field.mjs"
+    "./checkbox-field": {
+      "types": "./checkbox-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-checkbox-field.mjs"
     },
     "./chip": {
       "types": "./chip/index.d.ts",
       "default": "./fesm2022/masterteam-components-chip.mjs"
     },
-    "./checkbox-field": {
-      "types": "./checkbox-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-checkbox-field.mjs"
-    },
-    "./date-field": {
-      "types": "./date-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-date-field.mjs"
+    "./avatar-text": {
+      "types": "./avatar-text/index.d.ts",
+      "default": "./fesm2022/masterteam-components-avatar-text.mjs"
     },
     "./editor-field": {
       "types": "./editor-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-editor-field.mjs"
     },
+    "./date-field": {
+      "types": "./date-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-date-field.mjs"
+    },
     "./field-validation": {
       "types": "./field-validation/index.d.ts",
       "default": "./fesm2022/masterteam-components-field-validation.mjs"
     },
-    "./formula-builder": {
-      "types": "./formula-builder/index.d.ts",
-      "default": "./fesm2022/masterteam-components-formula-builder.mjs"
+    "./color-picker-field": {
+      "types": "./color-picker-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-color-picker-field.mjs"
     },
     "./icon-field": {
       "types": "./icon-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-icon-field.mjs"
     },
+    "./formula-builder": {
+      "types": "./formula-builder/index.d.ts",
+      "default": "./fesm2022/masterteam-components-formula-builder.mjs"
+    },
     "./list": {
       "types": "./list/index.d.ts",
       "default": "./fesm2022/masterteam-components-list.mjs"
     },
+    "./multi-select-field": {
+      "types": "./multi-select-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-multi-select-field.mjs"
+    },
     "./number-field": {
       "types": "./number-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-number-field.mjs"
     },
-    "./multi-select-field": {
-      "types": "./multi-select-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-multi-select-field.mjs"
+    "./radio-button-field": {
+      "types": "./radio-button-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-radio-button-field.mjs"
     },
     "./paginator": {
       "types": "./paginator/index.d.ts",
@@ -114,18 +118,10 @@
       "types": "./radio-cards/index.d.ts",
       "default": "./fesm2022/masterteam-components-radio-cards.mjs"
     },
-    "./radio-button-field": {
-      "types": "./radio-button-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-radio-button-field.mjs"
-    },
     "./radio-cards-field": {
       "types": "./radio-cards-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-radio-cards-field.mjs"
     },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "default": "./fesm2022/masterteam-components-tabs.mjs"
-    },
     "./select-field": {
       "types": "./select-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-select-field.mjs"
@@ -134,21 +130,29 @@
       "types": "./slider-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-slider-field.mjs"
     },
-    "./textarea-field": {
-      "types": "./textarea-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-textarea-field.mjs"
+    "./table": {
+      "types": "./table/index.d.ts",
+      "default": "./fesm2022/masterteam-components-table.mjs"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/masterteam-components-tabs.mjs"
     },
     "./text-field": {
       "types": "./text-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-text-field.mjs"
     },
-    "./toggle-field": {
-      "types": "./toggle-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-toggle-field.mjs"
+    "./textarea-field": {
+      "types": "./textarea-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-textarea-field.mjs"
     },
     "./toast": {
       "types": "./toast/index.d.ts",
       "default": "./fesm2022/masterteam-components-toast.mjs"
+    },
+    "./toggle-field": {
+      "types": "./toggle-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-toggle-field.mjs"
     }
   }
 }

package/radio-cards/index.d.ts

@@ -5,28 +5,22 @@ import { MTIcon } from '@masterteam/icons';
 interface RadioItem {
     id: string | number;
     name?: string;
-    active?: boolean;
     icon?: MTIcon;
     [key: string]: any;
 }
 declare class RadioCards {
     circle: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    color: _angular_core.InputSignalWithTransform<string, string>;
-    size: _angular_core.InputSignalWithTransform<"medium" | "xs" | "base" | "2xl", "medium" | "small" | "large">;
+    color: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<"small" | "medium" | "large">;
     avatarSize: _angular_core.Signal<"large" | "normal" | "xlarge">;
     options: _angular_core.ModelSignal<RadioItem[]>;
     activeId: _angular_core.ModelSignal<string | number | undefined>;
     selectionChange: _angular_core.OutputEmitterRef<RadioItem>;
     itemTemplate: _angular_core.InputSignal<TemplateRef<any> | null>;
     itemTemplateContent: _angular_core.Signal<TemplateRef<any> | undefined>;
-    /**
-     * A computed signal that generates the dynamic Tailwind CSS classes
-     * for the active state based on the color input.
-     */
-    protected activeColorClasses: _angular_core.Signal<{
-        [x: string]: boolean;
-    }>;
-    constructor();
+    textSizeClass: _angular_core.Signal<"text-xs" | "text-2xl" | "text-base">;
+    classes: _angular_core.Signal<void>;
+    protected activeColorClasses: _angular_core.Signal<string[]>;
     selectItem(item: RadioItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioCards, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioCards, "mt-radio-cards", never, { "circle": { "alias": "circle"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; }, { "options": "optionsChange"; "activeId": "activeIdChange"; "selectionChange": "selectionChange"; }, ["itemTemplateContent"], never, true, never>;

package/table/index.d.ts

@@ -0,0 +1,70 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { MTIcon } from '@masterteam/icons';
+
+/**
+ * Defines the options for a select filter.
+ */
+interface FilterOption {
+    label: string;
+    value: any;
+}
+/**
+ * Configuration for filtering on a specific column.
+ */
+interface FilterConfig {
+    type: 'text' | 'select';
+    label: string;
+    options?: FilterOption[];
+}
+interface ColumnDef {
+    key: string;
+    label: string;
+    type?: 'text' | 'boolean' | 'date' | 'custom';
+    customCellTpl?: TemplateRef<any>;
+    filterConfig?: FilterConfig;
+}
+interface TableAction {
+    icon: MTIcon | undefined;
+    color?: 'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast' | 'help' | 'primary';
+    variant?: 'text' | 'outlined' | undefined;
+    label: string;
+    action: (row: any) => void;
+}
+
+declare class Table {
+    selectionChange: _angular_core.OutputEmitterRef<any[]>;
+    data: _angular_core.InputSignal<any[]>;
+    columns: _angular_core.InputSignal<ColumnDef[]>;
+    actions: _angular_core.InputSignal<TableAction[]>;
+    selectableRows: _angular_core.InputSignal<boolean>;
+    generalSearch: _angular_core.InputSignal<boolean>;
+    showFilters: _angular_core.InputSignal<boolean>;
+    paginatorPosition: _angular_core.InputSignal<"end" | "start" | "center">;
+    pageSize: _angular_core.ModelSignal<number>;
+    currentPage: _angular_core.ModelSignal<number>;
+    first: _angular_core.ModelSignal<number>;
+    filterTerm: _angular_core.ModelSignal<string>;
+    protected selectedRows: _angular_core.WritableSignal<Set<any>>;
+    protected isFilterPanelOpen: _angular_core.WritableSignal<boolean>;
+    protected pendingFilters: _angular_core.WritableSignal<Record<string, any>>;
+    protected appliedFilters: _angular_core.WritableSignal<Record<string, any>>;
+    protected filterableColumns: _angular_core.Signal<ColumnDef[]>;
+    protected activeFilterCount: _angular_core.Signal<number>;
+    protected filteredData: _angular_core.Signal<any[]>;
+    protected totalRecords: _angular_core.Signal<number>;
+    protected paginatedData: _angular_core.Signal<any[]>;
+    protected allSelectedOnPage: _angular_core.Signal<boolean>;
+    toggleFilterPanel(): void;
+    updatePendingFilter(key: string, value: any): void;
+    applyFilters(): void;
+    resetFilters(): void;
+    toggleRow(row: any): void;
+    toggleAllRowsOnPage(): void;
+    getProperty(obj: any, key: string): any;
+    onSearchChange(searchTerm: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Table, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Table, "mt-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "selectableRows": { "alias": "selectableRows"; "required": false; "isSignal": true; }; "generalSearch": { "alias": "generalSearch"; "required": false; "isSignal": true; }; "showFilters": { "alias": "showFilters"; "required": false; "isSignal": true; }; "paginatorPosition": { "alias": "paginatorPosition"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "first": { "alias": "first"; "required": false; "isSignal": true; }; "filterTerm": { "alias": "filterTerm"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "first": "firstChange"; "filterTerm": "filterTermChange"; }, never, never, true, never>;
+}
+
+export { Table };