@koalarx/ui 21.1.6 → 21.1.7

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

@@ -103,19 +103,19 @@ class DatatableFilter {
     constructor() {
         effect(() => {
             const filters = this._filters();
-            if (filters.length === 0 && Object.keys(this.payload()).length > 0) {
-                this._payload.set({});
+            const payload = this.payload();
+            if (filters.length === 0 && Object.keys(payload).length > 0) {
                 this._clearFilter.set(true);
                 setTimeout(() => this._clearFilter.set(false));
                 return;
             }
+        });
+        effect(() => {
+            const filters = this._filters();
             this._payload.update(() => {
                 const result = {};
                 filters.forEach((filter) => {
-                    return {
-                        ...result,
-                        [filter.propName]: filter.value,
-                    };
+                    result[filter.propName] = filter.value;
                 });
                 return result;
             });
@@ -202,11 +202,11 @@ class Filter {
         this.addFilter.emit(this.datatableFilter.filters());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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", clearFilter: "clearFilter" }, providers: [DatatableFilter], ngImport: i0, template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap 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 text-sm\"></i>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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", clearFilter: "clearFilter" }, providers: [DatatableFilter], ngImport: i0, template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-outline 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 text-sm\"></i>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Filter, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap 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 text-sm\"></i>\n    </button>\n  </div>\n}\n" }]
+            args: [{ selector: 'kl-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-outline 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 text-sm\"></i>\n    </button>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], payload: [{ type: i0.Output, args: ["payload"] }], addFilter: [{ type: i0.Output, args: ["addFilter"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }] } });
 
 class Datatable {
@@ -265,11 +265,11 @@ class Datatable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: true, transformFunction: null }, loadMoreBtnColor: { classPropertyName: "loadMoreBtnColor", publicName: "loadMoreBtnColor", isSignal: true, isRequired: false, transformFunction: null }, filterBtnColor: { classPropertyName: "filterBtnColor", publicName: "filterBtnColor", isSignal: true, isRequired: false, 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", loadMore: "loadMore" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-full bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\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", "clearFilter"] }, { kind: "directive", type: Button, selector: "button[klButton], a[klButton]", inputs: ["color", "type", "circle", "outline", "soft", "showLoader", "disabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Datatable, isStandalone: true, selector: "kl-datatable", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colspan: { classPropertyName: "colspan", publicName: "colspan", isSignal: true, isRequired: true, transformFunction: null }, loadMoreBtnColor: { classPropertyName: "loadMoreBtnColor", publicName: "loadMoreBtnColor", isSignal: true, isRequired: false, transformFunction: null }, filterBtnColor: { classPropertyName: "filterBtnColor", publicName: "filterBtnColor", isSignal: true, isRequired: false, 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", loadMore: "loadMore" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-auto bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\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", "clearFilter"] }, { kind: "directive", type: Button, selector: "button[klButton], a[klButton]", inputs: ["color", "type", "circle", "outline", "soft", "showLoader", "disabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datatable, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-datatable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, Filter, Button], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-full bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'kl-datatable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, Filter, Button], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-auto bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], colspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colspan", required: true }] }], loadMoreBtnColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreBtnColor", required: false }] }], filterBtnColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBtnColor", required: false }] }], componentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentFilter", required: false }] }], withPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPaginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], reloadList: [{ type: i0.Output, args: ["reloadList"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }] } });
 
 /**

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

@@ -1 +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  private readonly _clearFilter = signal<boolean>(false);\n\n  constructor() {\n    effect(() => {\n      const filters = this._filters();\n\n      if (filters.length === 0 && Object.keys(this.payload()).length > 0) {\n        this._payload.set({});\n        this._clearFilter.set(true);\n        setTimeout(() => this._clearFilter.set(false));\n        return;\n      }\n\n      this._payload.update(() => {\n        const result = {};\n\n        filters.forEach((filter) => {\n          return {\n            ...result,\n            [filter.propName]: filter.value,\n          };\n        });\n\n        return result;\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  get clearFilter() {\n    return this._clearFilter.asReadonly();\n  }\n\n  setFilters(filters: FilterData[]) {\n    this._filters.set(filters);\n  }\n\n  removeFilter(propName: string) {\n    this._filters.update((current) =>\n      current.filter((filter) => filter.propName !== propName),\n    );\n  }\n\n  clearFilters() {\n    this._filters.set([]);\n    this._payload.set({});\n\n    this._clearFilter.set(true);\n    setTimeout(() => this._clearFilter.set(false));\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 {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n  output,\n} 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  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [DatatableFilter],\n  imports: [Tooltip],\n})\nexport class Filter {\n  readonly translations = inject(AppConfig).translation.datatable;\n\n  datatableFilter = inject(DatatableFilter);\n  filter = input<FilterData[]>([]);\n  payload = output<Record<string, any>>();\n  addFilter = output<FilterData[]>();\n  clearFilter = output<void>();\n\n  constructor() {\n    effect(() => this.datatableFilter.setFilters(this.filter()));\n    effect(() => this.payload.emit(this.datatableFilter.payload()));\n    effect(() => {\n      if (this.datatableFilter.clearFilter()) {\n        this.clearFilter.emit();\n      }\n    });\n  }\n\n  add() {\n    this.addFilter.emit(this.datatableFilter.filters());\n  }\n}\n","@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap 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 text-sm\"></i>\n    </button>\n  </div>\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\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 { Button, ButtonColor } from '@koalarx/ui/shared/directives';\nimport { DatatableConfig } from './datatable-config';\nimport { FilterData } from './filter/datatable-filter';\nimport { Filter } from './filter/filter';\n\n@Component({\n  selector: 'kl-datatable',\n  templateUrl: './datatable.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FormsModule, Filter, Button],\n})\nexport class Datatable {\n  private readonly sideWindow = inject(SideWindow);\n\n  readonly translations = inject(AppConfig).translation.datatable;\n\n  config = input.required<DatatableConfig>();\n  colspan = input.required<number>();\n  loadMoreBtnColor = input<ButtonColor>('accent');\n  filterBtnColor = input<ButtonColor>('primary');\n  componentFilter = input<Type<any>>();\n  withPaginator = input(false, { transform: booleanAttribute });\n\n  currentPage = computed(() => this.config().currentPage);\n  totalItems = computed(() => this.config().totalItems);\n  totalItemsOnPage = computed(() => this.config().totalItemsOnPage);\n  currentPageSize = computed(() => this.config().currentPageSize);\n  isLoading = computed(() => this.config().isLoading);\n  hasError = computed(() => this.config().hasError);\n\n  filter = signal<FilterData[]>([]);\n  hasFilter = computed(() => {\n    return this.filter().length > 0;\n  });\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  lastPage = computed(() => {\n    const isLoading = this.isLoading();\n\n    if (!isLoading) {\n      return Math.ceil(this.totalItems() / this.currentPageSize());\n    }\n\n    return 1;\n  });\n\n  pageChange = output<number>();\n  pageSizeChange = output<number>();\n  filterChange = output<Record<string, any>>();\n  reloadList = output<void>();\n  loadMore = 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=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-full bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\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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"}
+{"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  private readonly _clearFilter = signal<boolean>(false);\n\n  constructor() {\n    effect(() => {\n      const filters = this._filters();\n      const payload = this.payload();\n\n      if (filters.length === 0 && Object.keys(payload).length > 0) {\n        this._clearFilter.set(true);\n        setTimeout(() => this._clearFilter.set(false));\n        return;\n      }\n    });\n\n    effect(() => {\n      const filters = this._filters();\n\n      this._payload.update(() => {\n        const result: any = {};\n\n        filters.forEach((filter) => {\n          result[filter.propName] = filter.value;\n        });\n\n        return result;\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  get clearFilter() {\n    return this._clearFilter.asReadonly();\n  }\n\n  setFilters(filters: FilterData[]) {\n    this._filters.set(filters);\n  }\n\n  removeFilter(propName: string) {\n    this._filters.update((current) =>\n      current.filter((filter) => filter.propName !== propName),\n    );\n  }\n\n  clearFilters() {\n    this._filters.set([]);\n    this._payload.set({});\n\n    this._clearFilter.set(true);\n    setTimeout(() => this._clearFilter.set(false));\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 {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n  output,\n} 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  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [DatatableFilter],\n  imports: [Tooltip],\n})\nexport class Filter {\n  readonly translations = inject(AppConfig).translation.datatable;\n\n  datatableFilter = inject(DatatableFilter);\n  filter = input<FilterData[]>([]);\n  payload = output<Record<string, any>>();\n  addFilter = output<FilterData[]>();\n  clearFilter = output<void>();\n\n  constructor() {\n    effect(() => this.datatableFilter.setFilters(this.filter()));\n    effect(() => this.payload.emit(this.datatableFilter.payload()));\n    effect(() => {\n      if (this.datatableFilter.clearFilter()) {\n        this.clearFilter.emit();\n      }\n    });\n  }\n\n  add() {\n    this.addFilter.emit(this.datatableFilter.filters());\n  }\n}\n","@if (datatableFilter.filters().length > 0) {\n  <div class=\"datatable-filter-container px-1 w-full flex items-center gap-3 text-neutral-500 dark:text-neutral-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 text-sm\"></i>\n    </button>\n\n    <div class=\"flex items-center flex-wrap gap-1\">\n      @for (item of datatableFilter.filters(); track $index) {\n        <div class=\"badge badge-outline 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 text-sm\"></i>\n    </button>\n  </div>\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\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 { Button, ButtonColor } from '@koalarx/ui/shared/directives';\nimport { DatatableConfig } from './datatable-config';\nimport { FilterData } from './filter/datatable-filter';\nimport { Filter } from './filter/filter';\n\n@Component({\n  selector: 'kl-datatable',\n  templateUrl: './datatable.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [FormsModule, Filter, Button],\n})\nexport class Datatable {\n  private readonly sideWindow = inject(SideWindow);\n\n  readonly translations = inject(AppConfig).translation.datatable;\n\n  config = input.required<DatatableConfig>();\n  colspan = input.required<number>();\n  loadMoreBtnColor = input<ButtonColor>('accent');\n  filterBtnColor = input<ButtonColor>('primary');\n  componentFilter = input<Type<any>>();\n  withPaginator = input(false, { transform: booleanAttribute });\n\n  currentPage = computed(() => this.config().currentPage);\n  totalItems = computed(() => this.config().totalItems);\n  totalItemsOnPage = computed(() => this.config().totalItemsOnPage);\n  currentPageSize = computed(() => this.config().currentPageSize);\n  isLoading = computed(() => this.config().isLoading);\n  hasError = computed(() => this.config().hasError);\n\n  filter = signal<FilterData[]>([]);\n  hasFilter = computed(() => {\n    return this.filter().length > 0;\n  });\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  lastPage = computed(() => {\n    const isLoading = this.isLoading();\n\n    if (!isLoading) {\n      return Math.ceil(this.totalItems() / this.currentPageSize());\n    }\n\n    return 1;\n  });\n\n  pageChange = output<number>();\n  pageSizeChange = output<number>();\n  filterChange = output<Record<string, any>>();\n  reloadList = output<void>();\n  loadMore = 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=\"datatable-menu-container pl-2 pr-4 w-full flex items-center justify-between gap-2 z-10\">\n    <div class=\"datatable-menu flex items-center py-2 px-0.5 opacity-80 gap-2\">\n      <div class=\"addicional-options-menu flex items-center opacity-80\">\n        <ng-content select=\"[menu]\" />\n      </div>\n\n      <span class=\"datatable-separator-menu relative top-[-0.10rem] opacity-20\">|</span>\n\n      @if (componentFilter()) {\n        @if (hasFilter()) {\n          <kl-filter\n            [filter]=\"filter()\"\n            (addFilter)=\"openFilter($event)\"\n            (payload)=\"filterChange.emit($event)\"\n            (clearFilter)=\"filter.set([])\"\n          />\n\n          <span class=\"relative top-[-0.10rem] opacity-20\">|</span>\n        } @else {\n          <button klButton\n            size=\"extraSmall\"\n            class=\"text-sm font-light\"\n            [color]=\"filterBtnColor()\"\n            (click)=\"openFilter()\">\n            <i class=\"fa-solid fa-filter text-xs\"></i>\n            {{translations.btnFilterLabel}}\n          </button>\n        }\n      }\n\n      <button class=\"btn btn-outline border-neutral-300 hover:border-neutral-500 dark:border-neutral-700 btn-xs text-sm font-light\"\n        (click)=\"reloadList.emit()\">\n        <i class=\"fa-solid fa-rotate-right text-xs\"></i>\n        {{translations.reloadListTooltip}}\n      </button>\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 class=\"whitespace-nowrap\">{{translations.labelItemsPerPage}}:</span>\n\n          <select class=\"select select-md p-0 pl-2 pr-8 h-6 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 whitespace-nowrap\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"datatable-table overflow-x-auto h-auto bg-base-200\">\n    <table class=\"table table-sm table-pin-rows\">\n      <thead>\n        <tr class=\"text-xs overflow-hidden bg-base-200\">\n          <ng-content select=\"[head]\" />\n        </tr>\n      </thead>\n      <tbody>\n        @if (hasError()) {\n          <tr>\n            <td [attr.colspan]=\"colspan()\" class=\"text-center\">\n              {{translations.errorLoadDataLabel}}\n            </td>\n          </tr>\n        } @else {\n          <ng-content select=\"[body]\" />\n\n          @if (!withPaginator() && !isLoading() && totalItemsOnPage() < totalItems()) {\n            <tr>\n              <td [attr.colspan]=\"colspan()\">\n                <button\n                  klButton\n                  outline\n                  [color]=\"loadMoreBtnColor()\"\n                  class=\"w-full\"\n                  (click)=\"loadMore.emit()\">\n                  {{translations.loadMoreBtnLabel}}\n                </button>\n              </td>\n            </tr>\n          }\n\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          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (withPaginator()) {\n    <div class=\"px-4 py-2 bg-base-200 border-t border-neutral-200 dark:border-neutral-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-6\" [(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=\"flex items-center gap-8\">\n        <span class=\"text-xs opacity-60\">{{translations.paginatorPagesFeedback(currentPage(), lastPage())}}</span>\n\n        <div class=\"join flex items-center\">\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(1)\">\n            <i class=\"fa-solid fa-angles-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === 1\"\n            (click)=\"pageChange.emit(currentPage() - 1)\">\n            <i class=\"fa-solid fa-chevron-left text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(currentPage() + 1)\">\n            <i class=\"fa-solid fa-angle-right text-[0.6rem]\"></i>\n          </button>\n\n          <button class=\"join-item btn btn-sm\"\n            [disabled]=\"currentPage() === lastPage()\"\n            (click)=\"pageChange.emit(lastPage())\">\n            <i class=\"fa-solid fa-angles-right text-[0.6rem]\"></i>\n          </button>\n        </div>\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-input-field-select.mjs

@@ -246,11 +246,11 @@ class SelectOptionBadge {
         throw new Error('Remove callback not set');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectOptionBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SelectOptionBadge, isStandalone: true, selector: "kl-select-option-badge", ngImport: i0, template: "<span class=\"flex items-center badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SelectOptionBadge, isStandalone: true, selector: "kl-select-option-badge", ngImport: i0, template: "<span class=\"flex items-center h-auto badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectOptionBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-select-option-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"flex items-center badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n" }]
+            args: [{ selector: 'kl-select-option-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"flex items-center h-auto badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n" }]
         }] });
 
 function hasValue(value) {
@@ -424,11 +424,11 @@ class Select extends InputFieldBase {
         inputValue.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Select, isStandalone: true, selector: "kl-select", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, internalFilter: { classPropertyName: "internalFilter", publicName: "internalFilter", isSignal: true, isRequired: false, transformFunction: null }, withoutFilter: { classPropertyName: "withoutFilter", publicName: "withoutFilter", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Select, isStandalone: true, selector: "kl-select", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, internalFilter: { classPropertyName: "internalFilter", publicName: "internalFilter", isSignal: true, isRequired: false, transformFunction: null }, withoutFilter: { classPropertyName: "withoutFilter", publicName: "withoutFilter", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex gap-4 disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-[calc(100%-3rem)] h-full text-left py-1\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-select', imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
+            args: [{ selector: 'kl-select', imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex gap-4 disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-[calc(100%-3rem)] h-full text-left py-1\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectField: [{ type: i0.ViewChild, args: ['selectField', { isSignal: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], internalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "internalFilter", required: false }] }], withoutFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withoutFilter", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectedItem: [{ type: i0.Output, args: ["selectedItem"] }] } });
 
 class SelectBuilder {

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-select.mjs","sources":["../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/change-selected-option.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/update-scroll-position.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/on-keydown.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/index.ts","../../projects/koala-ui/shared/components/input-field/select/utils/ajust-options-container-size.ts","../../projects/koala-ui/shared/components/input-field/select/utils/generate-options-resource.ts","../../projects/koala-ui/shared/components/input-field/select/utils/is-loading-feedback.ts","../../projects/koala-ui/shared/components/input-field/select/utils/on-server-filter.ts","../../projects/koala-ui/shared/components/input-field/select/utils/options-loader.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.html","../../projects/koala-ui/shared/components/input-field/select/utils/set-selected-option-content.ts","../../projects/koala-ui/shared/components/input-field/select/select.ts","../../projects/koala-ui/shared/components/input-field/select/select.html","../../projects/koala-ui/shared/components/input-field/select/services/select-builder.ts","../../projects/koala-ui/shared/components/input-field/select/koalarx-ui-shared-components-input-field-select.ts"],"sourcesContent":["import { Select } from '../../select';\nimport { ScrollDirection } from './update-scroll-position';\n\nexport function changeSelectedOption(\n  component: Select,\n  direction: ScrollDirection = 'down'\n) {\n  if (!component.selectElement.classList.contains('opened')) {\n    return;\n  }\n\n  const options: NodeListOf<HTMLOptionElement | HTMLLabelElement> =\n    component.selectElement.querySelectorAll(\n      'option, .kl-select-options-content .kl-select-option-content'\n    );\n\n  const selectedOption: HTMLOptionElement | HTMLLabelElement =\n    component.selectElement.querySelector('option:checked') ??\n    component.selectElement.querySelector(\n      'label.kl-select-option-content:has(input:checked)'\n    )!;\n\n  let newIndex = 0;\n\n  if (selectedOption) {\n    const currentIndex = Array.from(options).indexOf(selectedOption);\n\n    if (direction === 'down') {\n      newIndex =\n        currentIndex + 1 < options.length ? currentIndex + 1 : currentIndex;\n    } else {\n      newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : currentIndex;\n    }\n  }\n\n  const option = options[newIndex];\n  const event = new Event('change', { bubbles: true });\n\n  if (option instanceof HTMLOptionElement) {\n    option.selected = true;\n\n    component.selectElement.dispatchEvent(event);\n  } else {\n    option.querySelector('input')!.checked = true;\n\n    options.forEach((opt) => opt.classList.remove('active'));\n    option.classList.toggle('active');\n\n    option.querySelector('input')!.dispatchEvent(event);\n  }\n}\n","import { Select } from '../../select';\n\nexport type ScrollDirection = 'down' | 'up';\n\nexport function updateScrollPosition(\n  component: Select,\n  direction: ScrollDirection = 'down'\n) {\n  if (!component.selectElement.classList.contains('opened')) {\n    return;\n  }\n\n  setTimeout(() => {\n    const optionsContainer = component.selectElement.querySelector(\n      '.kl-select-options-content'\n    ) as HTMLDivElement;\n    const focusedOptionElement =\n      optionsContainer.querySelector('option:checked') ??\n      component.selectElement.querySelector(\n        'label.kl-select-option-content:has(input:checked)'\n      )!;\n\n    if (focusedOptionElement) {\n      optionsContainer.scrollTo({\n        top:\n          direction === 'down'\n            ? optionsContainer.scrollTop +\n              focusedOptionElement.getBoundingClientRect().height\n            : optionsContainer.scrollTop -\n              focusedOptionElement.getBoundingClientRect().height,\n      });\n    }\n  }, 50);\n}\n","import { Select } from '../select';\nimport { changeSelectedOption } from './utils/change-selected-option';\nimport { updateScrollPosition } from './utils/update-scroll-position';\n\nexport function initOnKeyDownListener(component: Select) {\n  function onKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.stopPropagation();\n        event.preventDefault();\n\n        changeSelectedOption(component, 'down');\n        updateScrollPosition(component, 'down');\n        break;\n      }\n      case 'ArrowUp': {\n        event.stopPropagation();\n        event.preventDefault();\n\n        changeSelectedOption(component, 'up');\n        updateScrollPosition(component, 'up');\n        break;\n      }\n    }\n  }\n\n  addEventListener('keydown', onKeyDown);\n\n  component.destroyRef.onDestroy(() => {\n    removeEventListener('keydown', onKeyDown);\n  });\n}\n","import { Select } from '../select';\nimport { initOnKeyDownListener } from './on-keydown';\n\nexport function assessibility(component: Select) {\n  initOnKeyDownListener(component);\n}\n","import { afterRenderEffect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function ajustOptionsContainerSize(component: Select) {\n  afterRenderEffect(() => {\n    const selectElement = component.selectElement;\n    const optionsContainer = selectElement.parentElement?.querySelector(\n      '.kl-select-options-container',\n    ) as HTMLElement;\n\n    function setMaxWidth() {\n      const currentWidth = selectElement.offsetWidth;\n      selectElement.style.setProperty('--select-width', `${currentWidth}px`);\n    }\n\n    function setMaxHeight() {\n      const optionsRect = selectElement.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const sizeDiscount = 16 + optionsRect.height;\n\n      let availableHeight = viewportHeight - optionsRect.top - sizeDiscount;\n\n      if (availableHeight < 150) {\n        availableHeight =\n          viewportHeight - (viewportHeight - optionsRect.bottom) - sizeDiscount;\n        selectElement.style.setProperty('--select-position-area', 'top');\n      } else {\n        selectElement.style.setProperty('--select-position-area', 'bottom');\n      }\n\n      optionsContainer.style.maxHeight = `${availableHeight}px`;\n    }\n\n    function getFilterInput() {\n      return optionsContainer.querySelector(\n        '.kl-select-filter-container input',\n      ) as HTMLInputElement | null;\n    }\n\n    function disableFilter() {\n      const filterInput = getFilterInput();\n\n      if (filterInput) {\n        filterInput.disabled = true;\n      }\n    }\n\n    function enableAndFocusFilter() {\n      const filterInput = getFilterInput();\n\n      if (filterInput) {\n        filterInput.disabled = false;\n        filterInput.focus();\n      }\n    }\n\n    function touchControl() {\n      component.control().markAsTouched();\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          component.selectElement.classList.add('opened');\n          setMaxWidth();\n          setMaxHeight();\n          enableAndFocusFilter();\n          touchControl();\n        } else {\n          component.selectElement.classList.remove('opened');\n          disableFilter();\n        }\n      });\n    });\n\n    setMaxWidth();\n\n    observer.observe(optionsContainer);\n    component.destroyRef.onDestroy(() => observer.unobserve(optionsContainer));\n  });\n}\n","import {\n  isSignal,\n  ResourceRef,\n  runInInjectionContext,\n  Signal,\n} from '@angular/core';\nimport { Select } from '../select';\nimport {\n  OptionsResource,\n  SelectDataOptionsFn,\n  SelectList,\n} from '../select.type';\n\nexport function generateOptionsResource(component: Select) {\n  const options = component.options();\n\n  let optionsResource: OptionsResource;\n\n  if (Object.hasOwn(options, 'value')) {\n    optionsResource = { onServer: options as ResourceRef<SelectList> };\n  } else if (isSignal(options)) {\n    optionsResource = {\n      inMemoryWithLoading: options as Signal<SelectList>,\n    };\n  } else if (typeof options === 'function') {\n    const resourceFnOptions = options as SelectDataOptionsFn;\n\n    optionsResource = {\n      onDemand: runInInjectionContext(component.injector, () =>\n        resourceFnOptions(component.requestOptionsParams)\n      ),\n    };\n  } else {\n    optionsResource = { inMemory: options as SelectList };\n  }\n\n  component.optionsResource.set(optionsResource);\n}\n","import { effect } from '@angular/core';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\n\nexport function isLoadingFeedback(component: Select) {\n  effect(async () => {\n    const isLoading = component.isLoading();\n\n    if (!isLoading) {\n      while (!component.selectField()) {\n        await delay(50);\n      }\n\n      const selectedContent = component.selectElement.querySelector(\n        '.selectcontent'\n      ) as HTMLElement;\n\n      selectedContent.style.opacity = '0';\n\n      if (!component.disabled()) {\n        component.isDisabled.set(false);\n      }\n\n      await delay(1);\n\n      selectedContent.style.opacity = '1';\n    } else {\n      component.isDisabled.set(true);\n    }\n  });\n}\n","import { effect } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\n\nexport function onServerFilter(component: Select) {\n  toObservable(component.filter, { injector: component.injector })\n    .pipe(debounceTime(300), takeUntilDestroyed(component.destroyRef))\n    .subscribe((value) => component.filteredValue.set(value ?? null));\n\n  effect(\n    () => {\n      if (component.optionsResource()?.onDemand) {\n        component.requestOptionsParams.set({\n          filter: component.filteredValue(),\n          internalFilter: component.internalFilter(),\n          currentValue: component.control().value,\n        });\n      }\n    },\n    { injector: component.injector }\n  );\n}\n","import { effect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function loadOptions(component: Select) {\n  effect(() => {\n    const options = component.optionsResource();\n\n    if (!options) {\n      return;\n    }\n\n    const { onDemand, onServer, inMemory, inMemoryWithLoading } = options;\n\n    if (onDemand) {\n      component.optionList.set(onDemand.value());\n      component.isLoading.set(onDemand.isLoading());\n    } else if (onServer) {\n      component.optionList.set(component.applyFilter(onServer.value()));\n      component.isLoading.set(onServer.isLoading());\n    } else if (inMemory) {\n      component.optionList.set(component.applyFilter(inMemory));\n      component.isLoading.set(false);\n    } else if (inMemoryWithLoading) {\n      const optionsWithLoading = inMemoryWithLoading();\n      component.optionList.set(component.applyFilter(optionsWithLoading ?? []));\n      component.isLoading.set(!optionsWithLoading);\n    }\n  });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-select-option-badge',\n  templateUrl: './select-option-badge.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectOptionBadge {\n  removeCallback: (event: MouseEvent) => void = () => {\n    throw new Error('Remove callback not set');\n  };\n}\n","<span class=\"flex items-center badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n","import { createComponent } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isEmpty } from '@koalarx/ui/shared/utils';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\nimport { SelectOptionBadge } from '../select-option-badge';\n\nfunction hasValue(value: any) {\n  return Array.isArray(value) ? value.length > 0 : !isEmpty(value);\n}\n\nfunction createBadgeElement(component: Select, content: Node, value: any) {\n  const badgeComponent = createComponent(SelectOptionBadge, {\n    environmentInjector: component.appRef.injector,\n    projectableNodes: [[content]],\n  });\n\n  badgeComponent.instance.removeCallback = (event: MouseEvent) =>\n    component.removeOption(event);\n\n  const element: HTMLElement = badgeComponent.location.nativeElement;\n  const spanElement = element.firstElementChild as HTMLSpanElement;\n\n  spanElement.dataset['value'] = value;\n\n  return element;\n}\n\nasync function appendSelectedOptionContent(component: Select, value: any) {\n  while (component.isLoading()) {\n    await delay(50);\n  }\n\n  const selectedContent = component.selectElement.querySelector(\n    '.selectcontent'\n  ) as HTMLElement;\n\n  if (!Array.isArray(value)) {\n    value = isEmpty(value) ? [] : [value];\n  }\n\n  if (!component.multiple()) {\n    selectedContent.innerHTML = '';\n  }\n\n  selectedContent\n    .querySelectorAll<HTMLSpanElement>('span[data-value]')\n    .forEach((node) => {\n      if (!value.map(String).includes(node.dataset['value'])) {\n        node.parentElement!.remove();\n      }\n    });\n\n  for (const v of value) {\n    const optionData = component\n      .selectedOptions()\n      .find((item) => String(item.value) === String(v));\n\n    if (!optionData) {\n      continue;\n    }\n\n    const optionContent = document.createElement('span');\n    optionContent.dataset['value'] = String(v);\n    optionContent.innerHTML = optionData?.label ?? v;\n\n    if (selectedContent.querySelector(`[data-value=\"${v}\"]`)) {\n      continue;\n    }\n\n    const optionBadge = component.multiple()\n      ? createBadgeElement(component, optionContent, v)\n      : optionContent;\n\n    selectedContent.appendChild(optionBadge);\n  }\n\n  component.hasValue.set(hasValue(value));\n\n  component.selectElement\n    .querySelectorAll<HTMLInputElement>('input[type=checkbox]')\n    .forEach((input) => {\n      input.checked = value.map(String).includes(input.value);\n    });\n}\n\nfunction setSelectedOptionsOnComponent(component: Select, value: any) {\n  component.selectedOptions.set(\n    component\n      .optionList()\n      .filter((item) =>\n        Array.isArray(value)\n          ? value.map(String).includes(String(item.value))\n          : String(item.value) === String(value)\n      )\n  );\n}\n\nexport async function setSelectedOptionContent(component: Select) {\n  const value = component.control().value;\n\n  component.hasValue.set(hasValue(value));\n\n  while (component.isLoading()) {\n    await delay(50);\n  }\n\n  setSelectedOptionsOnComponent(component, value);\n\n  await appendSelectedOptionContent(component, value);\n\n  component\n    .control()\n    .valueChanges.pipe(\n      debounceTime(50),\n      takeUntilDestroyed(component.destroyRef)\n    )\n    .subscribe((value) => {\n      setSelectedOptionsOnComponent(component, value);\n      appendSelectedOptionContent(component, value);\n    });\n}\n","import {\n  ApplicationRef,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  model,\n  OnInit,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { assessibility } from './accessibility';\nimport {\n  OptionsResource,\n  SelectDataOptions,\n  SelectDataOptionsFnParams,\n  SelectList,\n  SelectValue,\n} from './select.type';\nimport { ajustOptionsContainerSize } from './utils/ajust-options-container-size';\nimport { generateOptionsResource } from './utils/generate-options-resource';\nimport { isLoadingFeedback } from './utils/is-loading-feedback';\nimport { onServerFilter } from './utils/on-server-filter';\nimport { loadOptions } from './utils/options-loader';\nimport { setSelectedOptionContent } from './utils/set-selected-option-content';\n\n@Component({\n  selector: 'kl-select',\n  templateUrl: './select.html',\n  imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Select extends InputFieldBase implements OnInit {\n  readonly appRef = inject(ApplicationRef);\n  readonly destroyRef = inject(DestroyRef);\n  readonly injector = inject(Injector);\n  readonly selectField = viewChild<ElementRef<HTMLDivElement>>('selectField');\n\n  readonly optionsResource = signal<OptionsResource | null>(null);\n  readonly optionList = signal<SelectList>([]);\n  readonly selectedOptions = signal<SelectList>([]);\n  readonly isLoading = signal<boolean>(true);\n  readonly requestOptionsParams = signal<SelectDataOptionsFnParams>({\n    filter: null,\n    currentValue: null,\n    internalFilter: null,\n  });\n  readonly translations = inject(AppConfig).translation.form;\n  readonly supportsExperimentalSelect = !CSS.supports(\n    'appearance',\n    'base-select',\n  );\n  readonly hasValue = signal<boolean>(false);\n\n  filter = model<string>();\n  filteredValue = signal<string | null>(null);\n\n  options = input.required<SelectDataOptions>();\n  internalFilter = input<string | null>(null);\n  withoutFilter = input(false, { transform: booleanAttribute });\n  multiple = input(false, { transform: booleanAttribute });\n  selectedItem = output<any | null>();\n\n  get selectElement() {\n    const selectField = this.selectField();\n\n    if (!selectField) {\n      throw new Error('Select element not found');\n    }\n\n    return selectField.nativeElement;\n  }\n\n  constructor() {\n    super();\n\n    loadOptions(this);\n    ajustOptionsContainerSize(this);\n    isLoadingFeedback(this);\n    assessibility(this);\n  }\n\n  ngOnInit() {\n    onServerFilter(this);\n    generateOptionsResource(this);\n    setSelectedOptionContent(this);\n  }\n\n  applyFilter(options: SelectList) {\n    const filter = this.filter() ?? '';\n\n    return options.filter((option) =>\n      option.label.toLowerCase().includes(filter.toLowerCase()),\n    );\n  }\n\n  setValue(event: Event) {\n    const select = event.target as HTMLInputElement;\n    const value: SelectValue = select.value;\n\n    if (this.multiple()) {\n      const selectedOptionsElements = this.selectElement.querySelectorAll(\n        '.kl-select-options-content input[type=\"checkbox\"]:checked',\n      ) as NodeListOf<HTMLInputElement>;\n\n      const values: string[] = [];\n\n      selectedOptionsElements.forEach((option) => values.push(option.value));\n\n      if (select.checked) {\n        this.selectedOptions.update((current) => [\n          ...current,\n          this.optionList().find((item) => String(item.value) === value)!,\n        ]);\n      } else {\n        this.selectedOptions.update((current) =>\n          current.filter((item) => String(item.value) !== value),\n        );\n      }\n\n      const selectedValues = this.selectedOptions().map((item) => item.value);\n\n      this.control().setValue(selectedValues, { emitEvent: true });\n\n      return;\n    }\n\n    const selectedOption = this.optionList().find(\n      (item) => String(item.value) === value,\n    );\n\n    if (selectedOption) {\n      this.selectedOptions.set([selectedOption]);\n      this.control().setValue(selectedOption.value, { emitEvent: true });\n    }\n\n    this.selectedItem.emit(selectedOption?.data ?? null);\n\n    document\n      .querySelector<HTMLElement>(`#${this.fieldId}[popover]`)\n      ?.hidePopover();\n  }\n\n  clear(event: MouseEvent) {\n    event.preventDefault();\n    this.selectedOptions.set([]);\n    this.control().setValue(null);\n  }\n\n  removeOption(event: MouseEvent) {\n    event.preventDefault();\n\n    const target = event.target as HTMLSpanElement;\n    const value = target.parentElement?.dataset['value'];\n\n    const inputValue = this.selectElement.querySelector(\n      `.kl-select-options-content input[value=\"${value}\"]`,\n    ) as HTMLInputElement;\n\n    inputValue.click();\n  }\n}\n","<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n","import { Injectable, ResourceRef, Signal } from '@angular/core';\nimport { SelectDataOptionsFn, SelectList } from '../select.type';\n\n@Injectable({ providedIn: 'root' })\nexport class SelectBuilder {\n  onDemand(config: SelectDataOptionsFn) {\n    return config;\n  }\n\n  onServer(config: ResourceRef<SelectList>) {\n    return config;\n  }\n\n  inMemory(config: SelectList) {\n    return config;\n  }\n\n  inMemoryWithLoading(config: Signal<SelectList>) {\n    return config;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-select.mjs","sources":["../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/change-selected-option.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/update-scroll-position.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/on-keydown.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/index.ts","../../projects/koala-ui/shared/components/input-field/select/utils/ajust-options-container-size.ts","../../projects/koala-ui/shared/components/input-field/select/utils/generate-options-resource.ts","../../projects/koala-ui/shared/components/input-field/select/utils/is-loading-feedback.ts","../../projects/koala-ui/shared/components/input-field/select/utils/on-server-filter.ts","../../projects/koala-ui/shared/components/input-field/select/utils/options-loader.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.html","../../projects/koala-ui/shared/components/input-field/select/utils/set-selected-option-content.ts","../../projects/koala-ui/shared/components/input-field/select/select.ts","../../projects/koala-ui/shared/components/input-field/select/select.html","../../projects/koala-ui/shared/components/input-field/select/services/select-builder.ts","../../projects/koala-ui/shared/components/input-field/select/koalarx-ui-shared-components-input-field-select.ts"],"sourcesContent":["import { Select } from '../../select';\nimport { ScrollDirection } from './update-scroll-position';\n\nexport function changeSelectedOption(\n  component: Select,\n  direction: ScrollDirection = 'down'\n) {\n  if (!component.selectElement.classList.contains('opened')) {\n    return;\n  }\n\n  const options: NodeListOf<HTMLOptionElement | HTMLLabelElement> =\n    component.selectElement.querySelectorAll(\n      'option, .kl-select-options-content .kl-select-option-content'\n    );\n\n  const selectedOption: HTMLOptionElement | HTMLLabelElement =\n    component.selectElement.querySelector('option:checked') ??\n    component.selectElement.querySelector(\n      'label.kl-select-option-content:has(input:checked)'\n    )!;\n\n  let newIndex = 0;\n\n  if (selectedOption) {\n    const currentIndex = Array.from(options).indexOf(selectedOption);\n\n    if (direction === 'down') {\n      newIndex =\n        currentIndex + 1 < options.length ? currentIndex + 1 : currentIndex;\n    } else {\n      newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : currentIndex;\n    }\n  }\n\n  const option = options[newIndex];\n  const event = new Event('change', { bubbles: true });\n\n  if (option instanceof HTMLOptionElement) {\n    option.selected = true;\n\n    component.selectElement.dispatchEvent(event);\n  } else {\n    option.querySelector('input')!.checked = true;\n\n    options.forEach((opt) => opt.classList.remove('active'));\n    option.classList.toggle('active');\n\n    option.querySelector('input')!.dispatchEvent(event);\n  }\n}\n","import { Select } from '../../select';\n\nexport type ScrollDirection = 'down' | 'up';\n\nexport function updateScrollPosition(\n  component: Select,\n  direction: ScrollDirection = 'down'\n) {\n  if (!component.selectElement.classList.contains('opened')) {\n    return;\n  }\n\n  setTimeout(() => {\n    const optionsContainer = component.selectElement.querySelector(\n      '.kl-select-options-content'\n    ) as HTMLDivElement;\n    const focusedOptionElement =\n      optionsContainer.querySelector('option:checked') ??\n      component.selectElement.querySelector(\n        'label.kl-select-option-content:has(input:checked)'\n      )!;\n\n    if (focusedOptionElement) {\n      optionsContainer.scrollTo({\n        top:\n          direction === 'down'\n            ? optionsContainer.scrollTop +\n              focusedOptionElement.getBoundingClientRect().height\n            : optionsContainer.scrollTop -\n              focusedOptionElement.getBoundingClientRect().height,\n      });\n    }\n  }, 50);\n}\n","import { Select } from '../select';\nimport { changeSelectedOption } from './utils/change-selected-option';\nimport { updateScrollPosition } from './utils/update-scroll-position';\n\nexport function initOnKeyDownListener(component: Select) {\n  function onKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.stopPropagation();\n        event.preventDefault();\n\n        changeSelectedOption(component, 'down');\n        updateScrollPosition(component, 'down');\n        break;\n      }\n      case 'ArrowUp': {\n        event.stopPropagation();\n        event.preventDefault();\n\n        changeSelectedOption(component, 'up');\n        updateScrollPosition(component, 'up');\n        break;\n      }\n    }\n  }\n\n  addEventListener('keydown', onKeyDown);\n\n  component.destroyRef.onDestroy(() => {\n    removeEventListener('keydown', onKeyDown);\n  });\n}\n","import { Select } from '../select';\nimport { initOnKeyDownListener } from './on-keydown';\n\nexport function assessibility(component: Select) {\n  initOnKeyDownListener(component);\n}\n","import { afterRenderEffect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function ajustOptionsContainerSize(component: Select) {\n  afterRenderEffect(() => {\n    const selectElement = component.selectElement;\n    const optionsContainer = selectElement.parentElement?.querySelector(\n      '.kl-select-options-container',\n    ) as HTMLElement;\n\n    function setMaxWidth() {\n      const currentWidth = selectElement.offsetWidth;\n      selectElement.style.setProperty('--select-width', `${currentWidth}px`);\n    }\n\n    function setMaxHeight() {\n      const optionsRect = selectElement.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const sizeDiscount = 16 + optionsRect.height;\n\n      let availableHeight = viewportHeight - optionsRect.top - sizeDiscount;\n\n      if (availableHeight < 150) {\n        availableHeight =\n          viewportHeight - (viewportHeight - optionsRect.bottom) - sizeDiscount;\n        selectElement.style.setProperty('--select-position-area', 'top');\n      } else {\n        selectElement.style.setProperty('--select-position-area', 'bottom');\n      }\n\n      optionsContainer.style.maxHeight = `${availableHeight}px`;\n    }\n\n    function getFilterInput() {\n      return optionsContainer.querySelector(\n        '.kl-select-filter-container input',\n      ) as HTMLInputElement | null;\n    }\n\n    function disableFilter() {\n      const filterInput = getFilterInput();\n\n      if (filterInput) {\n        filterInput.disabled = true;\n      }\n    }\n\n    function enableAndFocusFilter() {\n      const filterInput = getFilterInput();\n\n      if (filterInput) {\n        filterInput.disabled = false;\n        filterInput.focus();\n      }\n    }\n\n    function touchControl() {\n      component.control().markAsTouched();\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          component.selectElement.classList.add('opened');\n          setMaxWidth();\n          setMaxHeight();\n          enableAndFocusFilter();\n          touchControl();\n        } else {\n          component.selectElement.classList.remove('opened');\n          disableFilter();\n        }\n      });\n    });\n\n    setMaxWidth();\n\n    observer.observe(optionsContainer);\n    component.destroyRef.onDestroy(() => observer.unobserve(optionsContainer));\n  });\n}\n","import {\n  isSignal,\n  ResourceRef,\n  runInInjectionContext,\n  Signal,\n} from '@angular/core';\nimport { Select } from '../select';\nimport {\n  OptionsResource,\n  SelectDataOptionsFn,\n  SelectList,\n} from '../select.type';\n\nexport function generateOptionsResource(component: Select) {\n  const options = component.options();\n\n  let optionsResource: OptionsResource;\n\n  if (Object.hasOwn(options, 'value')) {\n    optionsResource = { onServer: options as ResourceRef<SelectList> };\n  } else if (isSignal(options)) {\n    optionsResource = {\n      inMemoryWithLoading: options as Signal<SelectList>,\n    };\n  } else if (typeof options === 'function') {\n    const resourceFnOptions = options as SelectDataOptionsFn;\n\n    optionsResource = {\n      onDemand: runInInjectionContext(component.injector, () =>\n        resourceFnOptions(component.requestOptionsParams)\n      ),\n    };\n  } else {\n    optionsResource = { inMemory: options as SelectList };\n  }\n\n  component.optionsResource.set(optionsResource);\n}\n","import { effect } from '@angular/core';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\n\nexport function isLoadingFeedback(component: Select) {\n  effect(async () => {\n    const isLoading = component.isLoading();\n\n    if (!isLoading) {\n      while (!component.selectField()) {\n        await delay(50);\n      }\n\n      const selectedContent = component.selectElement.querySelector(\n        '.selectcontent'\n      ) as HTMLElement;\n\n      selectedContent.style.opacity = '0';\n\n      if (!component.disabled()) {\n        component.isDisabled.set(false);\n      }\n\n      await delay(1);\n\n      selectedContent.style.opacity = '1';\n    } else {\n      component.isDisabled.set(true);\n    }\n  });\n}\n","import { effect } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\n\nexport function onServerFilter(component: Select) {\n  toObservable(component.filter, { injector: component.injector })\n    .pipe(debounceTime(300), takeUntilDestroyed(component.destroyRef))\n    .subscribe((value) => component.filteredValue.set(value ?? null));\n\n  effect(\n    () => {\n      if (component.optionsResource()?.onDemand) {\n        component.requestOptionsParams.set({\n          filter: component.filteredValue(),\n          internalFilter: component.internalFilter(),\n          currentValue: component.control().value,\n        });\n      }\n    },\n    { injector: component.injector }\n  );\n}\n","import { effect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function loadOptions(component: Select) {\n  effect(() => {\n    const options = component.optionsResource();\n\n    if (!options) {\n      return;\n    }\n\n    const { onDemand, onServer, inMemory, inMemoryWithLoading } = options;\n\n    if (onDemand) {\n      component.optionList.set(onDemand.value());\n      component.isLoading.set(onDemand.isLoading());\n    } else if (onServer) {\n      component.optionList.set(component.applyFilter(onServer.value()));\n      component.isLoading.set(onServer.isLoading());\n    } else if (inMemory) {\n      component.optionList.set(component.applyFilter(inMemory));\n      component.isLoading.set(false);\n    } else if (inMemoryWithLoading) {\n      const optionsWithLoading = inMemoryWithLoading();\n      component.optionList.set(component.applyFilter(optionsWithLoading ?? []));\n      component.isLoading.set(!optionsWithLoading);\n    }\n  });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-select-option-badge',\n  templateUrl: './select-option-badge.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectOptionBadge {\n  removeCallback: (event: MouseEvent) => void = () => {\n    throw new Error('Remove callback not set');\n  };\n}\n","<span class=\"flex items-center h-auto badge badge-outline badge-primary badge-sm rounded-sm bg-primary/20 dark:text-neutral-300 dark:border-primary\">\n  <ng-content />\n  <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer\"\n    (click)=\"removeCallback($event)\">\n  </i>\n</span>\n","import { createComponent } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isEmpty } from '@koalarx/ui/shared/utils';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\nimport { SelectOptionBadge } from '../select-option-badge';\n\nfunction hasValue(value: any) {\n  return Array.isArray(value) ? value.length > 0 : !isEmpty(value);\n}\n\nfunction createBadgeElement(component: Select, content: Node, value: any) {\n  const badgeComponent = createComponent(SelectOptionBadge, {\n    environmentInjector: component.appRef.injector,\n    projectableNodes: [[content]],\n  });\n\n  badgeComponent.instance.removeCallback = (event: MouseEvent) =>\n    component.removeOption(event);\n\n  const element: HTMLElement = badgeComponent.location.nativeElement;\n  const spanElement = element.firstElementChild as HTMLSpanElement;\n\n  spanElement.dataset['value'] = value;\n\n  return element;\n}\n\nasync function appendSelectedOptionContent(component: Select, value: any) {\n  while (component.isLoading()) {\n    await delay(50);\n  }\n\n  const selectedContent = component.selectElement.querySelector(\n    '.selectcontent'\n  ) as HTMLElement;\n\n  if (!Array.isArray(value)) {\n    value = isEmpty(value) ? [] : [value];\n  }\n\n  if (!component.multiple()) {\n    selectedContent.innerHTML = '';\n  }\n\n  selectedContent\n    .querySelectorAll<HTMLSpanElement>('span[data-value]')\n    .forEach((node) => {\n      if (!value.map(String).includes(node.dataset['value'])) {\n        node.parentElement!.remove();\n      }\n    });\n\n  for (const v of value) {\n    const optionData = component\n      .selectedOptions()\n      .find((item) => String(item.value) === String(v));\n\n    if (!optionData) {\n      continue;\n    }\n\n    const optionContent = document.createElement('span');\n    optionContent.dataset['value'] = String(v);\n    optionContent.innerHTML = optionData?.label ?? v;\n\n    if (selectedContent.querySelector(`[data-value=\"${v}\"]`)) {\n      continue;\n    }\n\n    const optionBadge = component.multiple()\n      ? createBadgeElement(component, optionContent, v)\n      : optionContent;\n\n    selectedContent.appendChild(optionBadge);\n  }\n\n  component.hasValue.set(hasValue(value));\n\n  component.selectElement\n    .querySelectorAll<HTMLInputElement>('input[type=checkbox]')\n    .forEach((input) => {\n      input.checked = value.map(String).includes(input.value);\n    });\n}\n\nfunction setSelectedOptionsOnComponent(component: Select, value: any) {\n  component.selectedOptions.set(\n    component\n      .optionList()\n      .filter((item) =>\n        Array.isArray(value)\n          ? value.map(String).includes(String(item.value))\n          : String(item.value) === String(value)\n      )\n  );\n}\n\nexport async function setSelectedOptionContent(component: Select) {\n  const value = component.control().value;\n\n  component.hasValue.set(hasValue(value));\n\n  while (component.isLoading()) {\n    await delay(50);\n  }\n\n  setSelectedOptionsOnComponent(component, value);\n\n  await appendSelectedOptionContent(component, value);\n\n  component\n    .control()\n    .valueChanges.pipe(\n      debounceTime(50),\n      takeUntilDestroyed(component.destroyRef)\n    )\n    .subscribe((value) => {\n      setSelectedOptionsOnComponent(component, value);\n      appendSelectedOptionContent(component, value);\n    });\n}\n","import {\n  ApplicationRef,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  model,\n  OnInit,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { assessibility } from './accessibility';\nimport {\n  OptionsResource,\n  SelectDataOptions,\n  SelectDataOptionsFnParams,\n  SelectList,\n  SelectValue,\n} from './select.type';\nimport { ajustOptionsContainerSize } from './utils/ajust-options-container-size';\nimport { generateOptionsResource } from './utils/generate-options-resource';\nimport { isLoadingFeedback } from './utils/is-loading-feedback';\nimport { onServerFilter } from './utils/on-server-filter';\nimport { loadOptions } from './utils/options-loader';\nimport { setSelectedOptionContent } from './utils/set-selected-option-content';\n\n@Component({\n  selector: 'kl-select',\n  templateUrl: './select.html',\n  imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Select extends InputFieldBase implements OnInit {\n  readonly appRef = inject(ApplicationRef);\n  readonly destroyRef = inject(DestroyRef);\n  readonly injector = inject(Injector);\n  readonly selectField = viewChild<ElementRef<HTMLDivElement>>('selectField');\n\n  readonly optionsResource = signal<OptionsResource | null>(null);\n  readonly optionList = signal<SelectList>([]);\n  readonly selectedOptions = signal<SelectList>([]);\n  readonly isLoading = signal<boolean>(true);\n  readonly requestOptionsParams = signal<SelectDataOptionsFnParams>({\n    filter: null,\n    currentValue: null,\n    internalFilter: null,\n  });\n  readonly translations = inject(AppConfig).translation.form;\n  readonly supportsExperimentalSelect = !CSS.supports(\n    'appearance',\n    'base-select',\n  );\n  readonly hasValue = signal<boolean>(false);\n\n  filter = model<string>();\n  filteredValue = signal<string | null>(null);\n\n  options = input.required<SelectDataOptions>();\n  internalFilter = input<string | null>(null);\n  withoutFilter = input(false, { transform: booleanAttribute });\n  multiple = input(false, { transform: booleanAttribute });\n  selectedItem = output<any | null>();\n\n  get selectElement() {\n    const selectField = this.selectField();\n\n    if (!selectField) {\n      throw new Error('Select element not found');\n    }\n\n    return selectField.nativeElement;\n  }\n\n  constructor() {\n    super();\n\n    loadOptions(this);\n    ajustOptionsContainerSize(this);\n    isLoadingFeedback(this);\n    assessibility(this);\n  }\n\n  ngOnInit() {\n    onServerFilter(this);\n    generateOptionsResource(this);\n    setSelectedOptionContent(this);\n  }\n\n  applyFilter(options: SelectList) {\n    const filter = this.filter() ?? '';\n\n    return options.filter((option) =>\n      option.label.toLowerCase().includes(filter.toLowerCase()),\n    );\n  }\n\n  setValue(event: Event) {\n    const select = event.target as HTMLInputElement;\n    const value: SelectValue = select.value;\n\n    if (this.multiple()) {\n      const selectedOptionsElements = this.selectElement.querySelectorAll(\n        '.kl-select-options-content input[type=\"checkbox\"]:checked',\n      ) as NodeListOf<HTMLInputElement>;\n\n      const values: string[] = [];\n\n      selectedOptionsElements.forEach((option) => values.push(option.value));\n\n      if (select.checked) {\n        this.selectedOptions.update((current) => [\n          ...current,\n          this.optionList().find((item) => String(item.value) === value)!,\n        ]);\n      } else {\n        this.selectedOptions.update((current) =>\n          current.filter((item) => String(item.value) !== value),\n        );\n      }\n\n      const selectedValues = this.selectedOptions().map((item) => item.value);\n\n      this.control().setValue(selectedValues, { emitEvent: true });\n\n      return;\n    }\n\n    const selectedOption = this.optionList().find(\n      (item) => String(item.value) === value,\n    );\n\n    if (selectedOption) {\n      this.selectedOptions.set([selectedOption]);\n      this.control().setValue(selectedOption.value, { emitEvent: true });\n    }\n\n    this.selectedItem.emit(selectedOption?.data ?? null);\n\n    document\n      .querySelector<HTMLElement>(`#${this.fieldId}[popover]`)\n      ?.hidePopover();\n  }\n\n  clear(event: MouseEvent) {\n    event.preventDefault();\n    this.selectedOptions.set([]);\n    this.control().setValue(null);\n  }\n\n  removeOption(event: MouseEvent) {\n    event.preventDefault();\n\n    const target = event.target as HTMLSpanElement;\n    const value = target.parentElement?.dataset['value'];\n\n    const inputValue = this.selectElement.querySelector(\n      `.kl-select-options-content input[value=\"${value}\"]`,\n    ) as HTMLInputElement;\n\n    inputValue.click();\n  }\n}\n","<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <div class=\"flex items-center justify-center h-full absolute top-0 right-7 z-10 pr-2\">\n      <button class=\"kl-select-clear-button text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\"\n        type=\"button\"\n        (click)=\"clear($event)\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex gap-4 disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-[calc(100%-3rem)] h-full text-left py-1\" [class.py-3]=\"multiple()\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden bg-base-100 dark:bg-base-300\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none dark:placeholder:opacity-80\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md text-neutral-900 dark:text-neutral-300 has-[input:checked]:bg-neutral-200 dark:has-[input:checked]:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 cursor-pointer\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full flex flex-col justify-center\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n              <small class=\"empty:hidden opacity-60\">{{ item.description }}</small>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n","import { Injectable, ResourceRef, Signal } from '@angular/core';\nimport { SelectDataOptionsFn, SelectList } from '../select.type';\n\n@Injectable({ providedIn: 'root' })\nexport class SelectBuilder {\n  onDemand(config: SelectDataOptionsFn) {\n    return config;\n  }\n\n  onServer(config: ResourceRef<SelectList>) {\n    return config;\n  }\n\n  inMemory(config: SelectList) {\n    return config;\n  }\n\n  inMemoryWithLoading(config: Signal<SelectList>) {\n    return config;\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-input-field-switcher.mjs

@@ -67,11 +67,11 @@ class Switcher extends InputFieldBase {
         this.control().setValue(target.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Switcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Switcher, isStandalone: true, selector: "kl-switcher", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "switcherElement", first: true, predicate: ["inputSwitcher"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Switcher, isStandalone: true, selector: "kl-switcher", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "switcherElement", first: true, predicate: ["inputSwitcher"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Switcher, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-switcher', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n" }]
+            args: [{ selector: 'kl-switcher', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { switcherElement: [{ type: i0.ViewChild, args: ['inputSwitcher', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-switcher.mjs","sources":["../../projects/koala-ui/shared/components/input-field/switcher/switcher.ts","../../projects/koala-ui/shared/components/input-field/switcher/switcher.html","../../projects/koala-ui/shared/components/input-field/switcher/koalarx-ui-shared-components-input-field-switcher.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\nexport type SwitcherColor =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost';\n\nexport type SwitcherSize =\n  | 'extraSmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'extraLarge';\n\n@Component({\n  selector: 'kl-switcher',\n  templateUrl: './switcher.html',\n  imports: [ReactiveFormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Switcher extends InputFieldBase {\n  private readonly switcherElement =\n    viewChild<ElementRef<HTMLInputElement>>('inputSwitcher');\n\n  color = input<SwitcherColor>();\n  size = input<SwitcherSize>();\n\n  private getColorClass(): string {\n    switch (this.color()) {\n      case 'neutral':\n        return 'toggle-neutral';\n      case 'primary':\n        return 'toggle-primary';\n      case 'secondary':\n        return 'toggle-secondary';\n      case 'accent':\n        return 'toggle-accent';\n      case 'info':\n        return 'toggle-info';\n      case 'success':\n        return 'toggle-success';\n      case 'warning':\n        return 'toggle-warning';\n      case 'error':\n        return 'toggle-error';\n      case 'ghost':\n        return 'toggle-ghost';\n      default:\n        return 'toggle';\n    }\n  }\n\n  private getSizeClass(): string {\n    switch (this.size()) {\n      case 'extraSmall':\n        return 'toggle-xs';\n      case 'small':\n        return 'toggle-sm';\n      case 'medium':\n        return 'toggle-md';\n      case 'large':\n        return 'toggle-lg';\n      case 'extraLarge':\n        return 'toggle-xl';\n      default:\n        return 'toggle';\n    }\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const input = this.switcherElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getColorClass());\n      }\n    });\n\n    effect(() => {\n      const input = this.switcherElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getSizeClass());\n      }\n    });\n  }\n\n  toggle(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.control().setValue(target.checked);\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\"><i class=\"fa-regular fa-circle-question\"></i> {{hint()}}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-switcher.mjs","sources":["../../projects/koala-ui/shared/components/input-field/switcher/switcher.ts","../../projects/koala-ui/shared/components/input-field/switcher/switcher.html","../../projects/koala-ui/shared/components/input-field/switcher/koalarx-ui-shared-components-input-field-switcher.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\nexport type SwitcherColor =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost';\n\nexport type SwitcherSize =\n  | 'extraSmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'extraLarge';\n\n@Component({\n  selector: 'kl-switcher',\n  templateUrl: './switcher.html',\n  imports: [ReactiveFormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Switcher extends InputFieldBase {\n  private readonly switcherElement =\n    viewChild<ElementRef<HTMLInputElement>>('inputSwitcher');\n\n  color = input<SwitcherColor>();\n  size = input<SwitcherSize>();\n\n  private getColorClass(): string {\n    switch (this.color()) {\n      case 'neutral':\n        return 'toggle-neutral';\n      case 'primary':\n        return 'toggle-primary';\n      case 'secondary':\n        return 'toggle-secondary';\n      case 'accent':\n        return 'toggle-accent';\n      case 'info':\n        return 'toggle-info';\n      case 'success':\n        return 'toggle-success';\n      case 'warning':\n        return 'toggle-warning';\n      case 'error':\n        return 'toggle-error';\n      case 'ghost':\n        return 'toggle-ghost';\n      default:\n        return 'toggle';\n    }\n  }\n\n  private getSizeClass(): string {\n    switch (this.size()) {\n      case 'extraSmall':\n        return 'toggle-xs';\n      case 'small':\n        return 'toggle-sm';\n      case 'medium':\n        return 'toggle-md';\n      case 'large':\n        return 'toggle-lg';\n      case 'extraLarge':\n        return 'toggle-xl';\n      default:\n        return 'toggle';\n    }\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const input = this.switcherElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getColorClass());\n      }\n    });\n\n    effect(() => {\n      const input = this.switcherElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getSizeClass());\n      }\n    });\n  }\n\n  toggle(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.control().setValue(target.checked);\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputSwitcher\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"toggle\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koalarx/ui",
-  "version": "21.1.6",
+  "version": "21.1.7",
   "peerDependencies": {
     "@angular/common": ">=21.0.0",
     "@angular/core": ">=21.0.0"

package/theme/form.css

@@ -36,14 +36,14 @@ button:focus {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.2rem 0 0.5rem;
-  color: var(--color-neutral-500);
-  font-size: var(--text-sm);
-  text-transform: uppercase;
+  opacity: 0.5;
+  padding: 0.3rem 0 0.5rem;
+  color: var(--color-neutral-700);
+  font-size: var(--text-xs);
 }
 
 .dark .hint-content {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-200);
 }
 
 kl-select .kl-select-container {