@koalarx/ui 20.2.7 → 20.2.9

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

@@ -3,8 +3,8 @@ import { viewChild, effect, Component } from '@angular/core';
 import { randomString, KlString } from '@koalarx/utils/KlString';
 
 class Dropdown {
-    dropdownTriggerElement = viewChild('dropdownTrigger');
-    dropdownContentElement = viewChild('dropdownContent');
+    dropdownTriggerElement = viewChild('dropdownTrigger', ...(ngDevMode ? [{ debugName: "dropdownTriggerElement" }] : []));
+    dropdownContentElement = viewChild('dropdownContent', ...(ngDevMode ? [{ debugName: "dropdownContentElement" }] : []));
     id = randomString(10, { numbers: true, uppercase: false, lowercase: false });
     anchorName = new KlString('--anchor-').concat(this.id);
     constructor() {
@@ -35,10 +35,10 @@ class Dropdown {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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: () => [] });

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,CAAC;AAC5C,IAAA,sBAAsB,GACrC,SAAS,CAA6B,iBAAiB,CAAC;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 { 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;;;;"}

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

@@ -4,11 +4,11 @@ import { AppConfig } from '@koalarx/ui/core/config';
 
 class FieldErrors {
     translations = inject(AppConfig).translation.form;
-    field = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FieldErrors, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: FieldErrors, isStandalone: true, selector: "kl-field-errors", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (field().errors && field().touched) {\n  <p class=\"validator-hint show mb-1.5\">\n    <ng-content select=\"[errors]\" />\n\n    @if (field().errors?.['required']) {\n      {{translations.required}}<br/>\n    }\n\n    @if (field().errors?.['email']) {\n      {{translations.invalidEmail}}<br/>\n    }\n\n    @if (field().errors?.['minlength']) {\n      {{translations.invalidMinLength(field().errors?.['minlength'].requiredLength)}}<br/>\n    }\n  </p>\n}\n" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FieldErrors, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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" }]
         }] });

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

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

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

@@ -3,20 +3,20 @@ import { Component, input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 class HorizontalMenuContainer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: HorizontalMenuContainer, isStandalone: true, selector: "kl-horizontal-menu-container", ngImport: i0, template: "<ul class=\"menu menu-vertical lg:menu-horizontal font-semibold text-gray-950 dark:text-gray-50 rounded-box\">\n  <ng-content />\n</ul>\n" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HorizontalMenuContainer, decorators: [{
             type: Component,
             args: [{ selector: 'kl-horizontal-menu-container', template: "<ul class=\"menu menu-vertical lg:menu-horizontal font-semibold text-gray-950 dark:text-gray-50 rounded-box\">\n  <ng-content />\n</ul>\n" }]
         }] });
 
 class HorizontalMenuItem {
-    link = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: HorizontalMenuItem, isStandalone: true, selector: "kl-horizontal-menu-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<li>\n  <a class=\"opacity-70\"\n    [routerLink]=\"link()\"\n    routerLinkActive=\"opacity-100\">\n    <ng-content />\n  </a>\n</li>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: HorizontalMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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" }]
         }] });

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,EAAU;uGADpB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,ECR/B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,0IAOA,EDDY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE3B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAE1B,OAAA,EAAA,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0IAAA,EAAA;;;AENzC;;AAEG;;;;"}
+{"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;;;;"}

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

@@ -24,10 +24,10 @@ class AutocompleteRef {
             this.appRef.detachView(this.componentRef().hostView);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteRef });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteRef, decorators: [{
             type: Injectable
         }] });
 
