@maro-tech/table 0.0.1

package/fesm2022/maro-tech-table.mjs

@@ -0,0 +1,933 @@
+import * as i2 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Input, Directive, EventEmitter, Output, Component, signal, ContentChildren } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
+import * as i1$1 from 'lucide-angular';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, LucideAngularModule } from 'lucide-angular';
+import { UiSelectComponent } from '@maro-tech/form';
+import { UiButtonComponent, UiBadgeComponent } from '@maro-tech/core';
+
+class UiTableColumnDirective {
+    columnName;
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: UiTableColumnDirective, isStandalone: true, selector: "[appUiTableColumn]", inputs: { columnName: ["appUiTableColumn", "columnName"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appUiTableColumn]',
+                    standalone: true,
+                }]
+        }], propDecorators: { columnName: [{
+                type: Input,
+                args: ['appUiTableColumn']
+            }] } });
+
+class UiTableActionsCellComponent {
+    actions = [];
+    row;
+    actionClick = new EventEmitter();
+    onActionClick(event, action) {
+        event.stopPropagation();
+        if (action.disabled)
+            return;
+        this.actionClick.emit({ action, row: this.row });
+    }
+    isIconOnlyAction(action) {
+        return !String(action.label || '').trim();
+    }
+    resolveAriaLabel(action) {
+        return String(action.label?.trim() || (action.id === 'edit' ? 'Редагувати' : action.id === 'delete' ? 'Видалити' : action.id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableActionsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableActionsCellComponent, isStandalone: true, selector: "app-ui-table-actions-cell", inputs: { actions: "actions", row: "row" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: `
+    <div class="flex flex-wrap gap-2" (click)="$event.stopPropagation()">
+      @for (action of actions; track action.id) {
+        <ui-button
+          [variant]="action.variant || 'ghost'"
+          [icon]="action.icon || ''"
+          [iconOnly]="isIconOnlyAction(action)"
+          [ariaLabel]="resolveAriaLabel(action)"
+          size="sm"
+          type="button"
+          [disabled]="action.disabled || false"
+          (click)="onActionClick($event, action)"
+        >
+          @if (action.label?.trim()) {
+            {{ action.label }}
+          }
+        </ui-button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableActionsCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ui-table-actions-cell',
+                    standalone: true,
+                    imports: [UiButtonComponent],
+                    template: `
+    <div class="flex flex-wrap gap-2" (click)="$event.stopPropagation()">
+      @for (action of actions; track action.id) {
+        <ui-button
+          [variant]="action.variant || 'ghost'"
+          [icon]="action.icon || ''"
+          [iconOnly]="isIconOnlyAction(action)"
+          [ariaLabel]="resolveAriaLabel(action)"
+          size="sm"
+          type="button"
+          [disabled]="action.disabled || false"
+          (click)="onActionClick($event, action)"
+        >
+          @if (action.label?.trim()) {
+            {{ action.label }}
+          }
+        </ui-button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], row: [{
+                type: Input,
+                args: [{ required: true }]
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class UiTableBadgeCellComponent {
+    value = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableBadgeCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableBadgeCellComponent, isStandalone: true, selector: "app-ui-table-badge-cell", inputs: { value: "value" }, ngImport: i0, template: `
+    @if (value === null || value === undefined || value === '') {
+      —
+    } @else {
+      <ui-badge variant="neutral">
+        {{ value }}
+      </ui-badge>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["variant", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableBadgeCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ui-table-badge-cell',
+                    standalone: true,
+                    imports: [UiBadgeComponent],
+                    template: `
+    @if (value === null || value === undefined || value === '') {
+      —
+    } @else {
+      <ui-badge variant="neutral">
+        {{ value }}
+      </ui-badge>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class UiTableEditableCellComponent {
+    column;
+    value = null;
+    inputType = 'text';
+    valueChange = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableEditableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableEditableCellComponent, isStandalone: true, selector: "app-ui-table-editable-cell", inputs: { column: "column", value: "value", inputType: "inputType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div class="min-w-0" (click)="$event.stopPropagation()">
+      @if (column.editor === 'select') {
+        <forms-select
+          [options]="column.options || []"
+          [includeBlankOption]="column.includeBlankOption ?? true"
+          [blankOptionLabel]="column.blankOptionLabel || 'Оберіть значення'"
+          [searchable]="true"
+          [fullWidth]="true"
+          [ngModel]="value"
+          [ngModelOptions]="{ standalone: true }"
+          (valueChange)="valueChange.emit($event)"
+        ></forms-select>
+      } @else {
+        <input
+          class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none transition focus:border-slate-400"
+          [type]="inputType"
+          [placeholder]="column.placeholder || ''"
+          [ngModel]="value"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="valueChange.emit($event)"
+        />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableEditableCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ui-table-editable-cell',
+                    standalone: true,
+                    imports: [FormsModule, UiSelectComponent],
+                    template: `
+    <div class="min-w-0" (click)="$event.stopPropagation()">
+      @if (column.editor === 'select') {
+        <forms-select
+          [options]="column.options || []"
+          [includeBlankOption]="column.includeBlankOption ?? true"
+          [blankOptionLabel]="column.blankOptionLabel || 'Оберіть значення'"
+          [searchable]="true"
+          [fullWidth]="true"
+          [ngModel]="value"
+          [ngModelOptions]="{ standalone: true }"
+          (valueChange)="valueChange.emit($event)"
+        ></forms-select>
+      } @else {
+        <input
+          class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none transition focus:border-slate-400"
+          [type]="inputType"
+          [placeholder]="column.placeholder || ''"
+          [ngModel]="value"
+          [ngModelOptions]="{ standalone: true }"
+          (ngModelChange)="valueChange.emit($event)"
+        />
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class UiTableImageCellComponent {
+    src = '';
+    alt = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableImageCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableImageCellComponent, isStandalone: true, selector: "app-ui-table-image-cell", inputs: { src: "src", alt: "alt" }, ngImport: i0, template: `
+    @if (src) {
+      <span class="block">
+        <img [src]="src" [alt]="alt" class="h-10 w-10 rounded-lg border border-slate-200 object-cover transition hover:opacity-80" />
+      </span>
+    } @else {
+      <span class="text-slate-400">—</span>
+    }
+
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableImageCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ui-table-image-cell',
+                    standalone: true,
+                    imports: [],
+                    template: `
+    @if (src) {
+      <span class="block">
+        <img [src]="src" [alt]="alt" class="h-10 w-10 rounded-lg border border-slate-200 object-cover transition hover:opacity-80" />
+      </span>
+    } @else {
+      <span class="text-slate-400">—</span>
+    }
+
+  `,
+                }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }] } });
+
+class UiTableTextCellComponent {
+    value = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableTextCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableTextCellComponent, isStandalone: true, selector: "app-ui-table-text-cell", inputs: { value: "value" }, ngImport: i0, template: `
+    <span class="block whitespace-normal break-words">
+      @if (value === null || value === undefined || value === '') {
+        —
+      } @else {
+        {{ value }}
+      }
+    </span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableTextCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ui-table-text-cell',
+                    standalone: true,
+                    template: `
+    <span class="block whitespace-normal break-words">
+      @if (value === null || value === undefined || value === '') {
+        —
+      } @else {
+        {{ value }}
+      }
+    </span>
+  `,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+const getConditionPathValue = (source, pathRaw) => {
+    const path = String(pathRaw || '').trim();
+    if (!path)
+        return undefined;
+    const parts = path.split('.');
+    let current = source;
+    for (const part of parts) {
+        if (current == null || typeof current !== 'object')
+            return undefined;
+        current = current[part];
+    }
+    return current;
+};
+const evaluateCondition = (conditionRaw, context) => {
+    const condition = String(conditionRaw || '').trim();
+    if (!condition)
+        return true;
+    const tokens = [];
+    let index = 0;
+    const pushOperator = (value) => {
+        tokens.push({ type: 'operator', value });
+    };
+    while (index < condition.length) {
+        const char = condition[index];
+        if (/\s/.test(char)) {
+            index += 1;
+            continue;
+        }
+        const nextThree = condition.slice(index, index + 3);
+        const nextTwo = condition.slice(index, index + 2);
+        if (nextThree === '===') {
+            pushOperator('===');
+            index += 3;
+            continue;
+        }
+        if (nextThree === '!==') {
+            pushOperator('!==');
+            index += 3;
+            continue;
+        }
+        if (nextTwo === '==') {
+            pushOperator('==');
+            index += 2;
+            continue;
+        }
+        if (nextTwo === '!=') {
+            pushOperator('!=');
+            index += 2;
+            continue;
+        }
+        if (nextTwo === '&&') {
+            pushOperator('&&');
+            index += 2;
+            continue;
+        }
+        if (nextTwo === '||') {
+            pushOperator('||');
+            index += 2;
+            continue;
+        }
+        if (char === '!' || char === '(' || char === ')') {
+            pushOperator(char);
+            index += 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            const quote = char;
+            index += 1;
+            let value = '';
+            let escaped = false;
+            let closed = false;
+            while (index < condition.length) {
+                const current = condition[index];
+                index += 1;
+                if (escaped) {
+                    value += current;
+                    escaped = false;
+                    continue;
+                }
+                if (current === '\\') {
+                    escaped = true;
+                    continue;
+                }
+                if (current === quote) {
+                    closed = true;
+                    break;
+                }
+                value += current;
+            }
+            if (!closed)
+                return true;
+            tokens.push({ type: 'string', value });
+            continue;
+        }
+        if (/[0-9.-]/.test(char)) {
+            const match = condition.slice(index).match(/^-?\d+(?:\.\d+)?/);
+            if (match) {
+                tokens.push({ type: 'number', value: Number(match[0]) });
+                index += match[0].length;
+                continue;
+            }
+        }
+        if (/[A-Za-z_$]/.test(char)) {
+            const match = condition.slice(index).match(/^[A-Za-z_$][A-Za-z0-9_.$-]*/);
+            if (match) {
+                const raw = match[0];
+                const normalized = raw.toLowerCase();
+                if (normalized === 'true' || normalized === 'false') {
+                    tokens.push({ type: 'boolean', value: normalized === 'true' });
+                }
+                else if (normalized === 'null') {
+                    tokens.push({ type: 'null', value: null });
+                }
+                else {
+                    tokens.push({ type: 'identifier', value: raw });
+                }
+                index += raw.length;
+                continue;
+            }
+        }
+        return true;
+    }
+    let tokenIndex = 0;
+    const peek = () => tokens[tokenIndex];
+    const consume = () => {
+        const token = tokens[tokenIndex];
+        tokenIndex += 1;
+        return token;
+    };
+    const matchOperator = (...values) => {
+        const token = peek();
+        if (token?.type !== 'operator')
+            return false;
+        if (!values.includes(token.value))
+            return false;
+        tokenIndex += 1;
+        return true;
+    };
+    const toBoolean = (value) => {
+        if (typeof value === 'string')
+            return value.trim().length > 0;
+        return Boolean(value);
+    };
+    const getValue = (identifierRaw) => {
+        const identifier = String(identifierRaw || '').trim();
+        if (!identifier)
+            return undefined;
+        if (identifier === 'data')
+            return context;
+        if (identifier.startsWith('data.'))
+            return getConditionPathValue(context, identifier.slice(5));
+        return getConditionPathValue(context, identifier);
+    };
+    const parseExpression = () => parseOr();
+    const parseOr = () => {
+        let left = parseAnd();
+        while (matchOperator('||')) {
+            const right = parseAnd();
+            left = toBoolean(left) || toBoolean(right);
+        }
+        return left;
+    };
+    const parseAnd = () => {
+        let left = parseEquality();
+        while (matchOperator('&&')) {
+            const right = parseEquality();
+            left = toBoolean(left) && toBoolean(right);
+        }
+        return left;
+    };
+    const parseEquality = () => {
+        let left = parseUnary();
+        while (true) {
+            if (matchOperator('==')) {
+                left = left == parseUnary();
+                continue;
+            }
+            if (matchOperator('!=')) {
+                left = left != parseUnary();
+                continue;
+            }
+            if (matchOperator('===')) {
+                left = left === parseUnary();
+                continue;
+            }
+            if (matchOperator('!==')) {
+                left = left !== parseUnary();
+                continue;
+            }
+            break;
+        }
+        return left;
+    };
+    const parseUnary = () => {
+        if (matchOperator('!')) {
+            return !toBoolean(parseUnary());
+        }
+        return parsePrimary();
+    };
+    const parsePrimary = () => {
+        const token = consume();
+        if (!token)
+            return undefined;
+        if (token.type === 'operator' && token.value === '(') {
+            const value = parseExpression();
+            matchOperator(')');
+            return value;
+        }
+        if (token.type === 'identifier')
+            return getValue(token.value);
+        return token.value;
+    };
+    return toBoolean(parseExpression());
+};
+class UiTableComponent {
+    arrowDownIcon = ArrowDown;
+    arrowUpIcon = ArrowUp;
+    arrowUpDownIcon = ArrowUpDown;
+    chevronLeftIcon = ChevronLeft;
+    chevronRightIcon = ChevronRight;
+    router = inject(Router);
+    columnsSignal = signal([], ...(ngDevMode ? [{ debugName: "columnsSignal" }] : /* istanbul ignore next */ []));
+    isLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingSignal" }] : /* istanbul ignore next */ []));
+    _data = {
+        items: [],
+        pagination: { page: 0, pageSize: 10, total: 0 },
+    };
+    dataSignal = signal(this._data, ...(ngDevMode ? [{ debugName: "dataSignal" }] : /* istanbul ignore next */ []));
+    disablePagingSignal = signal(false, ...(ngDevMode ? [{ debugName: "disablePagingSignal" }] : /* istanbul ignore next */ []));
+    rowClickableSignal = signal(true, ...(ngDevMode ? [{ debugName: "rowClickableSignal" }] : /* istanbul ignore next */ []));
+    currentPageIndex = 0;
+    currentPageSize = this._data.pagination.pageSize;
+    currentSortField = '';
+    currentSortDirection = '';
+    get currentSortIcon() {
+        return this.currentSortDirection === 'asc' ? this.arrowUpIcon : this.arrowDownIcon;
+    }
+    pageSizeOptions = [5, 10, 20];
+    pageSizeSelectOptions = this.pageSizeOptions.map((size) => ({
+        label: String(size),
+        value: String(size),
+    }));
+    columnTemplates;
+    set columns(value) {
+        this.columnsSignal.set(value ?? []);
+    }
+    set isLoading(value) {
+        this.isLoadingSignal.set(!!value);
+    }
+    set data(value) {
+        const normalized = value ?? {
+            items: [],
+            pagination: { page: 0, pageSize: this.currentPageSize, total: 0 },
+        };
+        this._data = normalized;
+        this.currentPageIndex = normalized.pagination.page ?? this.currentPageIndex;
+        this.currentPageSize = normalized.pagination.pageSize ?? this.currentPageSize;
+        this.dataSignal.set(normalized);
+        this.ensurePageIndexInRange();
+    }
+    get data() {
+        return this._data;
+    }
+    set disablePaging(value) {
+        this.disablePagingSignal.set(!!value);
+    }
+    get disablePaging() {
+        return this.disablePagingSignal();
+    }
+    set rowClickable(value) {
+        this.rowClickableSignal.set(!!value);
+    }
+    get rowClickable() {
+        return this.rowClickableSignal();
+    }
+    imageResolver = (value) => {
+        const raw = String(value ?? '').trim();
+        if (!raw)
+            return '';
+        if (raw.startsWith('http://') || raw.startsWith('https://') || raw.startsWith('/'))
+            return raw;
+        return `/api/files/${encodeURIComponent(raw)}/preview?scale=25`;
+    };
+    pageChange = new EventEmitter();
+    rowClick = new EventEmitter();
+    actionClick = new EventEmitter();
+    cellChange = new EventEmitter();
+    get totalPages() {
+        const total = this.dataSignal().pagination.total ?? this.dataSignal().items.length ?? 0;
+        const perPage = this.currentPageSize || 1;
+        return Math.max(1, Math.ceil(total / perPage));
+    }
+    get totalCount() {
+        return this.dataSignal().pagination.total ?? this.dataSignal().items.length ?? 0;
+    }
+    get visibleColumnCount() {
+        return Math.max(1, this.columnsSignal().length + (this.hasAnyRowActions() ? 1 : 0));
+    }
+    get startItemIndex() {
+        if (this.totalCount === 0) {
+            return 0;
+        }
+        return this.currentPageIndex * this.currentPageSize + 1;
+    }
+    get endItemIndex() {
+        if (this.totalCount === 0) {
+            return 0;
+        }
+        return Math.min((this.currentPageIndex + 1) * this.currentPageSize, this.totalCount);
+    }
+    get visiblePageNumbers() {
+        const pages = [];
+        const maxButtons = 5;
+        const total = this.totalPages;
+        if (total <= maxButtons) {
+            for (let i = 0; i < total; i += 1) {
+                pages.push(i);
+            }
+            return pages;
+        }
+        let start = Math.max(0, this.currentPageIndex - Math.floor(maxButtons / 2));
+        const maxStart = total - maxButtons;
+        if (start > maxStart) {
+            start = maxStart;
+        }
+        for (let i = 0; i < maxButtons; i += 1) {
+            pages.push(start + i);
+        }
+        return pages;
+    }
+    toggleSort(column) {
+        if (!column?.key || column.sortable === false) {
+            return;
+        }
+        if (this.currentSortField === column.key) {
+            if (this.currentSortDirection === 'asc') {
+                this.currentSortDirection = 'desc';
+            }
+            else if (this.currentSortDirection === 'desc') {
+                this.currentSortDirection = '';
+                this.currentSortField = '';
+            }
+            else {
+                this.currentSortDirection = 'asc';
+            }
+        }
+        else {
+            this.currentSortField = column.key;
+            this.currentSortDirection = 'asc';
+        }
+        this.currentPageIndex = 0;
+        this.emitPageChange();
+    }
+    changePage(index) {
+        const target = Math.max(0, Math.min(this.totalPages - 1, index));
+        if (target === this.currentPageIndex) {
+            return;
+        }
+        this.currentPageIndex = target;
+        this.emitPageChange();
+    }
+    onPageSizeChange(pageSize) {
+        const numericSize = Number(pageSize);
+        if (!numericSize || numericSize === this.currentPageSize) {
+            return;
+        }
+        this.currentPageSize = numericSize;
+        this.currentPageIndex = 0;
+        this.ensurePageIndexInRange();
+        this.emitPageChange();
+    }
+    processRowClick(rowData) {
+        this.rowClick.emit(rowData);
+    }
+    processActionClick(action, rowData) {
+        if (action.disabled)
+            return;
+        this.actionClick.emit({ action, row: rowData });
+    }
+    processCellChange(column, rowData, value) {
+        const currentValue = this.getCellValue(rowData, column.bindKey || column.key);
+        if (this.normalizeCellValue(currentValue) === this.normalizeCellValue(value)) {
+            return;
+        }
+        this.cellChange.emit({ column, row: rowData, value });
+    }
+    hasAnyRowActions() {
+        return this.dataSignal().items.some((row) => this.getRowActions(row).length > 0);
+    }
+    getRowActions(row) {
+        const raw = row['actions'];
+        if (!Array.isArray(raw)) {
+            return [];
+        }
+        return raw
+            .filter((item) => !!item && typeof item === 'object' && typeof item.id === 'string')
+            .filter((item) => evaluateCondition(item.condition, row))
+            .map((item) => ({
+            id: item.id,
+            label: typeof item.label === 'string' ? item.label : item.id,
+            variant: item.variant,
+            icon: typeof item.icon === 'string' ? item.icon : undefined,
+            type: item.type,
+            component: item.component,
+            template: typeof item.template === 'string' ? item.template : undefined,
+            disabled: !!item.disabled,
+            api: typeof item.api === 'string' ? item.api : undefined,
+            formId: typeof item.formId === 'string' ? item.formId : undefined,
+            title: typeof item.title === 'string' ? item.title : undefined,
+            text: typeof item.text === 'string' ? item.text : undefined,
+            submit: typeof item.submit === 'string' || typeof item.submit === 'boolean' ? item.submit : undefined,
+            danger: typeof item.danger === 'boolean' ? item.danger : undefined,
+            method: item.method,
+            payload: item.payload && typeof item.payload === 'object' && !Array.isArray(item.payload) ? item.payload : undefined,
+        }));
+    }
+    getTemplateForColumn(column) {
+        return this.columnTemplates?.find((template) => template.columnName === column)?.template;
+    }
+    trackTableRow(index) {
+        return index;
+    }
+    trackPageNumber(_, pageIndex) {
+        return pageIndex;
+    }
+    getCellValue(row, column) {
+        return row[column];
+    }
+    isEditableColumn(row, column) {
+        const context = row;
+        return evaluateCondition(column.editableCondition, context);
+    }
+    resolveDisplayValue(row, column) {
+        const rawValue = this.getCellValue(row, column.bindKey || column.key);
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return '—';
+        }
+        if (column.editor === 'select') {
+            const value = String(rawValue).trim();
+            const option = (column.options || []).find((item) => String(item.value ?? '').trim() === value);
+            return String(option?.label || rawValue).trim() || '—';
+        }
+        return String(rawValue);
+    }
+    resolveLink(row, column) {
+        const source = row;
+        const linkConfig = column.link;
+        const template = typeof linkConfig === 'string'
+            ? linkConfig.trim()
+            : String(linkConfig?.values[this.resolveLinkValue(source, linkConfig.by)] || '').trim();
+        if (!template)
+            return '';
+        let hasMissingValue = false;
+        const link = template.replace(/\{([a-zA-Z0-9_.]+)\}/g, (_match, key) => {
+            const value = key.split('.').reduce((current, part) => {
+                if (current == null || typeof current !== 'object')
+                    return undefined;
+                return current[part];
+            }, source);
+            if (value == null || value === '') {
+                hasMissingValue = true;
+                return '';
+            }
+            return encodeURIComponent(String(value));
+        });
+        return hasMissingValue ? '' : link;
+    }
+    resolveLinkTree(row, column) {
+        const link = this.resolveLink(row, column);
+        return link ? this.router.parseUrl(link) : null;
+    }
+    resolveLinkValue(source, path) {
+        const value = path.split('.').reduce((current, part) => {
+            if (current == null || typeof current !== 'object')
+                return undefined;
+            return current[part];
+        }, source);
+        return value == null ? '' : String(value).trim();
+    }
+    resolveEditableValue(row, column) {
+        const value = this.getCellValue(row, column.bindKey || column.key);
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        if (column.editor === 'number' || column.inputType === 'number') {
+            const numeric = Number(value);
+            return Number.isFinite(numeric) ? numeric : null;
+        }
+        return String(value);
+    }
+    resolveEditableInputType(column) {
+        return column.editor === 'number' || column.inputType === 'number' ? 'number' : 'text';
+    }
+    normalizeCellValue(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        return String(value).trim();
+    }
+    resolveColumnWidth(column) {
+        if (column.width == null || column.width === '') {
+            return '500px';
+        }
+        if (typeof column.width === 'number') {
+            return `${Math.max(1, Math.round(column.width))}px`;
+        }
+        return String(column.width).trim() || '500px';
+    }
+    resolveImageSrc(value, row) {
+        return this.imageResolver(value, row);
+    }
+    emitPageChange() {
+        this.pageChange.emit({
+            pageIndex: this.currentPageIndex,
+            pageSize: this.currentPageSize,
+            active: this.currentSortField,
+            direction: this.currentSortDirection,
+        });
+    }
+    ensurePageIndexInRange() {
+        if (this.currentPageIndex >= this.totalPages) {
+            this.currentPageIndex = Math.max(0, this.totalPages - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiTableComponent, isStandalone: true, selector: "app-ui-table", inputs: { columns: "columns", isLoading: "isLoading", data: "data", disablePaging: "disablePaging", rowClickable: "rowClickable", imageResolver: "imageResolver" }, outputs: { pageChange: "pageChange", rowClick: "rowClick", actionClick: "actionClick", cellChange: "cellChange" }, queries: [{ propertyName: "columnTemplates", predicate: UiTableColumnDirective }], ngImport: i0, template: "<div class=\"rounded-2xl border border-slate-200 bg-white shadow-sm\">\n  <div class=\"w-full overflow-x-auto rounded-2xl\">\n    <div class=\"inline-block min-w-full align-middle\">\n      <table class=\"min-w-full table-fixed border-separate border-spacing-0 text-sm\">\n        <thead class=\"bg-slate-50 text-xs uppercase tracking-wider text-slate-500\">\n          <tr>\n            @for (column of columnsSignal(); track column.key) {\n              <th\n                class=\"sticky top-0 z-10 whitespace-nowrap border-b border-slate-200 bg-slate-50 px-5 py-3 text-left font-semibold\"\n                [style.width]=\"resolveColumnWidth(column)\"\n              >\n                <button type=\"button\" class=\"group flex items-center gap-2\" (click)=\"toggleSort(column)\">\n                  <span>\n                    {{ column.labelKey ? column.labelKey : column.key }}\n                  </span>\n\n                  @if (column.sortable !== false) {\n                    @if (currentSortField === column.key) {\n                      <lucide-icon [img]=\"currentSortIcon\" class=\"text-[0.65rem]\"></lucide-icon>\n                    } @else {\n                      <lucide-icon [img]=\"arrowUpDownIcon\" class=\"text-[0.65rem] text-slate-300 group-hover:text-slate-500\"></lucide-icon>\n                    }\n                  }\n                </button>\n              </th>\n            }\n            @if (hasAnyRowActions()) {\n              <th class=\"sticky top-0 z-10 whitespace-nowrap border-b border-slate-200 bg-slate-50 px-5 py-3 text-left font-semibold\">\n                \u0414\u0456\u0457\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-slate-100\">\n          @if (isLoadingSignal()) {\n            <tr>\n              <td [attr.colspan]=\"visibleColumnCount\" class=\"py-10 text-center\">\n                <div class=\"inline-block\" role=\"status\">\n                  <svg aria-hidden=\"true\" class=\"h-8 w-8 animate-spin fill-slate-800 text-slate-200\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\" fill=\"currentColor\"></path>\n                    <path d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\" fill=\"currentFill\"></path>\n                  </svg>\n                </div>\n              </td>\n            </tr>\n          }\n\n          @if (!isLoadingSignal() && dataSignal().items.length === 0) {\n            <tr>\n              <td [attr.colspan]=\"visibleColumnCount\" class=\"py-10 text-center text-sm text-slate-500\">\n                \u041D\u0435\u043C\u0430\u0454 \u0434\u0430\u043D\u0438\u0445\n              </td>\n            </tr>\n          }\n\n          @for (row of dataSignal().items; track trackTableRow($index)) {\n            <tr\n              class=\"transition-colors duration-150 hover:bg-slate-50\"\n              [class.cursor-pointer]=\"rowClickableSignal()\"\n              (click)=\"processRowClick(row)\"\n            >\n              @for (column of columnsSignal(); track column.key) {\n                <td\n                  class=\"max-w-0 whitespace-normal break-words px-5 py-4 align-middle text-slate-800\"\n                  [style.width]=\"resolveColumnWidth(column)\"\n                >\n                  @let template = getTemplateForColumn(column.key);\n                  @let displayValue = resolveDisplayValue(row, column);\n                  @let editableValue = resolveEditableValue(row, column);\n\n                  @if (template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: row, element: row }\" />\n                  } @else {\n                    @if (column.editable && isEditableColumn(row, column)) {\n                      <app-ui-table-editable-cell\n                        [column]=\"column\"\n                        [value]=\"editableValue\"\n                        [inputType]=\"resolveEditableInputType(column)\"\n                        (valueChange)=\"processCellChange(column, row, $event)\"\n                      />\n                    } @else {\n                      @if (column.link && resolveLink(row, column); as link) {\n                        <a\n                          [routerLink]=\"resolveLinkTree(row, column)\"\n                          class=\"text-blue-700 hover:underline\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          {{ displayValue }}\n                        </a>\n                      } @else {\n                        @switch (column.type) {\n                          @case ('image') {\n                            <app-ui-table-image-cell\n                              [src]=\"resolveImageSrc(getCellValue(row, column.key))\"\n                              [alt]=\"column.labelKey ? column.labelKey : column.key\"\n                            />\n                          }\n                          @case ('badge') {\n                            <app-ui-table-badge-cell [value]=\"displayValue\" />\n                          }\n                          @default {\n                            <app-ui-table-text-cell [value]=\"displayValue\" />\n                          }\n                        }\n                      }\n                    }\n                  }\n                </td>\n              }\n              @if (hasAnyRowActions()) {\n                <td class=\"whitespace-nowrap px-5 py-4 align-middle\">\n                  <app-ui-table-actions-cell\n                    [actions]=\"getRowActions(row)\"\n                    [row]=\"row\"\n                    (actionClick)=\"processActionClick($event.action, $event.row)\"\n                  />\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  @if (!disablePagingSignal()) {\n    <div class=\"flex flex-col gap-4 border-t border-slate-200 px-6 py-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"flex items-center gap-3 text-xs uppercase tracking-wider text-slate-500\">\n        <span>\u0420\u044F\u0434\u043A\u0456\u0432 \u043D\u0430 \u0441\u0442\u043E\u0440\u0456\u043D\u0446\u0456</span>\n        <forms-select\n          [options]=\"pageSizeSelectOptions\"\n          [ngModel]=\"'' + currentPageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [searchable]=\"false\"\n          [fullWidth]=\"false\"\n        ></forms-select>\n\n        <span class=\"text-[0.65rem] tracking-[0.2em] text-slate-400\">\n          {{ startItemIndex }}-{{ endItemIndex }} / {{ totalCount }}\n        </span>\n      </div>\n\n      <div class=\"flex items-center gap-4 text-sm font-medium\">\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-1.5 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40\"\n          (click)=\"changePage(currentPageIndex - 1)\"\n          [disabled]=\"currentPageIndex === 0\"\n        >\n          <lucide-icon [img]=\"chevronLeftIcon\" class=\"text-xs\"></lucide-icon>\n        </button>\n\n        <span class=\"text-slate-600\">{{ currentPageIndex + 1 }} / {{ totalPages }}</span>\n\n        <div class=\"hidden items-center gap-2 md:flex\">\n          @for (pageIndex of visiblePageNumbers; track trackPageNumber($index, pageIndex)) {\n            <button\n              type=\"button\"\n              class=\"inline-flex h-8 min-w-8 items-center justify-center rounded-lg border px-2 text-xs font-semibold transition\"\n              [class.border-slate-900]=\"pageIndex === currentPageIndex\"\n              [class.bg-slate-900]=\"pageIndex === currentPageIndex\"\n              [class.text-white]=\"pageIndex === currentPageIndex\"\n              [class.border-slate-200]=\"pageIndex !== currentPageIndex\"\n              [class.text-slate-700]=\"pageIndex !== currentPageIndex\"\n              [class.hover:border-slate-400]=\"pageIndex !== currentPageIndex\"\n              (click)=\"changePage(pageIndex)\"\n            >\n              {{ pageIndex + 1 }}\n            </button>\n          }\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-1.5 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40\"\n          (click)=\"changePage(currentPageIndex + 1)\"\n          [disabled]=\"currentPageIndex >= totalPages - 1\"\n        >\n          <lucide-icon [img]=\"chevronRightIcon\" class=\"text-xs\"></lucide-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }, { 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: UiTableActionsCellComponent, selector: "app-ui-table-actions-cell", inputs: ["actions", "row"], outputs: ["actionClick"] }, { kind: "component", type: UiTableBadgeCellComponent, selector: "app-ui-table-badge-cell", inputs: ["value"] }, { kind: "component", type: UiTableEditableCellComponent, selector: "app-ui-table-editable-cell", inputs: ["column", "value", "inputType"], outputs: ["valueChange"] }, { kind: "component", type: UiTableImageCellComponent, selector: "app-ui-table-image-cell", inputs: ["src", "alt"] }, { kind: "component", type: UiTableTextCellComponent, selector: "app-ui-table-text-cell", inputs: ["value"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ui-table', standalone: true, imports: [
+                        LucideAngularModule,
+                        CommonModule,
+                        NgTemplateOutlet,
+                        UiSelectComponent,
+                        FormsModule,
+                        RouterModule,
+                        UiTableActionsCellComponent,
+                        UiTableBadgeCellComponent,
+                        UiTableEditableCellComponent,
+                        UiTableImageCellComponent,
+                        UiTableTextCellComponent,
+                    ], template: "<div class=\"rounded-2xl border border-slate-200 bg-white shadow-sm\">\n  <div class=\"w-full overflow-x-auto rounded-2xl\">\n    <div class=\"inline-block min-w-full align-middle\">\n      <table class=\"min-w-full table-fixed border-separate border-spacing-0 text-sm\">\n        <thead class=\"bg-slate-50 text-xs uppercase tracking-wider text-slate-500\">\n          <tr>\n            @for (column of columnsSignal(); track column.key) {\n              <th\n                class=\"sticky top-0 z-10 whitespace-nowrap border-b border-slate-200 bg-slate-50 px-5 py-3 text-left font-semibold\"\n                [style.width]=\"resolveColumnWidth(column)\"\n              >\n                <button type=\"button\" class=\"group flex items-center gap-2\" (click)=\"toggleSort(column)\">\n                  <span>\n                    {{ column.labelKey ? column.labelKey : column.key }}\n                  </span>\n\n                  @if (column.sortable !== false) {\n                    @if (currentSortField === column.key) {\n                      <lucide-icon [img]=\"currentSortIcon\" class=\"text-[0.65rem]\"></lucide-icon>\n                    } @else {\n                      <lucide-icon [img]=\"arrowUpDownIcon\" class=\"text-[0.65rem] text-slate-300 group-hover:text-slate-500\"></lucide-icon>\n                    }\n                  }\n                </button>\n              </th>\n            }\n            @if (hasAnyRowActions()) {\n              <th class=\"sticky top-0 z-10 whitespace-nowrap border-b border-slate-200 bg-slate-50 px-5 py-3 text-left font-semibold\">\n                \u0414\u0456\u0457\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <tbody class=\"divide-y divide-slate-100\">\n          @if (isLoadingSignal()) {\n            <tr>\n              <td [attr.colspan]=\"visibleColumnCount\" class=\"py-10 text-center\">\n                <div class=\"inline-block\" role=\"status\">\n                  <svg aria-hidden=\"true\" class=\"h-8 w-8 animate-spin fill-slate-800 text-slate-200\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\" fill=\"currentColor\"></path>\n                    <path d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\" fill=\"currentFill\"></path>\n                  </svg>\n                </div>\n              </td>\n            </tr>\n          }\n\n          @if (!isLoadingSignal() && dataSignal().items.length === 0) {\n            <tr>\n              <td [attr.colspan]=\"visibleColumnCount\" class=\"py-10 text-center text-sm text-slate-500\">\n                \u041D\u0435\u043C\u0430\u0454 \u0434\u0430\u043D\u0438\u0445\n              </td>\n            </tr>\n          }\n\n          @for (row of dataSignal().items; track trackTableRow($index)) {\n            <tr\n              class=\"transition-colors duration-150 hover:bg-slate-50\"\n              [class.cursor-pointer]=\"rowClickableSignal()\"\n              (click)=\"processRowClick(row)\"\n            >\n              @for (column of columnsSignal(); track column.key) {\n                <td\n                  class=\"max-w-0 whitespace-normal break-words px-5 py-4 align-middle text-slate-800\"\n                  [style.width]=\"resolveColumnWidth(column)\"\n                >\n                  @let template = getTemplateForColumn(column.key);\n                  @let displayValue = resolveDisplayValue(row, column);\n                  @let editableValue = resolveEditableValue(row, column);\n\n                  @if (template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: row, element: row }\" />\n                  } @else {\n                    @if (column.editable && isEditableColumn(row, column)) {\n                      <app-ui-table-editable-cell\n                        [column]=\"column\"\n                        [value]=\"editableValue\"\n                        [inputType]=\"resolveEditableInputType(column)\"\n                        (valueChange)=\"processCellChange(column, row, $event)\"\n                      />\n                    } @else {\n                      @if (column.link && resolveLink(row, column); as link) {\n                        <a\n                          [routerLink]=\"resolveLinkTree(row, column)\"\n                          class=\"text-blue-700 hover:underline\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          {{ displayValue }}\n                        </a>\n                      } @else {\n                        @switch (column.type) {\n                          @case ('image') {\n                            <app-ui-table-image-cell\n                              [src]=\"resolveImageSrc(getCellValue(row, column.key))\"\n                              [alt]=\"column.labelKey ? column.labelKey : column.key\"\n                            />\n                          }\n                          @case ('badge') {\n                            <app-ui-table-badge-cell [value]=\"displayValue\" />\n                          }\n                          @default {\n                            <app-ui-table-text-cell [value]=\"displayValue\" />\n                          }\n                        }\n                      }\n                    }\n                  }\n                </td>\n              }\n              @if (hasAnyRowActions()) {\n                <td class=\"whitespace-nowrap px-5 py-4 align-middle\">\n                  <app-ui-table-actions-cell\n                    [actions]=\"getRowActions(row)\"\n                    [row]=\"row\"\n                    (actionClick)=\"processActionClick($event.action, $event.row)\"\n                  />\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  @if (!disablePagingSignal()) {\n    <div class=\"flex flex-col gap-4 border-t border-slate-200 px-6 py-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"flex items-center gap-3 text-xs uppercase tracking-wider text-slate-500\">\n        <span>\u0420\u044F\u0434\u043A\u0456\u0432 \u043D\u0430 \u0441\u0442\u043E\u0440\u0456\u043D\u0446\u0456</span>\n        <forms-select\n          [options]=\"pageSizeSelectOptions\"\n          [ngModel]=\"'' + currentPageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [searchable]=\"false\"\n          [fullWidth]=\"false\"\n        ></forms-select>\n\n        <span class=\"text-[0.65rem] tracking-[0.2em] text-slate-400\">\n          {{ startItemIndex }}-{{ endItemIndex }} / {{ totalCount }}\n        </span>\n      </div>\n\n      <div class=\"flex items-center gap-4 text-sm font-medium\">\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-1.5 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40\"\n          (click)=\"changePage(currentPageIndex - 1)\"\n          [disabled]=\"currentPageIndex === 0\"\n        >\n          <lucide-icon [img]=\"chevronLeftIcon\" class=\"text-xs\"></lucide-icon>\n        </button>\n\n        <span class=\"text-slate-600\">{{ currentPageIndex + 1 }} / {{ totalPages }}</span>\n\n        <div class=\"hidden items-center gap-2 md:flex\">\n          @for (pageIndex of visiblePageNumbers; track trackPageNumber($index, pageIndex)) {\n            <button\n              type=\"button\"\n              class=\"inline-flex h-8 min-w-8 items-center justify-center rounded-lg border px-2 text-xs font-semibold transition\"\n              [class.border-slate-900]=\"pageIndex === currentPageIndex\"\n              [class.bg-slate-900]=\"pageIndex === currentPageIndex\"\n              [class.text-white]=\"pageIndex === currentPageIndex\"\n              [class.border-slate-200]=\"pageIndex !== currentPageIndex\"\n              [class.text-slate-700]=\"pageIndex !== currentPageIndex\"\n              [class.hover:border-slate-400]=\"pageIndex !== currentPageIndex\"\n              (click)=\"changePage(pageIndex)\"\n            >\n              {{ pageIndex + 1 }}\n            </button>\n          }\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-1.5 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-40\"\n          (click)=\"changePage(currentPageIndex + 1)\"\n          [disabled]=\"currentPageIndex >= totalPages - 1\"\n        >\n          <lucide-icon [img]=\"chevronRightIcon\" class=\"text-xs\"></lucide-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { columnTemplates: [{
+                type: ContentChildren,
+                args: [UiTableColumnDirective]
+            }], columns: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], disablePaging: [{
+                type: Input
+            }], rowClickable: [{
+                type: Input
+            }], imageResolver: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }], cellChange: [{
+                type: Output
+            }] } });
+
+class UiPaginatorComponent {
+    chevronLeftIcon = ChevronLeft;
+    chevronRightIcon = ChevronRight;
+    pageIndex = 0;
+    pageSize = 10;
+    total = 0;
+    pageSizeOptions = [5, 10, 20];
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    get totalPages() {
+        const perPage = this.pageSize || 1;
+        return Math.max(1, Math.ceil((this.total || 0) / perPage));
+    }
+    get startItemIndex() {
+        if (!this.total)
+            return 0;
+        return this.pageIndex * this.pageSize + 1;
+    }
+    get endItemIndex() {
+        if (!this.total)
+            return 0;
+        return Math.min((this.pageIndex + 1) * this.pageSize, this.total);
+    }
+    get selectOptions() {
+        return this.pageSizeOptions.map((size) => ({ label: String(size), value: String(size) }));
+    }
+    get paginationItems() {
+        const total = this.totalPages;
+        if (total <= 7) {
+            return Array.from({ length: total }, (_value, index) => index);
+        }
+        const items = [0];
+        const start = Math.max(1, this.pageIndex - 1);
+        const end = Math.min(total - 2, this.pageIndex + 1);
+        if (start > 1) {
+            items.push('ellipsis');
+        }
+        for (let page = start; page <= end; page++) {
+            items.push(page);
+        }
+        if (end < total - 2) {
+            items.push('ellipsis');
+        }
+        items.push(total - 1);
+        return items;
+    }
+    onPageSizeModelChange(value) {
+        const numeric = Number(value);
+        if (!numeric || numeric === this.pageSize)
+            return;
+        this.pageSizeChange.emit(numeric);
+    }
+    changePage(nextIndex) {
+        const clamped = Math.max(0, Math.min(this.totalPages - 1, nextIndex));
+        if (clamped === this.pageIndex)
+            return;
+        this.pageChange.emit(clamped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiPaginatorComponent, isStandalone: true, selector: "app-ui-paginator", inputs: { pageIndex: "pageIndex", pageSize: "pageSize", total: "total", pageSizeOptions: "pageSizeOptions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4\">\n  <div class=\"flex shrink-0 items-center gap-3 text-xs uppercase tracking-wider text-slate-500\">\n    <forms-select\n      [options]=\"selectOptions\"\n      [ngModel]=\"'' + pageSize\"\n      (ngModelChange)=\"onPageSizeModelChange($event)\"\n      [ngModelOptions]=\"{ standalone: true }\"\n      [searchable]=\"false\"\n      [fullWidth]=\"false\"\n      [triggerClass]=\"'h-9 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm hover:border-slate-300 focus:ring-slate-200'\"\n      [panelClass]=\"'rounded-xl border-slate-200 shadow-lg'\"\n    ></forms-select>\n  </div>\n\n  <nav class=\"flex min-w-0 flex-1 items-center justify-end gap-x-1 overflow-x-auto\" aria-label=\"Pagination\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 w-9 items-center justify-center gap-x-2 rounded-md border border-transparent text-sm text-slate-900 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n      (click)=\"changePage(pageIndex - 1)\"\n      [disabled]=\"pageIndex === 0\"\n      aria-label=\"\u041D\u0430\u0437\u0430\u0434\"\n    >\n      <lucide-icon [img]=\"chevronLeftIcon\" class=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\"></lucide-icon>\n      <span class=\"sr-only\">\u041D\u0430\u0437\u0430\u0434</span>\n    </button>\n\n    <div class=\"flex min-w-max items-center gap-x-1\">\n      @for (item of paginationItems; track $index) {\n        @if (item === 'ellipsis') {\n          <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-xs text-slate-500\" aria-hidden=\"true\">\u2022\u2022\u2022</span>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-3 text-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            [class.border-slate-200]=\"item !== pageIndex\"\n            [class.border-slate-900]=\"item === pageIndex\"\n            [class.text-slate-900]=\"item !== pageIndex\"\n            [class.text-white]=\"item === pageIndex\"\n            [class.bg-slate-900]=\"item === pageIndex\"\n            [class.hover:bg-slate-100]=\"item !== pageIndex\"\n            (click)=\"changePage(item)\"\n            [attr.aria-current]=\"item === pageIndex ? 'page' : null\"\n          >\n            {{ item + 1 }}\n          </button>\n        }\n      }\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 w-9 items-center justify-center gap-x-2 rounded-md border border-transparent text-sm text-slate-900 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n      (click)=\"changePage(pageIndex + 1)\"\n      [disabled]=\"pageIndex >= totalPages - 1\"\n      aria-label=\"\u0414\u0430\u043B\u0456\"\n    >\n      <span class=\"sr-only\">\u0414\u0430\u043B\u0456</span>\n      <lucide-icon [img]=\"chevronRightIcon\" class=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\"></lucide-icon>\n    </button>\n  </nav>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: UiSelectComponent, selector: "forms-select", inputs: ["label", "placeholder", "name", "data", "required", "fullWidth", "disabled", "multiple", "includeBlankOption", "blankOptionLabel", "emptyStateLabel", "searchable", "remoteSearch", "searchPlaceholder", "options", "error", "hint", "triggerClass", "panelClass"], outputs: ["valueChange", "searchChange"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ui-paginator', standalone: true, imports: [CommonModule, FormsModule, UiSelectComponent, LucideAngularModule], template: "<div class=\"flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4\">\n  <div class=\"flex shrink-0 items-center gap-3 text-xs uppercase tracking-wider text-slate-500\">\n    <forms-select\n      [options]=\"selectOptions\"\n      [ngModel]=\"'' + pageSize\"\n      (ngModelChange)=\"onPageSizeModelChange($event)\"\n      [ngModelOptions]=\"{ standalone: true }\"\n      [searchable]=\"false\"\n      [fullWidth]=\"false\"\n      [triggerClass]=\"'h-9 rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm hover:border-slate-300 focus:ring-slate-200'\"\n      [panelClass]=\"'rounded-xl border-slate-200 shadow-lg'\"\n    ></forms-select>\n  </div>\n\n  <nav class=\"flex min-w-0 flex-1 items-center justify-end gap-x-1 overflow-x-auto\" aria-label=\"Pagination\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 w-9 items-center justify-center gap-x-2 rounded-md border border-transparent text-sm text-slate-900 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n      (click)=\"changePage(pageIndex - 1)\"\n      [disabled]=\"pageIndex === 0\"\n      aria-label=\"\u041D\u0430\u0437\u0430\u0434\"\n    >\n      <lucide-icon [img]=\"chevronLeftIcon\" class=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\"></lucide-icon>\n      <span class=\"sr-only\">\u041D\u0430\u0437\u0430\u0434</span>\n    </button>\n\n    <div class=\"flex min-w-max items-center gap-x-1\">\n      @for (item of paginationItems; track $index) {\n        @if (item === 'ellipsis') {\n          <span class=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-xs text-slate-500\" aria-hidden=\"true\">\u2022\u2022\u2022</span>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-3 text-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            [class.border-slate-200]=\"item !== pageIndex\"\n            [class.border-slate-900]=\"item === pageIndex\"\n            [class.text-slate-900]=\"item !== pageIndex\"\n            [class.text-white]=\"item === pageIndex\"\n            [class.bg-slate-900]=\"item === pageIndex\"\n            [class.hover:bg-slate-100]=\"item !== pageIndex\"\n            (click)=\"changePage(item)\"\n            [attr.aria-current]=\"item === pageIndex ? 'page' : null\"\n          >\n            {{ item + 1 }}\n          </button>\n        }\n      }\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-9 w-9 items-center justify-center gap-x-2 rounded-md border border-transparent text-sm text-slate-900 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n      (click)=\"changePage(pageIndex + 1)\"\n      [disabled]=\"pageIndex >= totalPages - 1\"\n      aria-label=\"\u0414\u0430\u043B\u0456\"\n    >\n      <span class=\"sr-only\">\u0414\u0430\u043B\u0456</span>\n      <lucide-icon [img]=\"chevronRightIcon\" class=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\"></lucide-icon>\n    </button>\n  </nav>\n</div>\n" }]
+        }], propDecorators: { pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiPaginatorComponent, UiTableActionsCellComponent, UiTableBadgeCellComponent, UiTableColumnDirective, UiTableComponent, UiTableEditableCellComponent, UiTableImageCellComponent, UiTableTextCellComponent };
+//# sourceMappingURL=maro-tech-table.mjs.map