@koalarx/ui 15.0.0 → 20.0.2

package/fesm2022/koalarx-ui-shared-components-datatable.mjs

@@ -0,0 +1,272 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, booleanAttribute, model, computed } from '@angular/core';
+import { Tooltip } from '@koalarx/ui/shared/directives';
+import { AppConfig } from '@koalarx/ui/core/config';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SideWindow } from '@koalarx/ui/shared/components/side-window';
+
+class OrderedColumnState {
+    static current;
+}
+
+class SortHeaderColumn {
+    orderBy = input.required();
+    style = input('');
+    defaultDirection = input();
+    sortable = output();
+    elOrderedColumn = viewChild('orderedColumn');
+    direction = signal(null);
+    constructor() {
+        effect(() => {
+            const defaultDirection = this.defaultDirection();
+            if (defaultDirection) {
+                this.direction.set(defaultDirection);
+                OrderedColumnState.current = this;
+                this.toogleColumnStateOrder('set');
+            }
+        });
+    }
+    sort() {
+        this.direction.update((current) => {
+            if (OrderedColumnState.current &&
+                OrderedColumnState.current.orderBy !== this.orderBy) {
+                OrderedColumnState.current.direction.set(null);
+                OrderedColumnState.current.toogleColumnStateOrder('unset');
+            }
+            OrderedColumnState.current = this;
+            let direction;
+            switch (current) {
+                case 'asc':
+                    direction = 'desc';
+                    break;
+                case 'desc':
+                default:
+                    direction = 'asc';
+            }
+            this.toogleColumnStateOrder('set');
+            this.sortable.emit({
+                orderBy: this.orderBy(),
+                direction,
+            });
+            return direction;
+        });
+    }
+    async toogleColumnStateOrder(state) {
+        const columnElement = this.elOrderedColumn()?.nativeElement.parentElement;
+        if (!columnElement) {
+            return;
+        }
+        if (state === 'set') {
+            columnElement.classList.add('ordered-column');
+        }
+        else {
+            columnElement.classList.remove('ordered-column');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortHeaderColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SortHeaderColumn, isStandalone: true, selector: "kl-sort-header-column", inputs: { orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, defaultDirection: { classPropertyName: "defaultDirection", publicName: "defaultDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortable: "sortable" }, viewQueries: [{ propertyName: "elOrderedColumn", first: true, predicate: ["orderedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortHeaderColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-sort-header-column', template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class SortedItem {
+    elementRef = inject((ElementRef));
+    klSortedItem = input.required();
+    sortedPropName = input.required();
+    constructor() {
+        effect(() => {
+            const isSorted = this.klSortedItem()?.orderBy === this.sortedPropName();
+            this.elementRef.nativeElement.classList.toggle('sorted', isSorted);
+            if (isSorted) {
+                this.elementRef.nativeElement.setAttribute('aria-sort', 'ascending');
+            }
+            else {
+                this.elementRef.nativeElement.setAttribute('aria-sort', 'descending');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortedItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SortedItem, isStandalone: true, selector: "td[klSortedItem]", inputs: { klSortedItem: { classPropertyName: "klSortedItem", publicName: "klSortedItem", isSignal: true, isRequired: true, transformFunction: null }, sortedPropName: { classPropertyName: "sortedPropName", publicName: "sortedPropName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SortedItem, decorators: [{
+            type: Directive,
+            args: [{ selector: 'td[klSortedItem]' }]
+        }], ctorParameters: () => [] });
+
+class DatatableFilter {
+    _payload = signal({});
+    _filters = signal([]);
+    constructor() {
+        effect(() => {
+            const filters = this._filters();
+            filters.forEach((filter) => {
+                this._payload.update((current) => {
+                    return {
+                        ...current,
+                        [filter.propName]: filter.value,
+                    };
+                });
+            });
+        });
+    }
+    get payload() {
+        return this._payload.asReadonly();
+    }
+    get filters() {
+        return this._filters.asReadonly();
+    }
+    setFilters(filters) {
+        this._filters.set(filters);
+    }
+    removeFilter(propName) {
+        this._filters.update((current) => {
+            return current.filter((filter) => filter.propName !== propName);
+        });
+    }
+    clearFilters() {
+        this._filters.set([]);
+        this._payload.set({});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DatatableFilter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class FilterFactory {
+    _filter = [];
+    get filter() {
+        return [...this._filter];
+    }
+    setFilters(filter, templateNameFn) {
+        const filterData = filter;
+        Object.keys(filterData).forEach((propName) => {
+            const value = filterData[propName];
+            if (value === null || value === undefined || value === '') {
+                return;
+            }
+            const templateValue = templateNameFn(propName, value);
+            this.addFilter({ templateValue, propName, value });
+        });
+        return this._filter;
+    }
+    addFilter(filter) {
+        this._filter.push(filter);
+    }
+    toPayload(data) {
+        return data.reduce((acc, curr) => {
+            acc[curr.propName] = curr.value;
+            return acc;
+        }, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FilterFactory, decorators: [{
+            type: Injectable
+        }] });
+
+class Filter {
+    translations = AppConfig.translation.datatable;
+    datatableFilter = inject(DatatableFilter);
+    filter = input([]);
+    payload = output();
+    addFilter = output();
+    constructor() {
+        effect(() => this.datatableFilter.setFilters(this.filter()));
+        effect(() => this.payload.emit(this.datatableFilter.payload()));
+    }
+    add() {
+        this.addFilter.emit(this.datatableFilter.filters());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Filter, isStandalone: true, selector: "kl-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { payload: "payload", addFilter: "addFilter" }, providers: [DatatableFilter], ngImport: i0, template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"p-2 pr-8 pl-8 border-b border-gray-200 dark:border-gray-700 w-full flex items-center gap-3 text-gray-500 dark:text-gray-300\">\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.clearFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"datatableFilter.clearFilters()\">\n      <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n    </button>\n\n    <div class=\"flex items-center gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-ghost text-xs\">\n          <span>{{item.templateValue}}</span>\n          <button class=\"hover:cursor-pointer\" (click)=\"datatableFilter.removeFilter(item.propName)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      }\n    </div>\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.addFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"add()\">\n      <i class=\"fa-solid fa-circle-plus\"></i>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Filter, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-filter', providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"p-2 pr-8 pl-8 border-b border-gray-200 dark:border-gray-700 w-full flex items-center gap-3 text-gray-500 dark:text-gray-300\">\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.clearFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"datatableFilter.clearFilters()\">\n      <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n    </button>\n\n    <div class=\"flex items-center gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-ghost text-xs\">\n          <span>{{item.templateValue}}</span>\n          <button class=\"hover:cursor-pointer\" (click)=\"datatableFilter.removeFilter(item.propName)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      }\n    </div>\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.addFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"add()\">\n      <i class=\"fa-solid fa-circle-plus\"></i>\n    </button>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class Datatable {
+    sideWindow = inject(SideWindow);
+    translations = AppConfig.translation.datatable;
+    currentPage = input.required();
+    totalItems = input.required();
+    totalItemsOnPage = input.required();
+    currentPageSize = input.required();
+    isLoading = input.required();
+    colspan = input.required();
+    componentFilter = input();
+    withPaginator = input(false, { transform: booleanAttribute });
+    filter = signal([]);
+    pageSize = model(0);
+    pageSizes = [10, 20, 30, 50, 100];
+    skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    skeletonCols = computed(() => {
+        return Array.from({ length: this.colspan() }, (_, i) => i);
+    });
+    paginator = computed(() => {
+        const isLoading = this.isLoading();
+        const paginator = [];
+        if (!isLoading) {
+            const firstPage = 1;
+            const previousPage = this.currentPage() - 1;
+            const currentPage = this.currentPage();
+            const nextPage = this.currentPage() + 1;
+            const lastPage = Math.ceil(this.totalItems() / this.currentPageSize());
+            if (firstPage < currentPage) {
+                paginator.push(firstPage);
+            }
+            if (previousPage > firstPage) {
+                paginator.push(previousPage);
+            }
+            paginator.push(currentPage);
+            if (nextPage < lastPage) {
+                paginator.push(nextPage);
+            }
+            if (lastPage > currentPage) {
+                paginator.push(lastPage);
+            }
+        }
+        return paginator;
+    });
+    pageChange = output();
+    pageSizeChange = output();
+    filterChange = output();
+    reloadList = output();
+    constructor() {
+        effect(() => this.pageSize.set(this.currentPageSize()));
+        effect(() => this.pageSizeChange.emit(this.pageSize()));
+        effect(() => this.pageChange.emit(this.currentPage()));
+    }
+    openFilter(data) {
+        const component = this.componentFilter();
+        if (!component) {
+            return;
+        }
+        this.sideWindow.open(component, {
+            data,
+            afterClosed: {
+                trigger: [],
+                callback: (filters) => this.filter.set(filters),
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, totalItemsOnPage: { classPropertyName: "totalItemsOnPage", publicName: "totalItemsOnPage", isSignal: true, isRequired: true, transformFunction: null }, currentPageSize: { classPropertyName: "currentPageSize", publicName: "currentPageSize", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: true, transformFunction: null }, componentFilter: { classPropertyName: "componentFilter", publicName: "componentFilter", isSignal: true, isRequired: false, transformFunction: null }, withPaginator: { classPropertyName: "withPaginator", publicName: "withPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", filterChange: "filterChange", reloadList: "reloadList" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"pr-8 pl-1 pt-0 pb-0 border-b border-gray-200 dark:border-gray-700 w-full flex items-center justify-between z-10\">\n    <div class=\"flex items-center gap-2 p-2 opacity-80\">\n      <button class=\"btn btn-circle btn-ghost btn-xs text-sm\"\n        [tooltip]=\"translations.reloadListTooltip\"\n        tooltipPosition=\"right\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right\"></i>\n      </button>\n\n      <ng-content select=\"[menu]\" />\n\n      <span class=\"relative top-[-0.10rem] pl-1 opacity-60\">|</span>\n\n      @if (componentFilter()) {\n        <button class=\"btn btn-ghost btn-xs text-sm\"\n          (click)=\"openFilter()\">\n          <i class=\"fa-solid fa-filter\"></i>\n          {{translations.btnFilterLabel}}\n        </button>\n      }\n    </div>\n\n    @if (!withPaginator()) {\n      <div class=\"flex items-center justify-end gap-3 text-sm\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <kl-filter\n    [filter]=\"filter()\"\n    (addFilter)=\"openFilter($event)\"\n    (payload)=\"filterChange.emit($event)\"\n  />\n\n  <div class=\"overflow-x-auto h-full\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (isLoading()) {\n          @for (row of skeletonRows(); track $index) {\n            <tr>\n              @for (col of skeletonCols(); track $index) {\n                <td><span class=\"block skeleton w-full h-4\"></span></td>\n              }\n            </tr>\n          }\n        } @else {\n          <ng-content select=\"[body]\" />\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 border-t border-gray-200 dark:border-gray-700 w-full flex items-center justify-between\">\n      <div class=\"flex items-center justify-end gap-3 text-xs\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-sm p-0 pl-2 pr-0 w-15 h-[1.5rem]\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n\n      <div class=\"join flex items-center\">\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[0] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() - 1)\">\n          \u00AB\n        </button>\n\n        @for (page of paginator(); track $index) {\n          <button class=\"join-item btn btn-sm\"\n            [class.btn-disabled]=\"page === currentPage()\"\n            (click)=\"pageChange.emit(page)\">\n            {{page}}\n          </button>\n        }\n\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[paginator().length - 1] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() + 1)\">\n          \u00BB\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: Filter, selector: "kl-filter", inputs: ["filter"], outputs: ["payload", "addFilter"] }, { kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Datatable, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-datatable', imports: [FormsModule, Filter, Tooltip], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"pr-8 pl-1 pt-0 pb-0 border-b border-gray-200 dark:border-gray-700 w-full flex items-center justify-between z-10\">\n    <div class=\"flex items-center gap-2 p-2 opacity-80\">\n      <button class=\"btn btn-circle btn-ghost btn-xs text-sm\"\n        [tooltip]=\"translations.reloadListTooltip\"\n        tooltipPosition=\"right\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right\"></i>\n      </button>\n\n      <ng-content select=\"[menu]\" />\n\n      <span class=\"relative top-[-0.10rem] pl-1 opacity-60\">|</span>\n\n      @if (componentFilter()) {\n        <button class=\"btn btn-ghost btn-xs text-sm\"\n          (click)=\"openFilter()\">\n          <i class=\"fa-solid fa-filter\"></i>\n          {{translations.btnFilterLabel}}\n        </button>\n      }\n    </div>\n\n    @if (!withPaginator()) {\n      <div class=\"flex items-center justify-end gap-3 text-sm\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <kl-filter\n    [filter]=\"filter()\"\n    (addFilter)=\"openFilter($event)\"\n    (payload)=\"filterChange.emit($event)\"\n  />\n\n  <div class=\"overflow-x-auto h-full\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (isLoading()) {\n          @for (row of skeletonRows(); track $index) {\n            <tr>\n              @for (col of skeletonCols(); track $index) {\n                <td><span class=\"block skeleton w-full h-4\"></span></td>\n              }\n            </tr>\n          }\n        } @else {\n          <ng-content select=\"[body]\" />\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 border-t border-gray-200 dark:border-gray-700 w-full flex items-center justify-between\">\n      <div class=\"flex items-center justify-end gap-3 text-xs\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-sm p-0 pl-2 pr-0 w-15 h-[1.5rem]\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n\n      <div class=\"join flex items-center\">\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[0] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() - 1)\">\n          \u00AB\n        </button>\n\n        @for (page of paginator(); track $index) {\n          <button class=\"join-item btn btn-sm\"\n            [class.btn-disabled]=\"page === currentPage()\"\n            (click)=\"pageChange.emit(page)\">\n            {{page}}\n          </button>\n        }\n\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[paginator().length - 1] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() + 1)\">\n          \u00BB\n        </button>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Datatable, DatatableFilter, Filter, FilterFactory, OrderedColumnState, SortHeaderColumn, SortedItem };
+//# sourceMappingURL=koalarx-ui-shared-components-datatable.mjs.map

package/fesm2022/koalarx-ui-shared-components-datatable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-datatable.mjs","sources":["../../projects/koala-ui/shared/components/datatable/sort-column/ordered-column.state.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.ts","../../projects/koala-ui/shared/components/datatable/sort-column/sort-header-column.html","../../projects/koala-ui/shared/components/datatable/sort-column/sorted-item.ts","../../projects/koala-ui/shared/components/datatable/filter/datatable-filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter-factory.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.ts","../../projects/koala-ui/shared/components/datatable/filter/filter.html","../../projects/koala-ui/shared/components/datatable/datatable.ts","../../projects/koala-ui/shared/components/datatable/datatable.html","../../projects/koala-ui/shared/components/datatable/koalarx-ui-shared-components-datatable.ts"],"sourcesContent":["import { SortHeaderColumn } from './sort-header-column';\r\n\r\nexport class OrderedColumnState {\r\n  static current?: SortHeaderColumn;\r\n}\r\n","import {\n  Component,\n  effect,\n  ElementRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport {\n  QueryPaginationDirection,\n  SortFilterType,\n} from '@koalarx/ui/core/models';\nimport { OrderedColumnState } from './ordered-column.state';\n\n@Component({\n  selector: 'kl-sort-header-column',\n  templateUrl: './sort-header-column.html',\n})\nexport class SortHeaderColumn {\n  orderBy = input.required<string>();\n  style = input('');\n  defaultDirection = input<QueryPaginationDirection>();\n  sortable = output<SortFilterType>();\n  elOrderedColumn =\n    viewChild<ElementRef<HTMLTableCellElement>>('orderedColumn');\n  direction = signal<QueryPaginationDirection | null>(null);\n\n  constructor() {\n    effect(() => {\n      const defaultDirection = this.defaultDirection();\n\n      if (defaultDirection) {\n        this.direction.set(defaultDirection);\n        OrderedColumnState.current = this;\n        this.toogleColumnStateOrder('set');\n      }\n    });\n  }\n\n  sort() {\n    this.direction.update((current) => {\n      if (\n        OrderedColumnState.current &&\n        OrderedColumnState.current.orderBy !== this.orderBy\n      ) {\n        OrderedColumnState.current.direction.set(null);\n        OrderedColumnState.current.toogleColumnStateOrder('unset');\n      }\n\n      OrderedColumnState.current = this;\n\n      let direction: QueryPaginationDirection;\n\n      switch (current) {\n        case 'asc':\n          direction = 'desc';\n          break;\n        case 'desc':\n        default:\n          direction = 'asc';\n      }\n\n      this.toogleColumnStateOrder('set');\n\n      this.sortable.emit({\n        orderBy: this.orderBy(),\n        direction,\n      });\n\n      return direction;\n    });\n  }\n\n  async toogleColumnStateOrder(state: 'set' | 'unset') {\n    const columnElement = this.elOrderedColumn()?.nativeElement.parentElement;\n\n    if (!columnElement) {\n      return;\n    }\n\n    if (state === 'set') {\n      columnElement.classList.add('ordered-column');\n    } else {\n      columnElement.classList.remove('ordered-column');\n    }\n  }\n}\n","<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n","import { Directive, effect, ElementRef, inject, input } from '@angular/core';\nimport { SortFilterType } from '@koalarx/ui/core/models';\n\n@Directive({ selector: 'td[klSortedItem]' })\nexport class SortedItem {\n  private readonly elementRef = inject<ElementRef<HTMLTableCellElement>>(\n    ElementRef<HTMLTableCellElement>\n  );\n\n  klSortedItem = input.required<SortFilterType | null>();\n  sortedPropName = input.required<string>();\n\n  constructor() {\n    effect(() => {\n      const isSorted = this.klSortedItem()?.orderBy === this.sortedPropName();\n\n      this.elementRef.nativeElement.classList.toggle('sorted', isSorted);\n\n      if (isSorted) {\n        this.elementRef.nativeElement.setAttribute('aria-sort', 'ascending');\n      } else {\n        this.elementRef.nativeElement.setAttribute('aria-sort', 'descending');\n      }\n    });\n  }\n}\n","import { effect, Injectable, signal } from '@angular/core';\n\nexport interface FilterData {\n  templateValue: string;\n  propName: string;\n  value: any;\n}\n\n@Injectable()\nexport class DatatableFilter {\n  private readonly _payload = signal<Record<string, any>>({});\n  private readonly _filters = signal<FilterData[]>([]);\n\n  constructor() {\n    effect(() => {\n      const filters = this._filters();\n\n      filters.forEach((filter) => {\n        this._payload.update((current) => {\n          return {\n            ...current,\n            [filter.propName]: filter.value,\n          };\n        });\n      });\n    });\n  }\n\n  get payload() {\n    return this._payload.asReadonly();\n  }\n\n  get filters() {\n    return this._filters.asReadonly();\n  }\n\n  setFilters(filters: FilterData[]) {\n    this._filters.set(filters);\n  }\n\n  removeFilter(propName: string) {\n    this._filters.update((current) => {\n      return current.filter((filter) => filter.propName !== propName);\n    });\n  }\n\n  clearFilters() {\n    this._filters.set([]);\n    this._payload.set({});\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { FilterData } from './datatable-filter';\n\n@Injectable()\nexport class FilterFactory {\n  private readonly _filter: FilterData[] = [];\n\n  get filter() {\n    return [...this._filter];\n  }\n\n  setFilters<T>(\n    filter: T,\n    templateNameFn: (propName: keyof typeof filter, value: any) => string\n  ) {\n    const filterData = filter as Record<string, any>;\n\n    Object.keys(filterData).forEach((propName) => {\n      const value = filterData[propName];\n\n      if (value === null || value === undefined || value === '') {\n        return;\n      }\n\n      const templateValue = templateNameFn(propName as any, value);\n      this.addFilter({ templateValue, propName, value });\n    });\n\n    return this._filter;\n  }\n\n  addFilter(filter: FilterData) {\n    this._filter.push(filter);\n  }\n\n  toPayload(data: FilterData[]): Record<string, any> {\n    return data.reduce((acc, curr) => {\n      acc[curr.propName] = curr.value;\n      return acc;\n    }, {} as Record<string, any>);\n  }\n}\n","import { Component, effect, inject, input, output } from '@angular/core';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { DatatableFilter, FilterData } from './datatable-filter';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\n@Component({\n  selector: 'kl-filter',\n  templateUrl: './filter.html',\n  providers: [DatatableFilter],\n  imports: [Tooltip],\n})\nexport class Filter {\n  readonly translations = AppConfig.translation.datatable;\n\n  datatableFilter = inject(DatatableFilter);\n  filter = input<FilterData[]>([]);\n  payload = output<Record<string, any>>();\n  addFilter = output<FilterData[]>();\n\n  constructor() {\n    effect(() => this.datatableFilter.setFilters(this.filter()));\n    effect(() => this.payload.emit(this.datatableFilter.payload()));\n  }\n\n  add() {\n    this.addFilter.emit(this.datatableFilter.filters());\n  }\n}\n","@if (datatableFilter.filters().length > 0) {\n  <div class=\"p-2 pr-8 pl-8 border-b border-gray-200 dark:border-gray-700 w-full flex items-center gap-3 text-gray-500 dark:text-gray-300\">\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.clearFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"datatableFilter.clearFilters()\">\n      <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n    </button>\n\n    <div class=\"flex items-center gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-ghost text-xs\">\n          <span>{{item.templateValue}}</span>\n          <button class=\"hover:cursor-pointer\" (click)=\"datatableFilter.removeFilter(item.propName)\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      }\n    </div>\n\n    <button class=\"hover:cursor-pointer\"\n      [tooltip]=\"translations.addFilterTooltip\"\n      tooltipPosition=\"right\"\n      (click)=\"add()\">\n      <i class=\"fa-solid fa-circle-plus\"></i>\n    </button>\n  </div>\n}\n","import {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  Type,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { SideWindow } from '@koalarx/ui/shared/components/side-window';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { FilterData } from './filter/datatable-filter';\nimport { Filter } from './filter/filter';\n\n@Component({\n  selector: 'kl-datatable',\n  templateUrl: './datatable.html',\n  imports: [FormsModule, Filter, Tooltip],\n})\nexport class Datatable {\n  private readonly sideWindow = inject(SideWindow);\n\n  readonly translations = AppConfig.translation.datatable;\n\n  currentPage = input.required<number>();\n  totalItems = input.required<number>();\n  totalItemsOnPage = input.required<number>();\n  currentPageSize = input.required<number>();\n  isLoading = input.required();\n  colspan = input.required<number>();\n  componentFilter = input<Type<any>>();\n  withPaginator = input(false, { transform: booleanAttribute });\n  filter = signal<FilterData[]>([]);\n  pageSize = model<number>(0);\n  pageSizes = [10, 20, 30, 50, 100];\n\n  skeletonRows = computed(() => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);\n  skeletonCols = computed(() => {\n    return Array.from({ length: this.colspan() }, (_, i) => i);\n  });\n\n  paginator = computed(() => {\n    const isLoading = this.isLoading();\n    const paginator: number[] = [];\n\n    if (!isLoading) {\n      const firstPage = 1;\n      const previousPage = this.currentPage() - 1;\n      const currentPage = this.currentPage();\n      const nextPage = this.currentPage() + 1;\n      const lastPage = Math.ceil(this.totalItems() / this.currentPageSize());\n\n      if (firstPage < currentPage) {\n        paginator.push(firstPage);\n      }\n\n      if (previousPage > firstPage) {\n        paginator.push(previousPage);\n      }\n\n      paginator.push(currentPage);\n\n      if (nextPage < lastPage) {\n        paginator.push(nextPage);\n      }\n\n      if (lastPage > currentPage) {\n        paginator.push(lastPage);\n      }\n    }\n\n    return paginator;\n  });\n\n  pageChange = output<number>();\n  pageSizeChange = output<number>();\n  filterChange = output<Record<string, any>>();\n  reloadList = output<void>();\n\n  constructor() {\n    effect(() => this.pageSize.set(this.currentPageSize()));\n    effect(() => this.pageSizeChange.emit(this.pageSize()));\n    effect(() => this.pageChange.emit(this.currentPage()));\n  }\n\n  openFilter(data?: FilterData[]) {\n    const component = this.componentFilter();\n\n    if (!component) {\n      return;\n    }\n\n    this.sideWindow.open(component, {\n      data,\n      afterClosed: {\n        trigger: [],\n        callback: (filters: FilterData[]) => this.filter.set(filters),\n      },\n    });\n  }\n}\n","<div class=\"flex flex-col h-full\">\n  <div class=\"pr-8 pl-1 pt-0 pb-0 border-b border-gray-200 dark:border-gray-700 w-full flex items-center justify-between z-10\">\n    <div class=\"flex items-center gap-2 p-2 opacity-80\">\n      <button class=\"btn btn-circle btn-ghost btn-xs text-sm\"\n        [tooltip]=\"translations.reloadListTooltip\"\n        tooltipPosition=\"right\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right\"></i>\n      </button>\n\n      <ng-content select=\"[menu]\" />\n\n      <span class=\"relative top-[-0.10rem] pl-1 opacity-60\">|</span>\n\n      @if (componentFilter()) {\n        <button class=\"btn btn-ghost btn-xs text-sm\"\n          (click)=\"openFilter()\">\n          <i class=\"fa-solid fa-filter\"></i>\n          {{translations.btnFilterLabel}}\n        </button>\n      }\n    </div>\n\n    @if (!withPaginator()) {\n      <div class=\"flex items-center justify-end gap-3 text-sm\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <kl-filter\n    [filter]=\"filter()\"\n    (addFilter)=\"openFilter($event)\"\n    (payload)=\"filterChange.emit($event)\"\n  />\n\n  <div class=\"overflow-x-auto h-full\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (isLoading()) {\n          @for (row of skeletonRows(); track $index) {\n            <tr>\n              @for (col of skeletonCols(); track $index) {\n                <td><span class=\"block skeleton w-full h-4\"></span></td>\n              }\n            </tr>\n          }\n        } @else {\n          <ng-content select=\"[body]\" />\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 border-t border-gray-200 dark:border-gray-700 w-full flex items-center justify-between\">\n      <div class=\"flex items-center justify-end gap-3 text-xs\">\n        <span class=\"flex items-center justify-end gap-1 opacity-60\">\n          <span>{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-sm p-0 pl-2 pr-0 w-15 h-[1.5rem]\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n\n      <div class=\"join flex items-center\">\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[0] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() - 1)\">\n          «\n        </button>\n\n        @for (page of paginator(); track $index) {\n          <button class=\"join-item btn btn-sm\"\n            [class.btn-disabled]=\"page === currentPage()\"\n            (click)=\"pageChange.emit(page)\">\n            {{page}}\n          </button>\n        }\n\n        <button class=\"join-item btn btn-sm\"\n          [disabled]=\"paginator()[paginator().length - 1] === currentPage()\"\n          (click)=\"pageChange.emit(currentPage() + 1)\">\n          »\n        </button>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koalarx-ui-shared-components-dialog.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { viewChild, effect, Component, InjectionToken, inject, ApplicationRef, EnvironmentInjector, createComponent, Injector, Injectable } from '@angular/core';
+import { randomString } from '@koalarx/utils/KlString';
+
+class DialogContent {
+    dialogElement = viewChild('dialog');
+    constructor() {
+        effect(() => {
+            const dialog = this.dialogElement();
+            if (dialog) {
+                dialog.nativeElement.showModal();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: DialogContent, isStandalone: true, selector: "kl-dialog-content", viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog #dialog class=\"modal\">\n  <div class=\"modal-box border border-neutral-700 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-dialog-content', template: "<dialog #dialog class=\"modal\">\n  <div class=\"modal-box border border-neutral-700 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n" }]
+        }], ctorParameters: () => [] });
+
+const DIALOG_CONFIG = new InjectionToken('DialogConfig');
+const DIALOG_DATA = new InjectionToken('DialogData');
+const DIALOG_APP_REF = new InjectionToken('DialogAppRef');
+const DIALOG_AFTER_CLOSE_TRIGGER = new InjectionToken('DialogAfterCloseTrigger');
+class Dialog {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    generateElementId() {
+        let elementId;
+        do {
+            elementId = randomString(50, {
+                numbers: false,
+                lowercase: true,
+                uppercase: true,
+                specialCharacters: false,
+            });
+        } while (document.getElementById(elementId));
+        return elementId;
+    }
+    open(component, config) {
+        const main = document.querySelector('kl-dialog-container .dialog-container');
+        if (main) {
+            const elementId = this.generateElementId();
+            const container = main.appendChild(document.createElement('div'));
+            container.id = elementId;
+            const componentRef = createComponent(component, {
+                environmentInjector: this.injector,
+                hostElement: container,
+                elementInjector: Injector.create({
+                    providers: [
+                        { provide: DIALOG_CONFIG, useValue: config },
+                        { provide: DIALOG_APP_REF, useValue: this.appRef },
+                        {
+                            provide: DIALOG_REF_TOKEN,
+                            useValue: () => componentRef,
+                        },
+                        { provide: DIALOG_DATA, useValue: config?.data },
+                        {
+                            provide: DIALOG_AFTER_CLOSE_TRIGGER,
+                            useValue: (trigger) => {
+                                if (config?.afterClosed &&
+                                    (config.afterClosed.trigger === trigger ||
+                                        typeof trigger === 'object')) {
+                                    config.afterClosed.callback(trigger);
+                                }
+                            },
+                        },
+                        {
+                            provide: DialogRef,
+                            deps: [
+                                DIALOG_CONFIG,
+                                DIALOG_APP_REF,
+                                DIALOG_REF_TOKEN,
+                                DIALOG_AFTER_CLOSE_TRIGGER,
+                                DIALOG_DATA,
+                            ],
+                        },
+                    ],
+                }),
+            });
+            this.appRef.attachView(componentRef.hostView);
+            componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const DIALOG_REF_TOKEN = new InjectionToken('DialogRefToken');
+class DialogRef {
+    appRef = inject(DIALOG_APP_REF);
+    componentRef = inject(DIALOG_REF_TOKEN);
+    afterCloseTrigger = inject(DIALOG_AFTER_CLOSE_TRIGGER);
+    dismiss(afterCloseTrigger) {
+        this.componentRef().destroy();
+        this.appRef.detachView(this.componentRef().hostView);
+        if (afterCloseTrigger) {
+            this.afterCloseTrigger(afterCloseTrigger);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DIALOG_AFTER_CLOSE_TRIGGER, DIALOG_APP_REF, DIALOG_CONFIG, DIALOG_DATA, DIALOG_REF_TOKEN, Dialog, DialogContent, DialogRef };
+//# sourceMappingURL=koalarx-ui-shared-components-dialog.mjs.map

package/fesm2022/koalarx-ui-shared-components-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-dialog.mjs","sources":["../../projects/koala-ui/shared/components/dialog/dialog-content.ts","../../projects/koala-ui/shared/components/dialog/dialog-content.html","../../projects/koala-ui/shared/components/dialog/dialog.ts","../../projects/koala-ui/shared/components/dialog/dialog-ref.ts","../../projects/koala-ui/shared/components/dialog/koalarx-ui-shared-components-dialog.ts"],"sourcesContent":["import { Component, effect, ElementRef, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'kl-dialog-content',\n  templateUrl: './dialog-content.html',\n})\nexport class DialogContent {\n  dialogElement = viewChild<ElementRef<HTMLDialogElement>>('dialog');\n\n  constructor() {\n    effect(() => {\n      const dialog = this.dialogElement();\n\n      if (dialog) {\n        dialog.nativeElement.showModal();\n      }\n    });\n  }\n}\n","<dialog #dialog class=\"modal\">\n  <div class=\"modal-box border border-neutral-700 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n","import {\n  ApplicationRef,\n  createComponent,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  Type,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { DIALOG_REF_TOKEN, DialogRef } from './dialog-ref';\n\nexport type DialogAfterCloseTrigger = string | Record<string, any>;\nexport type DialogAfterCloseTriggerFn = (\n  trigger: DialogAfterCloseTrigger\n) => void;\nexport const DIALOG_CONFIG = new InjectionToken('DialogConfig');\nexport const DIALOG_DATA = new InjectionToken('DialogData');\nexport const DIALOG_APP_REF = new InjectionToken('DialogAppRef');\nexport const DIALOG_AFTER_CLOSE_TRIGGER =\n  new InjectionToken<DialogAfterCloseTriggerFn>('DialogAfterCloseTrigger');\n\nexport interface DialogConfig {\n  data?: any;\n  afterClosed?: {\n    trigger: DialogAfterCloseTrigger;\n    callback: (trigger: any) => void;\n  };\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Dialog {\n  private readonly appRef = inject(ApplicationRef);\n  private readonly injector = inject(EnvironmentInjector);\n\n  private generateElementId() {\n    let elementId: string;\n\n    do {\n      elementId = randomString(50, {\n        numbers: false,\n        lowercase: true,\n        uppercase: true,\n        specialCharacters: false,\n      });\n    } while (document.getElementById(elementId));\n\n    return elementId;\n  }\n\n  open(component: Type<any>, config?: DialogConfig) {\n    const main = document.querySelector<HTMLElement>(\n      'kl-dialog-container .dialog-container'\n    );\n\n    if (main) {\n      const elementId = this.generateElementId();\n      const container = main.appendChild(document.createElement('div'));\n\n      container.id = elementId;\n\n      const componentRef = createComponent(component, {\n        environmentInjector: this.injector,\n        hostElement: container,\n        elementInjector: Injector.create({\n          providers: [\n            { provide: DIALOG_CONFIG, useValue: config },\n            { provide: DIALOG_APP_REF, useValue: this.appRef },\n            {\n              provide: DIALOG_REF_TOKEN,\n              useValue: () => componentRef,\n            },\n            { provide: DIALOG_DATA, useValue: config?.data },\n            {\n              provide: DIALOG_AFTER_CLOSE_TRIGGER,\n              useValue: (trigger: DialogAfterCloseTrigger) => {\n                if (\n                  config?.afterClosed &&\n                  (config.afterClosed.trigger === trigger ||\n                    typeof trigger === 'object')\n                ) {\n                  config.afterClosed.callback(trigger);\n                }\n              },\n            },\n            {\n              provide: DialogRef,\n              deps: [\n                DIALOG_CONFIG,\n                DIALOG_APP_REF,\n                DIALOG_REF_TOKEN,\n                DIALOG_AFTER_CLOSE_TRIGGER,\n                DIALOG_DATA,\n              ],\n            },\n          ],\n        }),\n      });\n\n      this.appRef.attachView(componentRef.hostView);\n\n      componentRef.changeDetectorRef.detectChanges();\n    }\n  }\n}\n","import {\n  ApplicationRef,\n  ComponentRef,\n  inject,\n  Injectable,\n  InjectionToken,\n  Type,\n} from '@angular/core';\nimport {\n  DIALOG_AFTER_CLOSE_TRIGGER,\n  DIALOG_APP_REF,\n  DialogAfterCloseTrigger,\n  DialogAfterCloseTriggerFn,\n} from './dialog';\n\nexport const DIALOG_REF_TOKEN = new InjectionToken('DialogRefToken');\n\n@Injectable()\nexport class DialogRef {\n  private readonly appRef = inject<ApplicationRef>(DIALOG_APP_REF);\n  private readonly componentRef =\n    inject<() => ComponentRef<Type<any>>>(DIALOG_REF_TOKEN);\n  private readonly afterCloseTrigger = inject<DialogAfterCloseTriggerFn>(\n    DIALOG_AFTER_CLOSE_TRIGGER\n  );\n\n  dismiss(afterCloseTrigger?: DialogAfterCloseTrigger) {\n    this.componentRef().destroy();\n    this.appRef.detachView(this.componentRef().hostView);\n\n    if (afterCloseTrigger) {\n      this.afterCloseTrigger(afterCloseTrigger);\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koalarx-ui-shared-components-dropdown.mjs

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+
+class Dropdown {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: Dropdown, isStandalone: true, selector: "kl-dropdown", ngImport: i0, template: "<div class=\"dropdown dropdown-end\">\n  <div tabindex=\"0\" role=\"button\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n  <ul\n    tabindex=\"0\"\n    class=\"dropdown-content bg-base-100 rounded-box z-1 mt-3 min-w-52 w-auto shadow-sm border border-neutral-200 dark:border-neutral-700 rounded-md overflow-auto max-h-[50vh]\">\n    <ng-content select=\"[options]\" />\n  </ul>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-dropdown', template: "<div class=\"dropdown dropdown-end\">\n  <div tabindex=\"0\" role=\"button\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n  <ul\n    tabindex=\"0\"\n    class=\"dropdown-content bg-base-100 rounded-box z-1 mt-3 min-w-52 w-auto shadow-sm border border-neutral-200 dark:border-neutral-700 rounded-md overflow-auto max-h-[50vh]\">\n    <ng-content select=\"[options]\" />\n  </ul>\n</div>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Dropdown };
+//# sourceMappingURL=koalarx-ui-shared-components-dropdown.mjs.map

package/fesm2022/koalarx-ui-shared-components-dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-dropdown.mjs","sources":["../../projects/koala-ui/shared/components/dropdown/dropdown.ts","../../projects/koala-ui/shared/components/dropdown/dropdown.html","../../projects/koala-ui/shared/components/dropdown/koalarx-ui-shared-components-dropdown.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-dropdown',\n  templateUrl: './dropdown.html',\n})\nexport class Dropdown {}\n","<div class=\"dropdown dropdown-end\">\n  <div tabindex=\"0\" role=\"button\">\n    <ng-content select=\"[trigger]\" />\n  </div>\n  <ul\n    tabindex=\"0\"\n    class=\"dropdown-content bg-base-100 rounded-box z-1 mt-3 min-w-52 w-auto shadow-sm border border-neutral-200 dark:border-neutral-700 rounded-md overflow-auto max-h-[50vh]\">\n    <ng-content select=\"[options]\" />\n  </ul>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAMa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,uECNrB,6YAUA,EAAA,CAAA;;2FDJa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAJpB,SAAS;+BACE,aAAa,EAAA,QAAA,EAAA,6YAAA,EAAA;;;AEHzB;;AAEG;;;;"}

package/fesm2022/koalarx-ui-shared-components-field-errors.mjs

@@ -0,0 +1,21 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import { AppConfig } from '@koalarx/ui/core/config';
+
+class FieldErrors {
+    translations = AppConfig.translation.form;
+    field = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FieldErrors, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FieldErrors, isStandalone: true, selector: "kl-field-errors", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (field().errors && field().touched) {\n  <p class=\"validator-hint show mb-1.5\">\n    <ng-content select=\"[errors]\" />\n\n    @if (field().errors?.['required']) {\n      {{translations.required}}<br/>\n    }\n\n    @if (field().errors?.['email']) {\n      {{translations.invalidEmail}}<br/>\n    }\n\n    @if (field().errors?.['minlength']) {\n      {{translations.invalidMinLength(field().errors?.['minlength'].requiredLength)}}<br/>\n    }\n  </p>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FieldErrors, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-field-errors', template: "@if (field().errors && field().touched) {\n  <p class=\"validator-hint show mb-1.5\">\n    <ng-content select=\"[errors]\" />\n\n    @if (field().errors?.['required']) {\n      {{translations.required}}<br/>\n    }\n\n    @if (field().errors?.['email']) {\n      {{translations.invalidEmail}}<br/>\n    }\n\n    @if (field().errors?.['minlength']) {\n      {{translations.invalidMinLength(field().errors?.['minlength'].requiredLength)}}<br/>\n    }\n  </p>\n}\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FieldErrors };
+//# sourceMappingURL=koalarx-ui-shared-components-field-errors.mjs.map

package/fesm2022/koalarx-ui-shared-components-field-errors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-field-errors.mjs","sources":["../../projects/koala-ui/shared/components/field-errors/field-errors.ts","../../projects/koala-ui/shared/components/field-errors/field-errors.html","../../projects/koala-ui/shared/components/field-errors/koalarx-ui-shared-components-field-errors.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\n@Component({\n  selector: 'kl-field-errors',\n  templateUrl: './field-errors.html',\n})\nexport class FieldErrors {\n  readonly translations = AppConfig.translation.form;\n  field = input.required<FormControl>();\n}\n","@if (field().errors && field().touched) {\n  <p class=\"validator-hint show mb-1.5\">\n    <ng-content select=\"[errors]\" />\n\n    @if (field().errors?.['required']) {\n      {{translations.required}}<br/>\n    }\n\n    @if (field().errors?.['email']) {\n      {{translations.invalidEmail}}<br/>\n    }\n\n    @if (field().errors?.['minlength']) {\n      {{translations.invalidMinLength(field().errors?.['minlength'].requiredLength)}}<br/>\n    }\n  </p>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,WAAW,CAAA;AACb,IAAA,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI;AAClD,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAe;uGAF1B,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,8MCRxB,+cAiBA,EAAA,CAAA;;2FDTa,WAAW,EAAA,UAAA,EAAA,CAAA;kBAJvB,SAAS;+BACE,iBAAiB,EAAA,QAAA,EAAA,+cAAA,EAAA;;;AEL7B;;AAEG;;;;"}

package/fesm2022/koalarx-ui-shared-components-horizontal-menu.mjs

@@ -0,0 +1,29 @@
+import * as i0 from '@angular/core';
+import { Component, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+class HorizontalMenuContainer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: HorizontalMenuContainer, isStandalone: true, selector: "kl-horizontal-menu-container", ngImport: i0, template: "<ul class=\"menu menu-vertical lg:menu-horizontal font-semibold text-gray-950 dark:text-gray-50 rounded-box\">\n  <ng-content />\n</ul>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-horizontal-menu-container', template: "<ul class=\"menu menu-vertical lg:menu-horizontal font-semibold text-gray-950 dark:text-gray-50 rounded-box\">\n  <ng-content />\n</ul>\n" }]
+        }] });
+
+class HorizontalMenuItem {
+    link = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: HorizontalMenuItem, isStandalone: true, selector: "kl-horizontal-menu-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-horizontal-menu-item', imports: [RouterLink, RouterLinkActive], template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HorizontalMenuContainer, HorizontalMenuItem };
+//# sourceMappingURL=koalarx-ui-shared-components-horizontal-menu.mjs.map

package/fesm2022/koalarx-ui-shared-components-horizontal-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-horizontal-menu.mjs","sources":["../../projects/koala-ui/shared/components/horizontal-menu/horizontal-menu-container.ts","../../projects/koala-ui/shared/components/horizontal-menu/horizontal-menu-container.html","../../projects/koala-ui/shared/components/horizontal-menu/horizontal-menu-item.ts","../../projects/koala-ui/shared/components/horizontal-menu/horizontal-menu-item.html","../../projects/koala-ui/shared/components/horizontal-menu/koalarx-ui-shared-components-horizontal-menu.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-horizontal-menu-container',\n  templateUrl: './horizontal-menu-container.html',\n})\nexport class HorizontalMenuContainer {}\n","<ul class=\"menu menu-vertical lg:menu-horizontal font-semibold text-gray-950 dark:text-gray-50 rounded-box\">\n  <ng-content />\n</ul>\n","import { Component, input } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'kl-horizontal-menu-item',\n  templateUrl: './horizontal-menu-item.html',\n  imports: [RouterLink, RouterLinkActive],\n})\nexport class HorizontalMenuItem {\n  link = input.required<string>();\n}\n","<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,wFCNpC,2IAGA,EAAA,CAAA;;2FDGa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;+BACE,8BAA8B,EAAA,QAAA,EAAA,2IAAA,EAAA;;;MEK7B,kBAAkB,CAAA;AAC7B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU;uGADpB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,ECR/B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,0IAOA,EDDY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE3B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAE1B,OAAA,EAAA,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0IAAA,EAAA;;;AENzC;;AAEG;;;;"}