@@ -35,19 +35,19 @@ class AutocompleteOptions {
     autocompleteRef = inject(AutocompleteRef);
     viewContainerRef = inject(ViewContainerRef);
     firstLoad = true;
-    fieldId = input.required();
-    options = input.required();
-    control = input.required();
-    multiple = input.required();
-    autocompleteValue = input.required();
-    placeholderSearchField = input();
-    disableAutoTypeConversion = input(false, { transform: booleanAttribute });
+    fieldId = input.required(...(ngDevMode ? [{ debugName: "fieldId" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    multiple = input.required(...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    autocompleteValue = input.required(...(ngDevMode ? [{ debugName: "autocompleteValue" }] : []));
+    placeholderSearchField = input(...(ngDevMode ? [undefined, { debugName: "placeholderSearchField" }] : []));
+    disableAutoTypeConversion = input(false, ...(ngDevMode ? [{ debugName: "disableAutoTypeConversion", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     list = linkedSignal(() => {
         const options = this.options()();
         return new KlArray(options).split(100)[0];
     });
-    optionFocused = signal(0);
-    searchInputRef = viewChild('searchInput');
+    optionFocused = signal(0, ...(ngDevMode ? [{ debugName: "optionFocused" }] : []));
+    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
     constructor() {
         effect(() => {
             const hasValue = !!this.autocompleteValue().currentValue();
@@ -197,10 +197,10 @@ class AutocompleteOptions {
             this.control().setValue(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AutocompleteOptions, isStandalone: true, selector: "kl-autocomplete-options", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: true, transformFunction: null }, autocompleteValue: { classPropertyName: "autocompleteValue", publicName: "autocompleteValue", isSignal: true, isRequired: true, transformFunction: null }, placeholderSearchField: { classPropertyName: "placeholderSearchField", publicName: "placeholderSearchField", isSignal: true, isRequired: false, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bg-base-300 overflow-hidden shadow border border-neutral-200 dark:border-neutral-700 rounded-lg flex flex-col w-full\"\n  [attr.aria-labelledby]=\"fieldId()\">\n\n  <div class=\"kl-autocomplete-filter border-b border-neutral-200 dark:border-neutral-700\">\n    <label class=\"flex items-center text-sm\">\n      <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n      <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n        #searchInput\n        type=\"search\"\n        [formControl]=\"autocompleteValue().filterControl\"\n        placeholder=\"Type to Search...\"\n      />\n    </label>\n  </div>\n\n  <div class=\"kl-autocomplete-options-container flex flex-col overflow-auto p-1\">\n    @for (item of list(); track $index) {\n      @let optionLabelId = fieldId() + '-' + item.value;\n\n      <label class=\"relative py-1 px-2 pr-8 rounded-md\"\n        [attr.for]=\"optionLabelId\"\n        [class.active]=\"$index === optionFocused()\"\n        (mouseover)=\"optionFocused.set($index)\">\n\n        <input\n          [type]=\"multiple() ? 'checkbox' : 'radio'\"\n          [id]=\"optionLabelId\"\n          [name]=\"fieldId()\"\n          [attr.value]=\"item.value\"\n          [checked]=\"multiple()\n            ? control().value?.includes(item.value)\n            : item.value === control().value\"\n          (change)=\"setValue($event)\"\n        />\n        {{item.label}}\n      </label>\n    }\n  </div>\n</div>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AutocompleteOptions, isStandalone: true, selector: "kl-autocomplete-options", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: true, transformFunction: null }, autocompleteValue: { classPropertyName: "autocompleteValue", publicName: "autocompleteValue", isSignal: true, isRequired: true, transformFunction: null }, placeholderSearchField: { classPropertyName: "placeholderSearchField", publicName: "placeholderSearchField", isSignal: true, isRequired: false, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bg-base-300 overflow-hidden shadow border border-neutral-200 dark:border-neutral-700 rounded-lg flex flex-col w-full\"\n  [attr.aria-labelledby]=\"fieldId()\">\n\n  <div class=\"kl-autocomplete-filter border-b border-neutral-200 dark:border-neutral-700\">\n    <label class=\"flex items-center text-sm\">\n      <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n      <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n        #searchInput\n        type=\"search\"\n        [formControl]=\"autocompleteValue().filterControl\"\n        placeholder=\"Type to Search...\"\n      />\n    </label>\n  </div>\n\n  <div class=\"kl-autocomplete-options-container flex flex-col overflow-auto p-1\">\n    @for (item of list(); track $index) {\n      @let optionLabelId = fieldId() + '-' + item.value;\n\n      <label class=\"relative py-1 px-2 pr-8 rounded-md\"\n        [attr.for]=\"optionLabelId\"\n        [class.active]=\"$index === optionFocused()\"\n        (mouseover)=\"optionFocused.set($index)\">\n\n        <input\n          [type]=\"multiple() ? 'checkbox' : 'radio'\"\n          [id]=\"optionLabelId\"\n          [name]=\"fieldId()\"\n          [attr.value]=\"item.value\"\n          [checked]=\"multiple()\n            ? control().value?.includes(item.value)\n            : item.value === control().value\"\n          (change)=\"setValue($event)\"\n        />\n        {{item.label}}\n      </label>\n    }\n  </div>\n</div>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteOptions, decorators: [{
             type: Component,
             args: [{ selector: 'kl-autocomplete-options', imports: [ReactiveFormsModule], template: "<div class=\"bg-base-300 overflow-hidden shadow border border-neutral-200 dark:border-neutral-700 rounded-lg flex flex-col w-full\"\n  [attr.aria-labelledby]=\"fieldId()\">\n\n  <div class=\"kl-autocomplete-filter border-b border-neutral-200 dark:border-neutral-700\">\n    <label class=\"flex items-center text-sm\">\n      <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n      <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n        #searchInput\n        type=\"search\"\n        [formControl]=\"autocompleteValue().filterControl\"\n        placeholder=\"Type to Search...\"\n      />\n    </label>\n  </div>\n\n  <div class=\"kl-autocomplete-options-container flex flex-col overflow-auto p-1\">\n    @for (item of list(); track $index) {\n      @let optionLabelId = fieldId() + '-' + item.value;\n\n      <label class=\"relative py-1 px-2 pr-8 rounded-md\"\n        [attr.for]=\"optionLabelId\"\n        [class.active]=\"$index === optionFocused()\"\n        (mouseover)=\"optionFocused.set($index)\">\n\n        <input\n          [type]=\"multiple() ? 'checkbox' : 'radio'\"\n          [id]=\"optionLabelId\"\n          [name]=\"fieldId()\"\n          [attr.value]=\"item.value\"\n          [checked]=\"multiple()\n            ? control().value?.includes(item.value)\n            : item.value === control().value\"\n          (change)=\"setValue($event)\"\n        />\n        {{item.label}}\n      </label>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -324,10 +324,10 @@ class Autocomplete {
             this.calculatePosition(container);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Autocomplete, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Autocomplete });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Autocomplete, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Autocomplete });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Autocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Autocomplete, decorators: [{
             type: Injectable
         }] });
 
@@ -344,43 +344,43 @@ class AutocompleteBuilder {
     inMemoryWithLoading(config) {
         return config;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteBuilder, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteBuilder, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteBuilder, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class AutocompleteValue {
     destroyRef = inject(DestroyRef);
-    _filter = signal('');
+    _filter = signal('', ...(ngDevMode ? [{ debugName: "_filter" }] : []));
     _control;
-    _currentValue = signal(null);
+    _currentValue = signal(null, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
     _multiple = false;
     _options;
-    _autofill = signal(null);
+    _autofill = signal(null, ...(ngDevMode ? [{ debugName: "_autofill" }] : []));
     _isLoading;
-    _internalFilter = signal(null);
+    _internalFilter = signal(null, ...(ngDevMode ? [{ debugName: "_internalFilter" }] : []));
     _isOnDemand;
     _requestOptionsParams = signal({
         filter: null,
         autofill: null,
-    });
+    }, ...(ngDevMode ? [{ debugName: "_requestOptionsParams" }] : []));
     _selectedOption = computed(() => {
         const currentValue = this._currentValue();
         if (Array.isArray(currentValue)) {
             return null;
         }
         return currentValue;
-    });
+    }, ...(ngDevMode ? [{ debugName: "_selectedOption" }] : []));
     _selectedOptions = computed(() => {
         const currentValue = this._currentValue();
         if (Array.isArray(currentValue)) {
             return currentValue;
         }
         return [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : []));
     _hasValue = computed(() => {
         const currentValue = this._currentValue();
         const value = Array.isArray(currentValue)
@@ -393,7 +393,7 @@ class AutocompleteValue {
             return value >= 0;
         }
         return !!value;
-    });
+    }, ...(ngDevMode ? [{ debugName: "_hasValue" }] : []));
     filterControl = new FormControl('');
     get filter() {
         return this._filter.asReadonly();
@@ -440,6 +440,10 @@ class AutocompleteValue {
             options.value !== this._selectedOption()?.value);
     }
     async selectOption(value) {
+        if (isEmpty(value)) {
+            this._currentValue.set(null);
+            return;
+        }
         while (this._isLoading()) {
             await delay(100);
         }
@@ -515,11 +519,7 @@ class AutocompleteValue {
         event.preventDefault();
         this._control?.setValue(null);
         this._currentValue.set(null);
-        this._requestOptionsParams.update(() => ({
-            filter: null,
-            internalFilter: this._internalFilter(),
-            autofill: null,
-        }));
+        this.filterControl.setValue(null);
     }
     remove(event, value) {
         event.preventDefault();
@@ -532,10 +532,10 @@ class AutocompleteValue {
         const currentValue = this._control.value;
         this._control?.setValue(currentValue.filter((v) => v !== value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteValue, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteValue });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteValue, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteValue });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteValue, decorators: [{
             type: Injectable
         }] });
 
@@ -543,15 +543,15 @@ class AutocompleteField extends InputFieldBase {
     injector = inject(Injector);
     autocompleteValue = inject(AutocompleteValue);
     autocomplete = inject(Autocomplete);
-    options = input.required();
-    multiple = input(false, { transform: booleanAttribute });
-    placeholderSearchField = input();
-    disableAutoTypeConversion = input(false, {
-        transform: booleanAttribute,
-    });
-    isLoading = signal(false);
-    optionList = signal([]);
-    optionsResource = signal(null);
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    placeholderSearchField = input(...(ngDevMode ? [undefined, { debugName: "placeholderSearchField" }] : []));
+    disableAutoTypeConversion = input(false, ...(ngDevMode ? [{ debugName: "disableAutoTypeConversion", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    optionList = signal([], ...(ngDevMode ? [{ debugName: "optionList" }] : []));
+    optionsResource = signal(null, ...(ngDevMode ? [{ debugName: "optionsResource" }] : []));
     isOnDemand = linkedSignal(() => this.optionsResource()?.onDemand !== undefined);
     constructor() {
         super();
@@ -625,10 +625,10 @@ class AutocompleteField extends InputFieldBase {
         this.optionsResource.set(this.generateOptionsResource());
         this.autocompleteValue.makeAutofill();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AutocompleteField, isStandalone: true, selector: "kl-autocomplete-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholderSearchField: { classPropertyName: "placeholderSearchField", publicName: "placeholderSearchField", isSignal: true, isRequired: false, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, providers: [Autocomplete, AutocompleteValue], usesInheritance: true, ngImport: i0, template: "<button class=\"relative select hover:cursor-default bg-base-100 w-full min-h-10 h-full flex items-center justify-between flex-nowrap\"\n  [class.has-value]=\"autocompleteValue.hasValue()\"\n  type=\"button\"\n  tabindex=\"0\"\n  [id]=\"fieldId\"\n  [disabled]=\"isDisabled() || isLoading()\"\n  (focus)=\"control().markAsTouched()\"\n  (click)=\"open()\">\n\n  @if (label(); as label) {\n    <span class=\"autocomplete-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\">\n      <span>{{label}} {{ isRequired() ? '*' : '' }}</span>\n    </span>\n  }\n\n  <div class=\"flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full selected-options\"\n    [hookChange]=\"!isLoading() && (autocompleteValue.filter() || autocompleteValue.currentValue())\"\n    [class.hidden]=\"!autocompleteValue.hasValue()\">\n    @if (multiple()) {\n      @for (item of autocompleteValue.selectedOptions(); track $index) {\n        <span class=\"flex items-center badge badge-primary badge-sm rounded-sm\">\n          <span>{{item.label}}</span>\n          <i class=\"fa-solid fa-xmark text-neutral-400 hover:cursor-pointer\"\n            (click)=\"autocompleteValue.remove($event, item.value)\">\n          </i>\n        </span>\n      }\n    } @else {\n      {{autocompleteValue.selectedOption()?.label}}\n    }\n  </div>\n\n  @if (isLoading()) {\n    <kl-loader size=\"small\" />\n  } @else if (autocompleteValue.hasValue()) {\n    <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer pt-1 pr-2\"\n      (click)=\"autocompleteValue.clear($event)\">\n    </i>\n  }\n</button>\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: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "directive", type: HookChange, selector: "[hookChange]", inputs: ["hookChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AutocompleteField, isStandalone: true, selector: "kl-autocomplete-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholderSearchField: { classPropertyName: "placeholderSearchField", publicName: "placeholderSearchField", isSignal: true, isRequired: false, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, providers: [Autocomplete, AutocompleteValue], usesInheritance: true, ngImport: i0, template: "<button class=\"relative select hover:cursor-default bg-base-100 w-full min-h-10 h-full flex items-center justify-between flex-nowrap\"\n  [class.has-value]=\"autocompleteValue.hasValue()\"\n  type=\"button\"\n  tabindex=\"0\"\n  [id]=\"fieldId\"\n  [disabled]=\"isDisabled() || isLoading()\"\n  (focus)=\"control().markAsTouched()\"\n  (click)=\"open()\">\n\n  @if (label(); as label) {\n    <span class=\"autocomplete-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\">\n      <span>{{label}} {{ isRequired() ? '*' : '' }}</span>\n    </span>\n  }\n\n  <div class=\"flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full selected-options\"\n    [hookChange]=\"!isLoading() && (autocompleteValue.filter() || autocompleteValue.currentValue())\"\n    [class.hidden]=\"!autocompleteValue.hasValue()\">\n    @if (multiple()) {\n      @for (item of autocompleteValue.selectedOptions(); track $index) {\n        <span class=\"flex items-center badge badge-primary badge-sm rounded-sm\">\n          <span>{{item.label}}</span>\n          <i class=\"fa-solid fa-xmark text-neutral-400 hover:cursor-pointer\"\n            (click)=\"autocompleteValue.remove($event, item.value)\">\n          </i>\n        </span>\n      }\n    } @else {\n      {{autocompleteValue.selectedOption()?.label}}\n    }\n  </div>\n\n  @if (isLoading()) {\n    <kl-loader size=\"small\" />\n  } @else if (autocompleteValue.hasValue()) {\n    <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer pt-1 pr-2\"\n      (click)=\"autocompleteValue.clear($event)\">\n    </i>\n  }\n</button>\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: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "directive", type: HookChange, selector: "[hookChange]", inputs: ["hookChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutocompleteField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AutocompleteField, decorators: [{
             type: Component,
             args: [{ selector: 'kl-autocomplete-field', providers: [Autocomplete, AutocompleteValue], imports: [Loader, FieldErrors, HookChange], template: "<button class=\"relative select hover:cursor-default bg-base-100 w-full min-h-10 h-full flex items-center justify-between flex-nowrap\"\n  [class.has-value]=\"autocompleteValue.hasValue()\"\n  type=\"button\"\n  tabindex=\"0\"\n  [id]=\"fieldId\"\n  [disabled]=\"isDisabled() || isLoading()\"\n  (focus)=\"control().markAsTouched()\"\n  (click)=\"open()\">\n\n  @if (label(); as label) {\n    <span class=\"autocomplete-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\">\n      <span>{{label}} {{ isRequired() ? '*' : '' }}</span>\n    </span>\n  }\n\n  <div class=\"flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full selected-options\"\n    [hookChange]=\"!isLoading() && (autocompleteValue.filter() || autocompleteValue.currentValue())\"\n    [class.hidden]=\"!autocompleteValue.hasValue()\">\n    @if (multiple()) {\n      @for (item of autocompleteValue.selectedOptions(); track $index) {\n        <span class=\"flex items-center badge badge-primary badge-sm rounded-sm\">\n          <span>{{item.label}}</span>\n          <i class=\"fa-solid fa-xmark text-neutral-400 hover:cursor-pointer\"\n            (click)=\"autocompleteValue.remove($event, item.value)\">\n          </i>\n        </span>\n      }\n    } @else {\n      {{autocompleteValue.selectedOption()?.label}}\n    }\n  </div>\n\n  @if (isLoading()) {\n    <kl-loader size=\"small\" />\n  } @else if (autocompleteValue.hasValue()) {\n    <i class=\"fa-solid fa-xmark text-neutral-500 hover:cursor-pointer pt-1 pr-2\"\n      (click)=\"autocompleteValue.clear($event)\">\n    </i>\n  }\n</button>\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
         }], ctorParameters: () => [] });