npm - @koalarx/ui - Versions diffs - 20.4.4 → 21.0.0 - Mend

@koalarx/ui 20.4.4 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/fesm2022/koalarx-ui-shared-components-code-viewer.mjs CHANGED Viewed

@@ -7,7 +7,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/plugins/line-highlight/prism-line-highlight';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import * as i0 from '@angular/core';
-import { inject, signal, input, booleanAttribute, linkedSignal, Component } from '@angular/core';
+import { inject, signal, input, booleanAttribute, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
 import { AppConfig } from '@koalarx/ui/core/config';
 import { Tooltip } from '@koalarx/ui/shared/directives';
 import * as i1 from 'ngx-markdown';
@@ -21,7 +21,7 @@ class CodeViewer {
     src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
     language = input('other', ...(ngDevMode ? [{ debugName: "language" }] : []));
     lineHighlight = input(...(ngDevMode ? [undefined, { debugName: "lineHighlight" }] : []));
-    lineNumbers = input(false, ...(ngDevMode ? [{ debugName: "lineNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    lineNumbers = input(false, { ...(ngDevMode ? { debugName: "lineNumbers" } : {}), transform: booleanAttribute });
     icon = linkedSignal(() => {
         const language = this.language();
         if (language) {
@@ -39,7 +39,7 @@ class CodeViewer {
             }
         }
         return 'fa-solid fa-code';
-    });
+    }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     clipboard(event) {
         this.content.set(event.replace(/^[^\n]*\n?/, '').replace(/`/g, ''));
     }
@@ -52,13 +52,13 @@ class CodeViewer {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CodeViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CodeViewer, isStandalone: true, selector: "kl-code-viewer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, lineHighlight: { classPropertyName: "lineHighlight", publicName: "lineHighlight", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n  <div class=\"flex items-center justify-between p-3\">\n    <span class=\"flex items-center gap-2\">\n      <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n        [class]=\"icon()\">\n      </i>\n      <span class=\"text-neutral-500\">{{ name() }}</span>\n    </span>\n\n    <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n      type=\"button\"\n      [tooltip]=\"copied()\n        ? translations.copiedToClipboard\n        : translations.copyToClipboard\"\n      tooltipPosition=\"left\"\n      (click)=\"copyCode()\">\n\n      @if (copied()) {\n        <i class=\"fa-solid fa-check\"></i>\n      } @else {\n        <i class=\"fa-regular fa-clipboard\"></i>\n      }\n    </button>\n  </div>\n\n  <markdown\n    [src]=\"src()\"\n    [disableSanitizer]=\"true\"\n    [lineNumbers]=\"lineNumbers()\"\n    lineHighlight\n    [line]=\"lineHighlight()\"\n    (load)=\"clipboard($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CodeViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CodeViewer, isStandalone: true, selector: "kl-code-viewer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, lineHighlight: { classPropertyName: "lineHighlight", publicName: "lineHighlight", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n  <div class=\"flex items-center justify-between p-3\">\n    <span class=\"flex items-center gap-2\">\n      <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n        [class]=\"icon()\">\n      </i>\n      <span class=\"text-neutral-500\">{{ name() }}</span>\n    </span>\n\n    <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n      type=\"button\"\n      [tooltip]=\"copied()\n        ? translations.copiedToClipboard\n        : translations.copyToClipboard\"\n      tooltipPosition=\"left\"\n      (click)=\"copyCode()\">\n\n      @if (copied()) {\n        <i class=\"fa-solid fa-check\"></i>\n      } @else {\n        <i class=\"fa-regular fa-clipboard\"></i>\n      }\n    </button>\n  </div>\n\n  <markdown\n    [src]=\"src()\"\n    [disableSanitizer]=\"true\"\n    [lineNumbers]=\"lineNumbers()\"\n    lineHighlight\n    [line]=\"lineHighlight()\"\n    (load)=\"clipboard($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CodeViewer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CodeViewer, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-code-viewer', imports: [MarkdownModule, Tooltip], template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n  <div class=\"flex items-center justify-between p-3\">\n    <span class=\"flex items-center gap-2\">\n      <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n        [class]=\"icon()\">\n      </i>\n      <span class=\"text-neutral-500\">{{ name() }}</span>\n    </span>\n\n    <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n      type=\"button\"\n      [tooltip]=\"copied()\n        ? translations.copiedToClipboard\n        : translations.copyToClipboard\"\n      tooltipPosition=\"left\"\n      (click)=\"copyCode()\">\n\n      @if (copied()) {\n        <i class=\"fa-solid fa-check\"></i>\n      } @else {\n        <i class=\"fa-regular fa-clipboard\"></i>\n      }\n    </button>\n  </div>\n\n  <markdown\n    [src]=\"src()\"\n    [disableSanitizer]=\"true\"\n    [lineNumbers]=\"lineNumbers()\"\n    lineHighlight\n    [line]=\"lineHighlight()\"\n    (load)=\"clipboard($event)\"\n  />\n</div>\n" }]
-        }] });
+            args: [{ selector: 'kl-code-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MarkdownModule, Tooltip], template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n  <div class=\"flex items-center justify-between p-3\">\n    <span class=\"flex items-center gap-2\">\n      <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n        [class]=\"icon()\">\n      </i>\n      <span class=\"text-neutral-500\">{{ name() }}</span>\n    </span>\n\n    <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n      type=\"button\"\n      [tooltip]=\"copied()\n        ? translations.copiedToClipboard\n        : translations.copyToClipboard\"\n      tooltipPosition=\"left\"\n      (click)=\"copyCode()\">\n\n      @if (copied()) {\n        <i class=\"fa-solid fa-check\"></i>\n      } @else {\n        <i class=\"fa-regular fa-clipboard\"></i>\n      }\n    </button>\n  </div>\n\n  <markdown\n    [src]=\"src()\"\n    [disableSanitizer]=\"true\"\n    [lineNumbers]=\"lineNumbers()\"\n    lineHighlight\n    [line]=\"lineHighlight()\"\n    (load)=\"clipboard($event)\"\n  />\n</div>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], lineHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineHighlight", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/koalarx-ui-shared-components-code-viewer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"koalarx-ui-shared-components-code-viewer.mjs","sources":["../../projects/koala-ui/shared/components/code-viewer/code-viewer.ts","../../projects/koala-ui/shared/components/code-viewer/code-viewer.html","../../projects/koala-ui/shared/components/code-viewer/koalarx-ui-shared-components-code-viewer.ts"],"sourcesContent":["import 'prismjs/prism';\n\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-markup';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/plugins/line-highlight/prism-line-highlight';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers';\n\nimport {\n booleanAttribute,\n Component,\n inject,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { MarkdownModule } from 'ngx-markdown';\n\nexport type CodeViewerLanguage =\n \| 'bash'\n \| 'typescript'\n \| 'html'\n \| 'css'\n \| 'json'\n \| 'other';\n\nexport interface CodeViewerConfig {\n label: string;\n code?: string;\n language?: CodeViewerLanguage;\n src?: string;\n checked?: boolean;\n lineHighlight?: string;\n}\n\n@Component({\n selector: 'kl-code-viewer',\n templateUrl: './code-viewer.html',\n imports: [MarkdownModule, Tooltip],\n})\nexport class CodeViewer {\n readonly translations = inject(AppConfig).translation.codeViewer;\n\n copied = signal(false);\n content = signal<string>('');\n\n name = input.required<string>();\n src = input.required<string>();\n language = input<CodeViewerLanguage>('other');\n lineHighlight = input<string>();\n lineNumbers = input(false, { transform: booleanAttribute });\n\n icon = linkedSignal(() => {\n const language = this.language();\n\n if (language) {\n switch (language) {\n case 'bash':\n return 'fa-solid fa-terminal p-1 text-[0.5rem]';\n case 'typescript':\n return 'fa-brands fa-angular py-0 px-[0.2rem] text-[1rem]';\n case 'html':\n return 'fa-brands fa-html5 py-[0.1rem] px-[0.2rem] text-[1rem]';\n case 'css':\n return 'fa-brands fa-css3 py-[0.1rem] px-[0.2rem] text-[1rem]';\n case 'json':\n return 'fa-regular fa-file-code py-[0.1rem] px-[0.2rem] text-[1rem]';\n }\n }\n\n return 'fa-solid fa-code';\n });\n\n clipboard(event: any) {\n this.content.set(event.replace(/^[^\\n]\\n?/, '').replace(/`/g, ''));\n }\n\n copyCode() {\n const code = this.content();\n\n if (code) {\n navigator.clipboard.writeText(code).then(() => {\n this.copied.set(true);\n setTimeout(() => this.copied.set(false), 2000);\n });\n }\n }\n}\n","<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n <div class=\"flex items-center justify-between p-3\">\n <span class=\"flex items-center gap-2\">\n <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n [class]=\"icon()\">\n </i>\n <span class=\"text-neutral-500\">{{ name() }}</span>\n </span>\n\n <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n type=\"button\"\n [tooltip]=\"copied()\n ? translations.copiedToClipboard\n : translations.copyToClipboard\"\n tooltipPosition=\"left\"\n (click)=\"copyCode()\">\n\n @if (copied()) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n <i class=\"fa-regular fa-clipboard\"></i>\n }\n </button>\n </div>\n\n <markdown\n [src]=\"src()\"\n [disableSanitizer]=\"true\"\n [lineNumbers]=\"lineNumbers()\"\n lineHighlight\n [line]=\"lineHighlight()\"\n (load)=\"clipboard($event)\"\n />\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;~~MA4Ca~~,UAAU,CAAA;IACZ,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU;AAEhE,IAAA,MAAM,GAAG,MAAM,CAAC,KAAK,kDAAC;AACtB,IAAA,OAAO,GAAG,MAAM,CAAS,EAAE,mDAAC;AAE5B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAC/B,IAAA,GAAG,GAAG,KAAK,CAAC,QAAQ,8CAAU;AAC9B,IAAA,QAAQ,GAAG,KAAK,CAAqB,OAAO,oDAAC;IAC7C,aAAa,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;~~AAC~~/B,~~IAAA,~~WAAW,GAAG,KAAK,CAAC,KAAK~~,+CAAI~~,SAAS,EAAE,gBAAgB,EAAA,~~CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC~~;AAE3D,IAAA,IAAI,GAAG,YAAY,CAAC,MAAK;AACvB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;QAEhC,IAAI,QAAQ,EAAE;YACZ,QAAQ,QAAQ;AACd,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,wCAAwC;AACjD,gBAAA,KAAK,YAAY;AACf,oBAAA,OAAO,mDAAmD;AAC5D,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,wDAAwD;AACjE,gBAAA,KAAK,KAAK;AACR,oBAAA,OAAO,uDAAuD;AAChE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,6DAA6D;;;AAI1E,QAAA,OAAO,kBAAkB;AAC3B,KAAC,~~CAAC~~;AAEF,IAAA,SAAS,CAAC,KAAU,EAAA;QAClB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;;IAGrE,QAAQ,GAAA;AACN,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;QAE3B,IAAI,IAAI,EAAE;YACR,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAK;AAC5C,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,gBAAA,UAAU,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAChD,aAAC,CAAC;;;uGA5CK,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EC5CvB~~,6jCAkCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EDQY~~,cAAc,qdAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAEtB,UAAU,EAAA,UAAA,EAAA,CAAA;~~kBALtB~~,SAAS~~;AACE~~,~~YAAA~~,~~IAAA,~~EAAA,~~CAAA~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~gBAAgB~~,~~EAAA~~,~~OAAA,EAEjB,~~CAAC,cAAc,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,6jCAAA,EAAA;;;~~AE1CpC~~;;AAEG;;;;"}
1	+ {"version":3,"file":"koalarx-ui-shared-components-code-viewer.mjs","sources":["../../projects/koala-ui/shared/components/code-viewer/code-viewer.ts","../../projects/koala-ui/shared/components/code-viewer/code-viewer.html","../../projects/koala-ui/shared/components/code-viewer/koalarx-ui-shared-components-code-viewer.ts"],"sourcesContent":["import 'prismjs/prism';\n\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-markup';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/plugins/line-highlight/prism-line-highlight';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n input,\n linkedSignal,\n signal,\n} from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { MarkdownModule } from 'ngx-markdown';\n\nexport type CodeViewerLanguage =\n \| 'bash'\n \| 'typescript'\n \| 'html'\n \| 'css'\n \| 'json'\n \| 'other';\n\nexport interface CodeViewerConfig {\n label: string;\n code?: string;\n language?: CodeViewerLanguage;\n src?: string;\n checked?: boolean;\n lineHighlight?: string;\n}\n\n@Component({\n selector: 'kl-code-viewer',\n templateUrl: './code-viewer.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MarkdownModule, Tooltip],\n})\nexport class CodeViewer {\n readonly translations = inject(AppConfig).translation.codeViewer;\n\n copied = signal(false);\n content = signal<string>('');\n\n name = input.required<string>();\n src = input.required<string>();\n language = input<CodeViewerLanguage>('other');\n lineHighlight = input<string>();\n lineNumbers = input(false, { transform: booleanAttribute });\n\n icon = linkedSignal(() => {\n const language = this.language();\n\n if (language) {\n switch (language) {\n case 'bash':\n return 'fa-solid fa-terminal p-1 text-[0.5rem]';\n case 'typescript':\n return 'fa-brands fa-angular py-0 px-[0.2rem] text-[1rem]';\n case 'html':\n return 'fa-brands fa-html5 py-[0.1rem] px-[0.2rem] text-[1rem]';\n case 'css':\n return 'fa-brands fa-css3 py-[0.1rem] px-[0.2rem] text-[1rem]';\n case 'json':\n return 'fa-regular fa-file-code py-[0.1rem] px-[0.2rem] text-[1rem]';\n }\n }\n\n return 'fa-solid fa-code';\n });\n\n clipboard(event: any) {\n this.content.set(event.replace(/^[^\\n]\\n?/, '').replace(/`/g, ''));\n }\n\n copyCode() {\n const code = this.content();\n\n if (code) {\n navigator.clipboard.writeText(code).then(() => {\n this.copied.set(true);\n setTimeout(() => this.copied.set(false), 2000);\n });\n }\n }\n}\n","<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n <div class=\"flex items-center justify-between p-3\">\n <span class=\"flex items-center gap-2\">\n <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n [class]=\"icon()\">\n </i>\n <span class=\"text-neutral-500\">{{ name() }}</span>\n </span>\n\n <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n type=\"button\"\n [tooltip]=\"copied()\n ? translations.copiedToClipboard\n : translations.copyToClipboard\"\n tooltipPosition=\"left\"\n (click)=\"copyCode()\">\n\n @if (copied()) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n <i class=\"fa-regular fa-clipboard\"></i>\n }\n </button>\n </div>\n\n <markdown\n [src]=\"src()\"\n [disableSanitizer]=\"true\"\n [lineNumbers]=\"lineNumbers()\"\n lineHighlight\n [line]=\"lineHighlight()\"\n (load)=\"clipboard($event)\"\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-collapse.mjs CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 class Collapse {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Collapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: Collapse, isStandalone: true, selector: "kl-collapse", ngImport: i0, template: "<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n  <input type=\"checkbox\" />\n  <div class=\"collapse-title font-semibold\">\n    <ng-content select=\"[title]\" />\n  </div>\n  <div class=\"collapse-content text-sm\">\n    <ng-content select=\"[content]\" />\n  </div>\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Collapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Collapse, isStandalone: true, selector: "kl-collapse", ngImport: i0, template: "<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n  <input type=\"checkbox\" />\n  <div class=\"collapse-title font-semibold\">\n    <ng-content select=\"[title]\" />\n  </div>\n  <div class=\"collapse-content text-sm\">\n    <ng-content select=\"[content]\" />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Collapse, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Collapse, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-collapse', template: "<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n  <input type=\"checkbox\" />\n  <div class=\"collapse-title font-semibold\">\n    <ng-content select=\"[title]\" />\n  </div>\n  <div class=\"collapse-content text-sm\">\n    <ng-content select=\"[content]\" />\n  </div>\n</div>\n" }]
+            args: [{ selector: 'kl-collapse', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n  <input type=\"checkbox\" />\n  <div class=\"collapse-title font-semibold\">\n    <ng-content select=\"[title]\" />\n  </div>\n  <div class=\"collapse-content text-sm\">\n    <ng-content select=\"[content]\" />\n  </div>\n</div>\n" }]
         }] });
 /**

package/fesm2022/koalarx-ui-shared-components-collapse.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"koalarx-ui-shared-components-collapse.mjs","sources":["../../projects/koala-ui/shared/components/collapse/collapse.ts","../../projects/koala-ui/shared/components/collapse/collapse.html","../../projects/koala-ui/shared/components/collapse/koalarx-ui-shared-components-collapse.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'kl-collapse',\n templateUrl: './collapse.html',\n})\nexport class Collapse {}\n","<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n <input type=\"checkbox\" />\n <div class=\"collapse-title font-semibold\">\n <ng-content select=\"[title]\" />\n </div>\n <div class=\"collapse-content text-sm\">\n <ng-content select=\"[content]\" />\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;~~MAMa~~,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,~~uECNrB~~,iUASA,EAAA,CAAA;;~~2FDHa~~,QAAQ,EAAA,UAAA,EAAA,CAAA;~~kBAJpB~~,SAAS;+BACE,aAAa,EAAA,QAAA,EAAA,iUAAA,EAAA;;;~~AEHzB~~;;AAEG;;;;"}
1	+ {"version":3,"file":"koalarx-ui-shared-components-collapse.mjs","sources":["../../projects/koala-ui/shared/components/collapse/collapse.ts","../../projects/koala-ui/shared/components/collapse/collapse.html","../../projects/koala-ui/shared/components/collapse/koalarx-ui-shared-components-collapse.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kl-collapse',\n templateUrl: './collapse.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Collapse {}\n","<div class=\"collapse bg-base-100 border border-neutral-500 dark:border-neutral-700\">\n <input type=\"checkbox\" />\n <div class=\"collapse-title font-semibold\">\n <ng-content select=\"[title]\" />\n </div>\n <div class=\"collapse-content text-sm\">\n <ng-content select=\"[content]\" />\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MAOa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,uECPrB,iUASA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDFa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,aAAa,EAAA,eAAA,EAEN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iUAAA,EAAA;;;AELjD;;AAEG;;;;"}

package/fesm2022/koalarx-ui-shared-components-confirm.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable } from '@angular/core';
+import { inject, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
 import { AppConfig } from '@koalarx/ui/core/config';
 import { DialogRef, DIALOG_DATA, DialogContent, Dialog } from '@koalarx/ui/shared/components/dialog';
 import { Button } from '@koalarx/ui/shared/directives';
@@ -11,12 +11,12 @@ class ConfirmContent {
     close(type) {
         this.dialogRef.dismiss({ type });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ConfirmContent, isStandalone: true, selector: "kl-confirm-content", ngImport: i0, template: "<kl-dialog-content>\n  <div content>\n    <p class=\"text-center\" [innerHTML]=\"message\"></p>\n    <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n  </div>\n\n  <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n    <button klButton color=\"error\" (click)=\"close('no')\">\n      {{translations.btnLabelNo}}\n    </button>\n    <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n      {{translations.btnLabelYes}}\n    </button>\n  </div>\n</kl-dialog-content>\n", dependencies: [{ kind: "component", type: DialogContent, selector: "kl-dialog-content" }, { kind: "directive", type: Button, selector: "button[klButton], a[klButton]", inputs: ["color", "type", "circle", "outline", "soft", "showLoader", "disabled", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmContent, isStandalone: true, selector: "kl-confirm-content", ngImport: i0, template: "<kl-dialog-content>\n  <div content>\n    <p class=\"text-center\" [innerHTML]=\"message\"></p>\n    <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n  </div>\n\n  <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n    <button klButton color=\"error\" (click)=\"close('no')\">\n      {{translations.btnLabelNo}}\n    </button>\n    <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n      {{translations.btnLabelYes}}\n    </button>\n  </div>\n</kl-dialog-content>\n", dependencies: [{ kind: "component", type: DialogContent, selector: "kl-dialog-content" }, { 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: "20.1.6", ngImport: i0, type: ConfirmContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmContent, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-confirm-content', imports: [DialogContent, Button], template: "<kl-dialog-content>\n  <div content>\n    <p class=\"text-center\" [innerHTML]=\"message\"></p>\n    <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n  </div>\n\n  <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n    <button klButton color=\"error\" (click)=\"close('no')\">\n      {{translations.btnLabelNo}}\n    </button>\n    <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n      {{translations.btnLabelYes}}\n    </button>\n  </div>\n</kl-dialog-content>\n" }]
+            args: [{ selector: 'kl-confirm-content', imports: [DialogContent, Button], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kl-dialog-content>\n  <div content>\n    <p class=\"text-center\" [innerHTML]=\"message\"></p>\n    <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n  </div>\n\n  <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n    <button klButton color=\"error\" (click)=\"close('no')\">\n      {{translations.btnLabelNo}}\n    </button>\n    <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n      {{translations.btnLabelYes}}\n    </button>\n  </div>\n</kl-dialog-content>\n" }]
         }] });
 class Confirm {
@@ -37,10 +37,10 @@ class Confirm {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Confirm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Confirm, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Confirm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Confirm, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Confirm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Confirm, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/fesm2022/koalarx-ui-shared-components-confirm.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"koalarx-ui-shared-components-confirm.mjs","sources":["../../projects/koala-ui/shared/components/confirm/confirm-content.ts","../../projects/koala-ui/shared/components/confirm/confirm-content.html","../../projects/koala-ui/shared/components/confirm/confirm.ts","../../projects/koala-ui/shared/components/confirm/koalarx-ui-shared-components-confirm.ts"],"sourcesContent":["import { Component, inject } from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport {\n DIALOG_DATA,\n DialogContent,\n DialogRef,\n} from '@koalarx/ui/shared/components/dialog';\nimport { Button } from '@koalarx/ui/shared/directives';\n\n@Component({\n selector: 'kl-confirm-content',\n templateUrl: './confirm-content.html',\n imports: [DialogContent, Button],\n})\nexport class ConfirmContent {\n readonly translations = inject(AppConfig).translation.confirm;\n private readonly dialogRef = inject(DialogRef);\n\n message = inject<string>(DIALOG_DATA);\n\n close(type: 'yes' \| 'no') {\n this.dialogRef.dismiss({ type });\n }\n}\n","<kl-dialog-content>\n <div content>\n <p class=\"text-center\" [innerHTML]=\"message\"></p>\n <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n </div>\n\n <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n <button klButton color=\"error\" (click)=\"close('no')\">\n {{translations.btnLabelNo}}\n </button>\n <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n {{translations.btnLabelYes}}\n </button>\n </div>\n</kl-dialog-content>\n","import { inject, Injectable } from '@angular/core';\nimport { Dialog } from '@koalarx/ui/shared/components/dialog';\nimport { ConfirmContent } from './confirm-content';\n\nexport interface ConfirmConfig {\n message: string;\n yesCallback?: () => void;\n noCallback?: () => void;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Confirm {\n private readonly dialog = inject(Dialog);\n\n open(config: ConfirmConfig) {\n this.dialog.open(ConfirmContent, {\n data: config.message,\n afterClosed: {\n trigger: {},\n callback: (confirm: { type: 'yes' \| 'no' }) => {\n if (confirm.type === 'yes' && config.yesCallback) {\n config.yesCallback();\n } else if (confirm.type === 'no' && config.noCallback) {\n config.noCallback();\n }\n },\n },\n });\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;~~MAca~~,cAAc,CAAA;IAChB,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,OAAO;AAC5C,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE9C,IAAA,OAAO,GAAG,MAAM,CAAS,WAAW,CAAC;AAErC,IAAA,KAAK,CAAC,IAAkB,EAAA;QACtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;;uGAPvB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECd3B~~,6gBAeA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,aAAa,8DAAE,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,~~CAAA;;2FAEpB~~,~~cAAc,~~EAAA,~~UAAA,~~EAAA,CAAA~~;kBAL1B~~,~~SAAS;AACE~~,~~YAAA~~,~~IAAA~~,EAAA,CAAA,EAAA,~~QAAA~~,EAAA,oBAAoB,EAAA,OAAA,EAErB,CAAC,aAAa,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,6gBAAA,EAAA;;;~~MEDrB~~,OAAO,CAAA;AACD,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAExC,IAAA,IAAI,CAAC,MAAqB,EAAA;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE;YAC/B,IAAI,EAAE,MAAM,CAAC,OAAO;AACpB,YAAA,WAAW,EAAE;AACX,gBAAA,OAAO,EAAE,EAAE;AACX,gBAAA,QAAQ,EAAE,CAAC,OAA+B,KAAI;oBAC5C,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,IAAI,MAAM,CAAC,WAAW,EAAE;wBAChD,MAAM,CAAC,WAAW,EAAE;;yBACf,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,CAAC,UAAU,EAAE;wBACrD,MAAM,CAAC,UAAU,EAAE;;iBAEtB;AACF,aAAA;AACF,SAAA,CAAC;;uGAhBO,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAP,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,OAAO,cADM,MAAM,EAAA,CAAA;;2FACnB,OAAO,EAAA,UAAA,EAAA,CAAA;kBADnB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACVlC;;AAEG;;;;"}
1	+ {"version":3,"file":"koalarx-ui-shared-components-confirm.mjs","sources":["../../projects/koala-ui/shared/components/confirm/confirm-content.ts","../../projects/koala-ui/shared/components/confirm/confirm-content.html","../../projects/koala-ui/shared/components/confirm/confirm.ts","../../projects/koala-ui/shared/components/confirm/koalarx-ui-shared-components-confirm.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport {\n DIALOG_DATA,\n DialogContent,\n DialogRef,\n} from '@koalarx/ui/shared/components/dialog';\nimport { Button } from '@koalarx/ui/shared/directives';\n\n@Component({\n selector: 'kl-confirm-content',\n templateUrl: './confirm-content.html',\n imports: [DialogContent, Button],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ConfirmContent {\n readonly translations = inject(AppConfig).translation.confirm;\n private readonly dialogRef = inject(DialogRef);\n\n message = inject<string>(DIALOG_DATA);\n\n close(type: 'yes' \| 'no') {\n this.dialogRef.dismiss({ type });\n }\n}\n","<kl-dialog-content>\n <div content>\n <p class=\"text-center\" [innerHTML]=\"message\"></p>\n <p class=\"text-center\">{{translations.askAreYouSureMessage}}</p>\n </div>\n\n <div class=\"flex items-center justify-center gap-2 w-full\" actions>\n <button klButton color=\"error\" (click)=\"close('no')\">\n {{translations.btnLabelNo}}\n </button>\n <button klButton color=\"accent\" outline (click)=\"close('yes')\">\n {{translations.btnLabelYes}}\n </button>\n </div>\n</kl-dialog-content>\n","import { inject, Injectable } from '@angular/core';\nimport { Dialog } from '@koalarx/ui/shared/components/dialog';\nimport { ConfirmContent } from './confirm-content';\n\nexport interface ConfirmConfig {\n message: string;\n yesCallback?: () => void;\n noCallback?: () => void;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Confirm {\n private readonly dialog = inject(Dialog);\n\n open(config: ConfirmConfig) {\n this.dialog.open(ConfirmContent, {\n data: config.message,\n afterClosed: {\n trigger: {},\n callback: (confirm: { type: 'yes' \| 'no' }) => {\n if (confirm.type === 'yes' && config.yesCallback) {\n config.yesCallback();\n } else if (confirm.type === 'no' && config.noCallback) {\n config.noCallback();\n }\n },\n },\n });\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;MAea,cAAc,CAAA;IAChB,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,OAAO;AAC5C,IAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;AAE9C,IAAA,OAAO,GAAG,MAAM,CAAS,WAAW,CAAC;AAErC,IAAA,KAAK,CAAC,IAAkB,EAAA;QACtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;;uGAPvB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf3B,6gBAeA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,aAAa,8DAAE,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGpB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;+BACE,oBAAoB,EAAA,OAAA,EAErB,CAAC,aAAa,EAAE,MAAM,CAAC,EAAA,eAAA,EACf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6gBAAA,EAAA;;;MEFpC,OAAO,CAAA;AACD,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AAExC,IAAA,IAAI,CAAC,MAAqB,EAAA;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE;YAC/B,IAAI,EAAE,MAAM,CAAC,OAAO;AACpB,YAAA,WAAW,EAAE;AACX,gBAAA,OAAO,EAAE,EAAE;AACX,gBAAA,QAAQ,EAAE,CAAC,OAA+B,KAAI;oBAC5C,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,IAAI,MAAM,CAAC,WAAW,EAAE;wBAChD,MAAM,CAAC,WAAW,EAAE;;yBACf,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,CAAC,UAAU,EAAE;wBACrD,MAAM,CAAC,UAAU,EAAE;;iBAEtB;AACF,aAAA;AACF,SAAA,CAAC;;uGAhBO,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAP,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,OAAO,cADM,MAAM,EAAA,CAAA;;2FACnB,OAAO,EAAA,UAAA,EAAA,CAAA;kBADnB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACVlC;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, booleanAttribute, computed, model } from '@angular/core';
+import { input, output, viewChild, signal, effect, Component, inject, ElementRef, Directive, Injectable, ChangeDetectionStrategy, booleanAttribute, computed, model } from '@angular/core';
 import { Tooltip, Button } from '@koalarx/ui/shared/directives';
 import { AppConfig } from '@koalarx/ui/core/config';
 import * as i1 from '@angular/forms';
@@ -64,13 +64,13 @@ class SortHeaderColumn {
             columnElement.classList.remove('ordered-column');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SortHeaderColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SortHeaderColumn, isStandalone: true, selector: "kl-sort-header-column", inputs: { orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, defaultDirection: { classPropertyName: "defaultDirection", publicName: "defaultDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortable: "sortable" }, viewQueries: [{ propertyName: "elOrderedColumn", first: true, predicate: ["orderedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortHeaderColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SortHeaderColumn, isStandalone: true, selector: "kl-sort-header-column", inputs: { orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: true, isRequired: true, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, defaultDirection: { classPropertyName: "defaultDirection", publicName: "defaultDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortable: "sortable" }, viewQueries: [{ propertyName: "elOrderedColumn", first: true, predicate: ["orderedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SortHeaderColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortHeaderColumn, decorators: [{
             type: Component,
             args: [{ selector: 'kl-sort-header-column', template: "<div #orderedColumn [style]=\"style()\" class=\"flex items-center justify-start gap-1 py-2 px-3 cursor-pointer\"\n  [class.not-ordered]=\"direction() === null\"\n  [class.asc]=\"direction() === 'asc'\"\n  [class.desc]=\"direction() === 'desc'\"\n  (click)=\"sort()\">\n\n  @switch (direction()) {\n    @case ('asc') {\n      <i class=\"fa-solid fa-arrow-down-short-wide\"></i>\n    }\n    @case ('desc') {\n      <i class=\"fa-solid fa-arrow-down-wide-short\"></i>\n    }\n    @default {\n      <i class=\"fa-solid fa-sort\"></i>\n    }\n  }\n\n  <ng-content />\n</div>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { orderBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderBy", required: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], defaultDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultDirection", required: false }] }], sortable: [{ type: i0.Output, args: ["sortable"] }], elOrderedColumn: [{ type: i0.ViewChild, args: ['orderedColumn', { isSignal: true }] }] } });
 class SortedItem {
     elementRef = inject((ElementRef));
@@ -88,13 +88,13 @@ class SortedItem {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SortedItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: SortedItem, isStandalone: true, selector: "td[klSortedItem]", inputs: { klSortedItem: { classPropertyName: "klSortedItem", publicName: "klSortedItem", isSignal: true, isRequired: true, transformFunction: null }, sortedPropName: { classPropertyName: "sortedPropName", publicName: "sortedPropName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortedItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: SortedItem, isStandalone: true, selector: "td[klSortedItem]", inputs: { klSortedItem: { classPropertyName: "klSortedItem", publicName: "klSortedItem", isSignal: true, isRequired: true, transformFunction: null }, sortedPropName: { classPropertyName: "sortedPropName", publicName: "sortedPropName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SortedItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortedItem, decorators: [{
             type: Directive,
             args: [{ selector: 'td[klSortedItem]' }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { klSortedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "klSortedItem", required: true }] }], sortedPropName: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortedPropName", required: true }] }] } });
 class DatatableFilter {
     _payload = signal({}, ...(ngDevMode ? [{ debugName: "_payload" }] : []));
@@ -136,10 +136,10 @@ class DatatableFilter {
         this._clearFilter.set(true);
         setTimeout(() => this._clearFilter.set(false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DatatableFilter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DatatableFilter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatatableFilter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatatableFilter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DatatableFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatatableFilter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
@@ -169,10 +169,10 @@ class FilterFactory {
             return acc;
         }, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterFactory });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterFactory });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterFactory, decorators: [{
             type: Injectable
         }] });
@@ -195,13 +195,13 @@ class Filter {
     add() {
         this.addFilter.emit(this.datatableFilter.filters());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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"] }] });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Filter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Filter, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-filter', providers: [DatatableFilter], imports: [Tooltip], template: "@if (datatableFilter.filters().length > 0) {\n  <div class=\"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" }]
-        }], ctorParameters: () => [] });
+            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" }]
+        }], 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 {
     sideWindow = inject(SideWindow);
@@ -211,7 +211,7 @@ class Datatable {
     loadMoreBtnColor = input('accent', ...(ngDevMode ? [{ debugName: "loadMoreBtnColor" }] : []));
     filterBtnColor = input('primary', ...(ngDevMode ? [{ debugName: "filterBtnColor" }] : []));
     componentFilter = input(...(ngDevMode ? [undefined, { debugName: "componentFilter" }] : []));
-    withPaginator = input(false, ...(ngDevMode ? [{ debugName: "withPaginator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    withPaginator = input(false, { ...(ngDevMode ? { debugName: "withPaginator" } : {}), transform: booleanAttribute });
     currentPage = computed(() => this.config().currentPage, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
     totalItems = computed(() => this.config().totalItems, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
     totalItemsOnPage = computed(() => this.config().totalItemsOnPage, ...(ngDevMode ? [{ debugName: "totalItemsOnPage" }] : []));
@@ -258,13 +258,13 @@ class Datatable {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Datatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60 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-[1.5rem]\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n\n      <div class=\"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"] }] });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Datatable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Datatable, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-datatable', 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-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60 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-[1.5rem]\" [(ngModel)]=\"pageSize\">\n            @for (item of pageSizes; track $index) {\n              <option [value]=\"item\">{{ item }}</option>\n            }\n          </select>\n        </span>\n        <span class=\"opacity-60\">|</span>\n        <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n      </div>\n\n      <div class=\"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: () => [] });
+            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" }]
+        }], 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"] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +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 filters.forEach((filter) => {\n this._payload.update((current) => {\n return {\n ...current,\n [filter.propName]: filter.value,\n };\n });\n });\n });\n }\n\n get payload() {\n return this._payload.asReadonly();\n }\n\n get filters() {\n return this._filters.asReadonly();\n }\n\n 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 return 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 { Component, effect, inject, input, output } from '@angular/core';\nimport { Tooltip } from '@koalarx/ui/shared/directives';\nimport { DatatableFilter, FilterData } from './datatable-filter';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\n@Component({\n selector: 'kl-filter',\n templateUrl: './filter.html',\n providers: [DatatableFilter],\n imports: [Tooltip],\n})\nexport class Filter {\n readonly translations = 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 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 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-[1.5rem] w-auto\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">\|</span>\n <span class=\"opacity-60 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-[1.5rem]\" [(ngModel)]=\"pageSize\">\n @for (item of pageSizes; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </span>\n <span class=\"opacity-60\">\|</span>\n <span class=\"opacity-60\">{{totalItemsOnPage()}} de {{totalItems()}}</span>\n </div>\n\n <div class=\"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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"}
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 filters.forEach((filter) => {\n this._payload.update((current) => {\n return {\n ...current,\n [filter.propName]: filter.value,\n };\n });\n });\n });\n }\n\n get payload() {\n return this._payload.asReadonly();\n }\n\n get filters() {\n return this._filters.asReadonly();\n }\n\n 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 return 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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"}