@masterteam/components 0.0.19 → 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-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.19",
+  "version": "0.0.20",
   "publishConfig": {
     "directory": ".",
     "linkDirectory": false,
@@ -42,9 +42,9 @@
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/masterteam-components-avatar.mjs"
     },
-    "./avatar-text": {
-      "types": "./avatar-text/index.d.ts",
-      "default": "./fesm2022/masterteam-components-avatar-text.mjs"
+    "./breadcrumb": {
+      "types": "./breadcrumb/index.d.ts",
+      "default": "./fesm2022/masterteam-components-breadcrumb.mjs"
     },
     "./button": {
       "types": "./button/index.d.ts",
@@ -66,25 +66,25 @@
       "types": "./chip/index.d.ts",
       "default": "./fesm2022/masterteam-components-chip.mjs"
     },
-    "./breadcrumb": {
-      "types": "./breadcrumb/index.d.ts",
-      "default": "./fesm2022/masterteam-components-breadcrumb.mjs"
+    "./avatar-text": {
+      "types": "./avatar-text/index.d.ts",
+      "default": "./fesm2022/masterteam-components-avatar-text.mjs"
     },
-    "./color-picker-field": {
-      "types": "./color-picker-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-color-picker-field.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"
     },
-    "./editor-field": {
-      "types": "./editor-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-editor-field.mjs"
+    "./field-validation": {
+      "types": "./field-validation/index.d.ts",
+      "default": "./fesm2022/masterteam-components-field-validation.mjs"
     },
-    "./list": {
-      "types": "./list/index.d.ts",
-      "default": "./fesm2022/masterteam-components-list.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",
@@ -94,9 +94,9 @@
       "types": "./formula-builder/index.d.ts",
       "default": "./fesm2022/masterteam-components-formula-builder.mjs"
     },
-    "./field-validation": {
-      "types": "./field-validation/index.d.ts",
-      "default": "./fesm2022/masterteam-components-field-validation.mjs"
+    "./list": {
+      "types": "./list/index.d.ts",
+      "default": "./fesm2022/masterteam-components-list.mjs"
     },
     "./multi-select-field": {
       "types": "./multi-select-field/index.d.ts",
@@ -106,6 +106,10 @@
       "types": "./number-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-number-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",
       "default": "./fesm2022/masterteam-components-paginator.mjs"
@@ -118,14 +122,18 @@
       "types": "./radio-cards-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-radio-cards-field.mjs"
     },
-    "./radio-button-field": {
-      "types": "./radio-button-field/index.d.ts",
-      "default": "./fesm2022/masterteam-components-radio-button-field.mjs"
-    },
     "./select-field": {
       "types": "./select-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-select-field.mjs"
     },
+    "./slider-field": {
+      "types": "./slider-field/index.d.ts",
+      "default": "./fesm2022/masterteam-components-slider-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"
@@ -134,10 +142,6 @@
       "types": "./text-field/index.d.ts",
       "default": "./fesm2022/masterteam-components-text-field.mjs"
     },
-    "./slider-field": {
-      "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"

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 };