@koalarx/ui 20.4.4 → 21.0.1

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

@@ -12,13 +12,13 @@ class DialogContent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: DialogContent, isStandalone: true, selector: "kl-dialog-content", viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog #dialog class=\"modal\">\n  <div class=\"modal-box bg-base-200 border-4 border-neutral-200 dark:border-neutral-900 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: DialogContent, isStandalone: true, selector: "kl-dialog-content", viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog #dialog class=\"modal\">\n  <div class=\"modal-box bg-base-200 border-4 border-neutral-200 dark:border-neutral-900 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DialogContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogContent, decorators: [{
             type: Component,
             args: [{ selector: 'kl-dialog-content', template: "<dialog #dialog class=\"modal\">\n  <div class=\"modal-box bg-base-200 border-4 border-neutral-200 dark:border-neutral-900 rounded-lg shadow-sm\">\n    <ng-content select=\"[header]\" />\n    <ng-content select=\"[content]\" />\n\n    <div class=\"modal-action\">\n      <ng-content select=\"[actions]\" />\n    </div>\n  </div>\n</dialog>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { dialogElement: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
 
 const DIALOG_CONFIG = new InjectionToken('DialogConfig');
 const DIALOG_DATA = new InjectionToken('DialogData');
@@ -84,10 +84,10 @@ class Dialog {
             componentRef.changeDetectorRef.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Dialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -104,10 +104,10 @@ class DialogRef {
             this.afterCloseTrigger(afterCloseTrigger);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DialogRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DialogRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogRef });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DialogRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogRef, decorators: [{
             type: Injectable
         }] });
 

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

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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { viewChild, effect, Component } from '@angular/core';
+import { viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { randomString, KlString } from '@koalarx/utils/KlString';
 
 class Dropdown {
@@ -35,13 +35,13 @@ class Dropdown {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: Dropdown, isStandalone: true, selector: "kl-dropdown", viewQueries: [{ propertyName: "dropdownTriggerElement", first: true, predicate: ["dropdownTrigger"], descendants: true, isSignal: true }, { propertyName: "dropdownContentElement", first: true, predicate: ["dropdownContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: Dropdown, isStandalone: true, selector: "kl-dropdown", viewQueries: [{ propertyName: "dropdownTriggerElement", first: true, predicate: ["dropdownTrigger"], descendants: true, isSignal: true }, { propertyName: "dropdownContentElement", first: true, predicate: ["dropdownContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Dropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-dropdown', template: "<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'kl-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { dropdownTriggerElement: [{ type: i0.ViewChild, args: ['dropdownTrigger', { isSignal: true }] }], dropdownContentElement: [{ type: i0.ViewChild, args: ['dropdownContent', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-dropdown.mjs","sources":["../../projects/koala-ui/shared/components/dropdown/dropdown.ts","../../projects/koala-ui/shared/components/dropdown/dropdown.html","../../projects/koala-ui/shared/components/dropdown/koalarx-ui-shared-components-dropdown.ts"],"sourcesContent":["import { Component, effect, ElementRef, viewChild } from '@angular/core';\nimport { KlString, randomString } from '@koalarx/utils/KlString';\n\n@Component({\n  selector: 'kl-dropdown',\n  templateUrl: './dropdown.html',\n})\nexport class Dropdown {\n  private readonly dropdownTriggerElement =\n    viewChild<ElementRef<HTMLButtonElement>>('dropdownTrigger');\n  private readonly dropdownContentElement =\n    viewChild<ElementRef<HTMLDivElement>>('dropdownContent');\n\n  id = randomString(10, { numbers: true, uppercase: false, lowercase: false });\n\n  private readonly anchorName = new KlString('--anchor-').concat(this.id);\n\n  constructor() {\n    effect(() => {\n      const triggerElement = this.dropdownTriggerElement()?.nativeElement;\n      const contentElement = this.dropdownContentElement()?.nativeElement;\n\n      if (triggerElement && contentElement) {\n        triggerElement.style = `anchor-name: ${this.anchorName};`;\n        contentElement.style = `position-anchor: ${this.anchorName};`;\n      }\n    });\n  }\n\n  ajustPosition() {\n    const triggerElement = this.dropdownTriggerElement()?.nativeElement;\n    const contentElement = this.dropdownContentElement()?.nativeElement;\n\n    if (triggerElement && contentElement) {\n      setTimeout(() => {\n        const position = contentElement.getBoundingClientRect();\n        const screenWidth = document.body.clientWidth;\n        const screenHeight = document.body.clientHeight;\n\n        if (position.right > screenWidth) {\n          contentElement.classList.add('dropdown-left');\n          contentElement.classList.add('dropdown-start');\n        }\n\n        if (position.bottom > screenHeight) {\n          contentElement.classList.add('dropdown-top');\n        }\n      });\n    }\n  }\n}\n","<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,QAAQ,CAAA;AACF,IAAA,sBAAsB,GACrC,SAAS,CAAgC,iBAAiB,kEAAC;AAC5C,IAAA,sBAAsB,GACrC,SAAS,CAA6B,iBAAiB,kEAAC;AAE1D,IAAA,EAAE,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAE3D,IAAA,UAAU,GAAG,IAAI,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;YACnE,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;AAEnE,YAAA,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,KAAK,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,UAAU,GAAG;gBACzD,cAAc,CAAC,KAAK,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,UAAU,GAAG;;AAEjE,SAAC,CAAC;;IAGJ,aAAa,GAAA;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;QACnE,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;AAEnE,QAAA,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,UAAU,CAAC,MAAK;AACd,gBAAA,MAAM,QAAQ,GAAG,cAAc,CAAC,qBAAqB,EAAE;AACvD,gBAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW;AAC7C,gBAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY;AAE/C,gBAAA,IAAI,QAAQ,CAAC,KAAK,GAAG,WAAW,EAAE;AAChC,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;AAC7C,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC;;AAGhD,gBAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,YAAY,EAAE;AAClC,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;AAEhD,aAAC,CAAC;;;uGAxCK,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,8UCPrB,6dAeA,EAAA,CAAA;;2FDRa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAJpB,SAAS;+BACE,aAAa,EAAA,QAAA,EAAA,6dAAA,EAAA;;;AEJzB;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-dropdown.mjs","sources":["../../projects/koala-ui/shared/components/dropdown/dropdown.ts","../../projects/koala-ui/shared/components/dropdown/dropdown.html","../../projects/koala-ui/shared/components/dropdown/koalarx-ui-shared-components-dropdown.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  viewChild,\n} from '@angular/core';\nimport { KlString, randomString } from '@koalarx/utils/KlString';\n\n@Component({\n  selector: 'kl-dropdown',\n  templateUrl: './dropdown.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Dropdown {\n  private readonly dropdownTriggerElement =\n    viewChild<ElementRef<HTMLButtonElement>>('dropdownTrigger');\n  private readonly dropdownContentElement =\n    viewChild<ElementRef<HTMLDivElement>>('dropdownContent');\n\n  id = randomString(10, { numbers: true, uppercase: false, lowercase: false });\n\n  private readonly anchorName = new KlString('--anchor-').concat(this.id);\n\n  constructor() {\n    effect(() => {\n      const triggerElement = this.dropdownTriggerElement()?.nativeElement;\n      const contentElement = this.dropdownContentElement()?.nativeElement;\n\n      if (triggerElement && contentElement) {\n        triggerElement.style = `anchor-name: ${this.anchorName};`;\n        contentElement.style = `position-anchor: ${this.anchorName};`;\n      }\n    });\n  }\n\n  ajustPosition() {\n    const triggerElement = this.dropdownTriggerElement()?.nativeElement;\n    const contentElement = this.dropdownContentElement()?.nativeElement;\n\n    if (triggerElement && contentElement) {\n      setTimeout(() => {\n        const position = contentElement.getBoundingClientRect();\n        const screenWidth = document.body.clientWidth;\n        const screenHeight = document.body.clientHeight;\n\n        if (position.right > screenWidth) {\n          contentElement.classList.add('dropdown-left');\n          contentElement.classList.add('dropdown-start');\n        }\n\n        if (position.bottom > screenHeight) {\n          contentElement.classList.add('dropdown-top');\n        }\n      });\n    }\n  }\n}\n","<button #dropdownTrigger\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.popovertarget]=\"id\"\n  (click)=\"ajustPosition()\">\n  <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n  tabindex=\"0\"\n  popover\n  [id]=\"id\"\n  class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n  <ng-content select=\"[options]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAca,QAAQ,CAAA;AACF,IAAA,sBAAsB,GACrC,SAAS,CAAgC,iBAAiB,kEAAC;AAC5C,IAAA,sBAAsB,GACrC,SAAS,CAA6B,iBAAiB,kEAAC;AAE1D,IAAA,EAAE,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAE3D,IAAA,UAAU,GAAG,IAAI,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvE,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;YACnE,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;AAEnE,YAAA,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,KAAK,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,UAAU,GAAG;gBACzD,cAAc,CAAC,KAAK,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,UAAU,GAAG;;AAEjE,SAAC,CAAC;;IAGJ,aAAa,GAAA;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;QACnE,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,EAAE,aAAa;AAEnE,QAAA,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,UAAU,CAAC,MAAK;AACd,gBAAA,MAAM,QAAQ,GAAG,cAAc,CAAC,qBAAqB,EAAE;AACvD,gBAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW;AAC7C,gBAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY;AAE/C,gBAAA,IAAI,QAAQ,CAAC,KAAK,GAAG,WAAW,EAAE;AAChC,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;AAC7C,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC;;AAGhD,gBAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,YAAY,EAAE;AAClC,oBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;AAEhD,aAAC,CAAC;;;uGAxCK,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,8UCdrB,6dAeA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDDa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,aAAa,EAAA,eAAA,EAEN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6dAAA,EAAA;AAIJ,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,iBAAiB,gFAEpB,iBAAiB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AElB3D;;AAEG;;;;"}

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 class FieldGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: FieldGroup, isStandalone: true, selector: "kl-field-group", ngImport: i0, template: "<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FieldGroup, isStandalone: true, selector: "kl-field-group", ngImport: i0, template: "<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FieldGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-field-group', template: "<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n" }]
+            args: [{ selector: 'kl-field-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n" }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-field-group.mjs","sources":["../../projects/koala-ui/shared/components/input-field/field-group/field-group.ts","../../projects/koala-ui/shared/components/input-field/field-group/field-group.html","../../projects/koala-ui/shared/components/input-field/field-group/koalarx-ui-shared-components-input-field-field-group.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-field-group',\n  templateUrl: './field-group.html',\n})\nexport class FieldGroup {}\n","<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAMa,UAAU,CAAA;uGAAV,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,0ECNvB,+EAGA,EAAA,CAAA;;2FDGa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAJtB,SAAS;+BACE,gBAAgB,EAAA,QAAA,EAAA,+EAAA,EAAA;;;AEH5B;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-field-group.mjs","sources":["../../projects/koala-ui/shared/components/input-field/field-group/field-group.ts","../../projects/koala-ui/shared/components/input-field/field-group/field-group.html","../../projects/koala-ui/shared/components/input-field/field-group/koalarx-ui-shared-components-input-field-field-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kl-field-group',\n  templateUrl: './field-group.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FieldGroup {}\n","<div class=\"flex items-start flex-wrap w-full\">\n  <ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,UAAU,CAAA;uGAAV,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,0ECPvB,+EAGA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDIa,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;+BACE,gBAAgB,EAAA,eAAA,EAET,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+EAAA,EAAA;;;AELjD;;AAEG;;;;"}

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FieldGroup } from '@koalarx/ui/shared/components/input-field/field-group';
 
 class Fieldset {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: Fieldset, isStandalone: true, selector: "kl-fieldset", ngImport: i0, template: "<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n", dependencies: [{ kind: "component", type: FieldGroup, selector: "kl-field-group" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: Fieldset, isStandalone: true, selector: "kl-fieldset", ngImport: i0, template: "<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n", dependencies: [{ kind: "component", type: FieldGroup, selector: "kl-field-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Fieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Fieldset, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-fieldset', imports: [FieldGroup], template: "<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n" }]
+            args: [{ selector: 'kl-fieldset', imports: [FieldGroup], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n" }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-fieldset.mjs","sources":["../../projects/koala-ui/shared/components/input-field/fieldset/fieldset.ts","../../projects/koala-ui/shared/components/input-field/fieldset/fieldset.html","../../projects/koala-ui/shared/components/input-field/fieldset/koalarx-ui-shared-components-input-field-fieldset.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { FieldGroup } from '@koalarx/ui/shared/components/input-field/field-group';\n\n@Component({\n  selector: 'kl-fieldset',\n  templateUrl: './fieldset.html',\n  imports: [FieldGroup],\n})\nexport class Fieldset {}\n","<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECRrB,+SASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,UAAU,EAAA,QAAA,EAAA,gBAAA,EAAA,CAAA,EAAA,CAAA;;2FAET,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,aAAa,EAAA,OAAA,EAEd,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,+SAAA,EAAA;;;AENvB;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-fieldset.mjs","sources":["../../projects/koala-ui/shared/components/input-field/fieldset/fieldset.ts","../../projects/koala-ui/shared/components/input-field/fieldset/fieldset.html","../../projects/koala-ui/shared/components/input-field/fieldset/koalarx-ui-shared-components-input-field-fieldset.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FieldGroup } from '@koalarx/ui/shared/components/input-field/field-group';\n\n@Component({\n  selector: 'kl-fieldset',\n  templateUrl: './fieldset.html',\n  imports: [FieldGroup],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fieldset {}\n","<fieldset class=\"fieldset border-gray-200 dark:border-gray-700 rounded-box border w-full pt-0 px-5 pb-2\">\n  <legend class=\"fieldset-legend px-2\">\n    <ng-content select=\"[legend]\" />\n  </legend>\n\n  <kl-field-group>\n    <ng-content select=\"[fields]\" />\n  </kl-field-group>\n</fieldset>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTrB,+SASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,UAAU,EAAA,QAAA,EAAA,gBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGT,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WAEd,CAAC,UAAU,CAAC,EAAA,eAAA,EACJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+SAAA,EAAA;;;AEPjD;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, effect, Component } from '@angular/core';
+import { viewChild, input, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
 
@@ -66,13 +66,13 @@ class InputCheckbox extends InputFieldBase {
         const target = event.target;
         this.control().setValue(target.checked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: InputCheckbox, isStandalone: true, selector: "kl-input-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputCheckboxElement", first: true, predicate: ["inputCheckbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputCheckbox\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"checkbox\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCheckbox, isStandalone: true, selector: "kl-input-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputCheckboxElement", first: true, predicate: ["inputCheckbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputCheckbox\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"checkbox\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-checkbox', imports: [ReactiveFormsModule], template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputCheckbox\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"checkbox\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'kl-input-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule], template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputCheckbox\n    [id]=\"fieldId\"\n    type=\"checkbox\"\n    class=\"checkbox\"\n    [checked]=\"control().value\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputCheckboxElement: [{ type: i0.ViewChild, args: ['inputCheckbox', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

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

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

@@ -1,6 +1,6 @@
 import { validateCnpj } from '@koalarx/utils/KlString';
 import * as i0 from '@angular/core';
-import { inject, effect, Component } from '@angular/core';
+import { inject, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { AppConfig } from '@koalarx/ui/core/config';
 import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
 import { InputText } from '@koalarx/ui/shared/components/input-field/input-text';
@@ -21,12 +21,12 @@ class InputCnpj extends InputFieldBase {
             control.addValidators(CNPJValidator);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCnpj, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: InputCnpj, isStandalone: true, selector: "kl-input-cnpj", usesInheritance: true, ngImport: i0, template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n", dependencies: [{ kind: "component", type: InputText, selector: "kl-input-text", inputs: ["mask"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCnpj, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCnpj, isStandalone: true, selector: "kl-input-cnpj", usesInheritance: true, ngImport: i0, template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n", dependencies: [{ kind: "component", type: InputText, selector: "kl-input-text", inputs: ["mask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCnpj, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCnpj, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-cnpj', imports: [InputText], template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n" }]
+            args: [{ selector: 'kl-input-cnpj', changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputText], template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n" }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-input-cnpj.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-cnpj/cnpj.validator.ts","../../projects/koala-ui/shared/components/input-field/input-cnpj/input-cnpj.ts","../../projects/koala-ui/shared/components/input-field/input-cnpj/input-cnpj.html","../../projects/koala-ui/shared/components/input-field/input-cnpj/koalarx-ui-shared-components-input-field-input-cnpj.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\r\nimport { validateCnpj } from '@koalarx/utils/KlString';\r\n\r\nexport function CNPJValidator(control: AbstractControl) {\r\n  if (control.value && !validateCnpj(control.value)) {\r\n    return { cnpjInvalid: true };\r\n  }\r\n\r\n  return null;\r\n}\r\n","import { Component, effect, inject } from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputText } from '@koalarx/ui/shared/components/input-field/input-text';\nimport { CNPJValidator } from './cnpj.validator';\n\n@Component({\n  selector: 'kl-input-cnpj',\n  templateUrl: './input-cnpj.html',\n  imports: [InputText],\n})\nexport class InputCnpj extends InputFieldBase {\n  readonly translations = inject(AppConfig).translation.form;\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const control = this.control();\n\n      control.addValidators(CNPJValidator);\n    });\n  }\n}\n","<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGM,SAAU,aAAa,CAAC,OAAwB,EAAA;AACpD,IAAA,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACjD,QAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE;;AAG9B,IAAA,OAAO,IAAI;AACb;;ACEM,MAAO,SAAU,SAAQ,cAAc,CAAA;IAClC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAE9B,YAAA,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AACtC,SAAC,CAAC;;uGAVO,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXtB,2VAaA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJY,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAER,SAAS,EAAA,UAAA,EAAA,CAAA;kBALrB,SAAS;+BACE,eAAe,EAAA,OAAA,EAEhB,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,2VAAA,EAAA;;;AETtB;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-cnpj.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-cnpj/cnpj.validator.ts","../../projects/koala-ui/shared/components/input-field/input-cnpj/input-cnpj.ts","../../projects/koala-ui/shared/components/input-field/input-cnpj/input-cnpj.html","../../projects/koala-ui/shared/components/input-field/input-cnpj/koalarx-ui-shared-components-input-field-input-cnpj.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\r\nimport { validateCnpj } from '@koalarx/utils/KlString';\r\n\r\nexport function CNPJValidator(control: AbstractControl) {\r\n  if (control.value && !validateCnpj(control.value)) {\r\n    return { cnpjInvalid: true };\r\n  }\r\n\r\n  return null;\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n} from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputText } from '@koalarx/ui/shared/components/input-field/input-text';\nimport { CNPJValidator } from './cnpj.validator';\n\n@Component({\n  selector: 'kl-input-cnpj',\n  templateUrl: './input-cnpj.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [InputText],\n})\nexport class InputCnpj extends InputFieldBase {\n  readonly translations = inject(AppConfig).translation.form;\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const control = this.control();\n\n      control.addValidators(CNPJValidator);\n    });\n  }\n}\n","<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"AA.AAA.AAA/AAAA-AA\">\n\n  <ng-container errors>\n    @if (control().errors?.['cnpjInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCNPJ }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGM,SAAU,aAAa,CAAC,OAAwB,EAAA;AACpD,IAAA,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACjD,QAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE;;AAG9B,IAAA,OAAO,IAAI;AACb;;ACQM,MAAO,SAAU,SAAQ,cAAc,CAAA;IAClC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAE9B,YAAA,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AACtC,SAAC,CAAC;;uGAVO,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtB,2VAaA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAER,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,mBAER,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,2VAAA,EAAA;;;AEftB;;AAEG;;;;"}

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

@@ -1,6 +1,6 @@
 import { validateCpf } from '@koalarx/utils/KlString';
 import * as i0 from '@angular/core';
-import { inject, effect, Component } from '@angular/core';
+import { inject, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { AppConfig } from '@koalarx/ui/core/config';
 import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
 import { InputText } from '@koalarx/ui/shared/components/input-field/input-text';
@@ -21,12 +21,12 @@ class InputCpf extends InputFieldBase {
             control.addValidators(CPFValidator);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCpf, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: InputCpf, isStandalone: true, selector: "kl-input-cpf", usesInheritance: true, ngImport: i0, template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n", dependencies: [{ kind: "component", type: InputText, selector: "kl-input-text", inputs: ["mask"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCpf, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCpf, isStandalone: true, selector: "kl-input-cpf", usesInheritance: true, ngImport: i0, template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n", dependencies: [{ kind: "component", type: InputText, selector: "kl-input-text", inputs: ["mask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCpf, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCpf, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-cpf', imports: [InputText], template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n" }]
+            args: [{ selector: 'kl-input-cpf', changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputText], template: "<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n" }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-input-cpf.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-cpf/cpf.validator.ts","../../projects/koala-ui/shared/components/input-field/input-cpf/input-cpf.ts","../../projects/koala-ui/shared/components/input-field/input-cpf/input-cpf.html","../../projects/koala-ui/shared/components/input-field/input-cpf/koalarx-ui-shared-components-input-field-input-cpf.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\r\nimport { validateCpf } from '@koalarx/utils/KlString';\r\n\r\nexport function CPFValidator(control: AbstractControl) {\r\n  if (control.value && !validateCpf(control.value)) {\r\n    return { cpfInvalid: true };\r\n  }\r\n\r\n  return null;\r\n}\r\n","import { Component, effect, inject } from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputText } from '@koalarx/ui/shared/components/input-field/input-text';\nimport { CPFValidator } from './cpf.validator';\n\n@Component({\n  selector: 'kl-input-cpf',\n  templateUrl: './input-cpf.html',\n  imports: [InputText],\n})\nexport class InputCpf extends InputFieldBase {\n  readonly translations = inject(AppConfig).translation.form;\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const control = this.control();\n\n      control.addValidators(CPFValidator);\n    });\n  }\n}\n","<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGM,SAAU,YAAY,CAAC,OAAwB,EAAA;AACnD,IAAA,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChD,QAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE;;AAG7B,IAAA,OAAO,IAAI;AACb;;ACEM,MAAO,QAAS,SAAQ,cAAc,CAAA;IACjC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAE9B,YAAA,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC;AACrC,SAAC,CAAC;;uGAVO,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrB,qVAaA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJY,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAER,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,cAAc,EAAA,OAAA,EAEf,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,qVAAA,EAAA;;;AETtB;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-cpf.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-cpf/cpf.validator.ts","../../projects/koala-ui/shared/components/input-field/input-cpf/input-cpf.ts","../../projects/koala-ui/shared/components/input-field/input-cpf/input-cpf.html","../../projects/koala-ui/shared/components/input-field/input-cpf/koalarx-ui-shared-components-input-field-input-cpf.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\r\nimport { validateCpf } from '@koalarx/utils/KlString';\r\n\r\nexport function CPFValidator(control: AbstractControl) {\r\n  if (control.value && !validateCpf(control.value)) {\r\n    return { cpfInvalid: true };\r\n  }\r\n\r\n  return null;\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n} from '@angular/core';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputText } from '@koalarx/ui/shared/components/input-field/input-text';\nimport { CPFValidator } from './cpf.validator';\n\n@Component({\n  selector: 'kl-input-cpf',\n  templateUrl: './input-cpf.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [InputText],\n})\nexport class InputCpf extends InputFieldBase {\n  readonly translations = inject(AppConfig).translation.form;\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const control = this.control();\n\n      control.addValidators(CPFValidator);\n    });\n  }\n}\n","<kl-input-text\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\"\n  mask=\"000.000.000-00\">\n\n  <ng-container errors>\n    @if (control().errors?.['cpfInvalid']) {\n      <div class=\"error-message\">{{ translations.invalidCPF }}</div>\n    }\n  </ng-container>\n</kl-input-text>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAGM,SAAU,YAAY,CAAC,OAAwB,EAAA;AACnD,IAAA,IAAI,OAAO,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChD,QAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE;;AAG7B,IAAA,OAAO,IAAI;AACb;;ACQM,MAAO,QAAS,SAAQ,cAAc,CAAA;IACjC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAE9B,YAAA,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC;AACrC,SAAC,CAAC;;uGAVO,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBrB,qVAaA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,SAAS,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAER,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,mBAEP,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,qVAAA,EAAA;;;AEftB;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, linkedSignal, Component } from '@angular/core';
+import { input, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
@@ -8,14 +8,14 @@ import { InputCurrencyMask } from '@koalarx/ui/shared/directives';
 
 class InputCurrency extends InputFieldBase {
     decimalCount = input(2, ...(ngDevMode ? [{ debugName: "decimalCount" }] : []));
-    currentValue = linkedSignal(() => this.control().value);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCurrency, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: InputCurrency, isStandalone: true, selector: "kl-input-currency", inputs: { decimalCount: { classPropertyName: "decimalCount", publicName: "decimalCount", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: InputCurrencyMask, selector: "input[currencyMask]", inputs: ["decimalCount"], outputs: ["currencyValue"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }] });
+    currentValue = linkedSignal(() => this.control().value, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCurrency, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCurrency, isStandalone: true, selector: "kl-input-currency", inputs: { decimalCount: { classPropertyName: "decimalCount", publicName: "decimalCount", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: InputCurrencyMask, selector: "input[currencyMask]", inputs: ["decimalCount"], outputs: ["currencyValue"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: InputCurrency, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCurrency, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-currency', imports: [ReactiveFormsModule, FormsModule, InputCurrencyMask, FieldErrors], template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
-        }] });
+            args: [{ selector: 'kl-input-currency', imports: [ReactiveFormsModule, FormsModule, InputCurrencyMask, FieldErrors], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
+        }], propDecorators: { decimalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalCount", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-input-currency.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-currency/input-currency.ts","../../projects/koala-ui/shared/components/input-field/input-currency/input-currency.html","../../projects/koala-ui/shared/components/input-field/input-currency/koalarx-ui-shared-components-input-field-input-currency.ts"],"sourcesContent":["import { Component, input, linkedSignal } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputCurrencyMask } from '@koalarx/ui/shared/directives';\n\n@Component({\n  selector: 'kl-input-currency',\n  templateUrl: './input-currency.html',\n  imports: [ReactiveFormsModule, FormsModule, InputCurrencyMask, FieldErrors],\n})\nexport class InputCurrency extends InputFieldBase {\n  decimalCount = input<number>(2);\n  currentValue = linkedSignal(() => this.control().value);\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAWM,MAAO,aAAc,SAAQ,cAAc,CAAA;AAC/C,IAAA,YAAY,GAAG,KAAK,CAAS,CAAC,wDAAC;AAC/B,IAAA,YAAY,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC;uGAF5C,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX1B,m4BAmCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1BY,mBAAmB,syBAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE/D,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,SAAS;+BACE,mBAAmB,EAAA,OAAA,EAEpB,CAAC,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,m4BAAA,EAAA;;;AET7E;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-currency.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-currency/input-currency.ts","../../projects/koala-ui/shared/components/input-field/input-currency/input-currency.html","../../projects/koala-ui/shared/components/input-field/input-currency/koalarx-ui-shared-components-input-field-input-currency.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  linkedSignal,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { InputCurrencyMask } from '@koalarx/ui/shared/directives';\n\n@Component({\n  selector: 'kl-input-currency',\n  templateUrl: './input-currency.html',\n  imports: [ReactiveFormsModule, FormsModule, InputCurrencyMask, FieldErrors],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputCurrency extends InputFieldBase {\n  decimalCount = input<number>(2);\n  currentValue = linkedSignal(() => this.control().value);\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full rounded-sm\">\n  @if (label(); as label) {\n    <span>\n      <ng-content select=\"[icon]\" />\n      {{ label }} {{ isRequired() ? '*' : '' }}\n    </span>\n  }\n\n  <input\n    [id]=\"fieldId\"\n    [formControl]=\"control()\"\n    [placeholder]=\"label()\n      ? label() + (isRequired() ? '*' : '')\n      : placeholder()\"\n    [required]=\"isRequired()\"\n    type=\"tel\"\n    currencyMask\n    [decimalCount]=\"decimalCount()\"\n    (currencyValue)=\"control().setValue($event)\"\n  />\n\n  <ng-content select=\"[suffix]\" />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAiBM,MAAO,aAAc,SAAQ,cAAc,CAAA;AAC/C,IAAA,YAAY,GAAG,KAAK,CAAS,CAAC,wDAAC;AAC/B,IAAA,YAAY,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,wDAAC;uGAF5C,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjB1B,m4BAmCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrBY,mBAAmB,syBAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAG/D,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EAEpB,CAAC,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,CAAC,EAAA,eAAA,EAC1D,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,m4BAAA,EAAA;;;AEfjD;;AAEG;;;;"}