@koalarx/ui 21.0.8 → 21.1.0

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

@@ -67,11 +67,11 @@ class InputCheckbox extends InputFieldBase {
         this.control().setValue(target.checked);
     }
     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 });
+    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\">{{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckbox, decorators: [{
             type: Component,
-            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" }]
+            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\">{{hint()}}</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 }] }] } });
 
 /**

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 {\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":";;;;;AAmCM,MAAO,aAAc,SAAQ,cAAc,CAAA;AAC9B,IAAA,oBAAoB,GACnC,SAAS,CAA+B,eAAe,gEAAC;IAE1D,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiB;IAC9B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAgB;IAEpB,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,KAAK,EAAE;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,oBAAoB;AAC7B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,iBAAiB;AAC1B,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,gBAAgB;AACzB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,gBAAgB;AACzB,YAAA;AACE,gBAAA,OAAO,UAAU;;;IAIf,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,aAAa;AACtB,YAAA;AACE,gBAAA,OAAO,UAAU;;;AAIvB,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAAE,aAAa;YAExD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;;AAE7C,SAAC,CAAC;QAEF,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAAE,aAAa;YAExD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;AAE5C,SAAC,CAAC;;AAGJ,IAAA,MAAM,CAAC,KAAY,EAAA;AACjB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;;uGAvE9B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnC1B,ybAkBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDeY,mBAAmB,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAElB,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAEZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,ybAAA,EAAA;4GAIY,eAAe,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErC3D;;AAEG;;;;"}
+{"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\">{{hint()}}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAmCM,MAAO,aAAc,SAAQ,cAAc,CAAA;AAC9B,IAAA,oBAAoB,GACnC,SAAS,CAA+B,eAAe,gEAAC;IAE1D,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiB;IAC9B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAgB;IAEpB,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,KAAK,EAAE;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,oBAAoB;AAC7B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,iBAAiB;AAC1B,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,kBAAkB;AAC3B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,gBAAgB;AACzB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,gBAAgB;AACzB,YAAA;AACE,gBAAA,OAAO,UAAU;;;IAIf,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,aAAa;AACtB,YAAA;AACE,gBAAA,OAAO,UAAU;;;AAIvB,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAAE,aAAa;YAExD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;;AAE7C,SAAC,CAAC;QAEF,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,EAAE,aAAa;YAExD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;AAE5C,SAAC,CAAC;;AAGJ,IAAA,MAAM,CAAC,KAAY,EAAA;AACjB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;;uGAvE9B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnC1B,+XAgBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDiBY,mBAAmB,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAElB,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAEZ,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,+XAAA,EAAA;4GAIY,eAAe,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErC3D;;AAEG;;;;"}

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

@@ -10,11 +10,11 @@ class InputCurrency extends InputFieldBase {
     decimalCount = input(2, ...(ngDevMode ? [{ debugName: "decimalCount" }] : []));
     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 });
+    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\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: 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: "21.0.6", ngImport: i0, type: InputCurrency, decorators: [{
             type: Component,
-            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" }]
+            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\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
         }], propDecorators: { decimalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalCount", required: false }] }] } });
 
 /**

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 {\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;;;;"}
+{"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\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n","/**\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,y0BAiCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDnBY,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,y0BAAA,EAAA;;;AEfjD;;AAEG;;;;"}

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

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { InputFieldBase, InputField } from '@koalarx/ui/shared/components/input-field';
+
+class InputNumber extends InputFieldBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNumber, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: InputNumber, isStandalone: true, selector: "kl-input-number", usesInheritance: true, ngImport: i0, template: "<kl-input-field\n  type=\"number\"\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\">\n\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-input-field>\n", dependencies: [{ kind: "component", type: InputField, selector: "kl-input-field", inputs: ["type", "mask", "min", "max"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNumber, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-input-number', imports: [InputField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kl-input-field\n  type=\"number\"\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\">\n\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-input-field>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputNumber };
+//# sourceMappingURL=koalarx-ui-shared-components-input-field-input-number.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-number.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-number/input-number.ts","../../projects/koala-ui/shared/components/input-field/input-number/input-number.html","../../projects/koala-ui/shared/components/input-field/input-number/koalarx-ui-shared-components-input-field-input-number.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport {\n  InputField,\n  InputFieldBase,\n} from '@koalarx/ui/shared/components/input-field';\n\n@Component({\n  selector: 'kl-input-number',\n  templateUrl: './input-number.html',\n  imports: [InputField],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputNumber extends InputFieldBase {}\n","<kl-input-field\n  type=\"number\"\n  [control]=\"control()\"\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  [hint]=\"hint()\">\n\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-input-field>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAYM,MAAO,WAAY,SAAQ,cAAc,CAAA;uGAAlC,WAAW,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZxB,0PAWA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFY,UAAU,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGT,WAAW,EAAA,UAAA,EAAA,CAAA;kBANvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,WAElB,CAAC,UAAU,CAAC,EAAA,eAAA,EACJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0PAAA,EAAA;;;AEVjD;;AAEG;;;;"}

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

@@ -53,11 +53,11 @@ class InputPassword extends InputFieldBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPassword, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputPassword, isStandalone: true, selector: "kl-input-password", inputs: { enableStrongPasswordCheck: { classPropertyName: "enableStrongPasswordCheck", publicName: "enableStrongPasswordCheck", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\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    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\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: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputPassword, isStandalone: true, selector: "kl-input-password", inputs: { enableStrongPasswordCheck: { classPropertyName: "enableStrongPasswordCheck", publicName: "enableStrongPasswordCheck", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\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: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPassword, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-password', imports: [ReactiveFormsModule, FieldErrors], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\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    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
+            args: [{ selector: 'kl-input-password', imports: [ReactiveFormsModule, FieldErrors], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
         }], propDecorators: { enableStrongPasswordCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableStrongPasswordCheck", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-input-password.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-password/has-lowercase-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-number-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-special-characters-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-uppercase-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/input-password.ts","../../projects/koala-ui/shared/components/input-field/input-password/input-password.html","../../projects/koala-ui/shared/components/input-field/input-password/koalarx-ui-shared-components-input-field-input-password.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\n\nexport function HasLowercaseValidator(control: AbstractControl) {\n  if (!/[a-z]/.test(control.value)) {\n    return { hasLowercase: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasNumberValidator(control: AbstractControl) {\n  if (!/\\d/.test(control.value)) {\n    return { hasNumber: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasSpecialCharactersValidator(control: AbstractControl) {\n  if (!/[ `!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?~]/.test(control.value)) {\n    return { hasSpecialCharacters: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasUppercaseValidator(control: AbstractControl) {\n  if (!/[A-Z]/.test(control.value)) {\n    return { hasUppercase: true };\n  }\n\n  return null;\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { ReactiveFormsModule, Validators } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { HasLowercaseValidator } from './has-lowercase-validator';\nimport { HasNumberValidator } from './has-number-validator';\nimport { HasSpecialCharactersValidator } from './has-special-characters-validator';\nimport { HasUppercaseValidator } from './has-uppercase-validator';\n\ntype InputPasswordType = 'password' | 'text';\n\n@Component({\n  selector: 'kl-input-password',\n  templateUrl: './input-password.html',\n  imports: [ReactiveFormsModule, FieldErrors],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputPassword extends InputFieldBase implements OnInit {\n  readonly translations = inject(AppConfig).translation.form;\n\n  type = signal<InputPasswordType>('password');\n  enableStrongPasswordCheck = input(false, { transform: booleanAttribute });\n\n  togglePasswordVisibility() {\n    this.type.set(this.type() === 'password' ? 'text' : 'password');\n  }\n\n  ngOnInit(): void {\n    if (this.enableStrongPasswordCheck()) {\n      this.control().addValidators([\n        HasSpecialCharactersValidator,\n        HasLowercaseValidator,\n        HasUppercaseValidator,\n        HasNumberValidator,\n        Validators.minLength(8),\n      ]);\n    }\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\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    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\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":";;;;;;;;AAEM,SAAU,qBAAqB,CAAC,OAAwB,EAAA;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;;AAG/B,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,kBAAkB,CAAC,OAAwB,EAAA;IACzD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAC7B,QAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;;AAG5B,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,6BAA6B,CAAC,OAAwB,EAAA;IACpE,IAAI,CAAC,wCAAwC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACjE,QAAA,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE;;AAGvC,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,qBAAqB,CAAC,OAAwB,EAAA;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;;AAG/B,IAAA,OAAO,IAAI;AACb;;ACkBM,MAAO,aAAc,SAAQ,cAAc,CAAA;IACtC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,IAAI,GAAG,MAAM,CAAoB,UAAU,gDAAC;IAC5C,yBAAyB,GAAG,KAAK,CAAC,KAAK,sEAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAEzE,wBAAwB,GAAA;QACtB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;;IAGjE,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,yBAAyB,EAAE,EAAE;AACpC,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC;gBAC3B,6BAA6B;gBAC7B,qBAAqB;gBACrB,qBAAqB;gBACrB,kBAAkB;AAClB,gBAAA,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACxB,aAAA,CAAC;;;uGAlBK,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,yBAAA,EAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,UAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B1B,8sDA8DA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvCY,mBAAmB,uyBAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAG/B,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,mBAAmB,EAAA,OAAA,EAEpB,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAA,eAAA,EAC1B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8sDAAA,EAAA;;;AExBjD;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-password.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-password/has-lowercase-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-number-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-special-characters-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/has-uppercase-validator.ts","../../projects/koala-ui/shared/components/input-field/input-password/input-password.ts","../../projects/koala-ui/shared/components/input-field/input-password/input-password.html","../../projects/koala-ui/shared/components/input-field/input-password/koalarx-ui-shared-components-input-field-input-password.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\n\nexport function HasLowercaseValidator(control: AbstractControl) {\n  if (!/[a-z]/.test(control.value)) {\n    return { hasLowercase: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasNumberValidator(control: AbstractControl) {\n  if (!/\\d/.test(control.value)) {\n    return { hasNumber: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasSpecialCharactersValidator(control: AbstractControl) {\n  if (!/[ `!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?~]/.test(control.value)) {\n    return { hasSpecialCharacters: true };\n  }\n\n  return null;\n}\n","import { AbstractControl } from '@angular/forms';\n\nexport function HasUppercaseValidator(control: AbstractControl) {\n  if (!/[A-Z]/.test(control.value)) {\n    return { hasUppercase: true };\n  }\n\n  return null;\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { ReactiveFormsModule, Validators } from '@angular/forms';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { HasLowercaseValidator } from './has-lowercase-validator';\nimport { HasNumberValidator } from './has-number-validator';\nimport { HasSpecialCharactersValidator } from './has-special-characters-validator';\nimport { HasUppercaseValidator } from './has-uppercase-validator';\n\ntype InputPasswordType = 'password' | 'text';\n\n@Component({\n  selector: 'kl-input-password',\n  templateUrl: './input-password.html',\n  imports: [ReactiveFormsModule, FieldErrors],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputPassword extends InputFieldBase implements OnInit {\n  readonly translations = inject(AppConfig).translation.form;\n\n  type = signal<InputPasswordType>('password');\n  enableStrongPasswordCheck = input(false, { transform: booleanAttribute });\n\n  togglePasswordVisibility() {\n    this.type.set(this.type() === 'password' ? 'text' : 'password');\n  }\n\n  ngOnInit(): void {\n    if (this.enableStrongPasswordCheck()) {\n      this.control().addValidators([\n        HasSpecialCharactersValidator,\n        HasLowercaseValidator,\n        HasUppercaseValidator,\n        HasNumberValidator,\n        Validators.minLength(8),\n      ]);\n    }\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"floating-label input validator w-full\">\n  @if (label(); as label) {\n    <span class=\"label\">\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]=\"type()\"\n  />\n\n  <button class=\"cursor-pointer\" type=\"button\" (click)=\"togglePasswordVisibility()\">\n    @if (type() === 'password') {\n      <i class=\"fa-regular fa-eye-slash\"></i>\n    } @else {\n      <i class=\"fa-regular fa-eye\"></i>\n    }\n  </button>\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    @if (control().errors?.['hasSpecialCharacters']) {\n      {{translations.invalidPasswordHasSpecialCharacters}}<br/>\n    }\n\n    @if (control().errors?.['hasUppercase']) {\n      {{translations.invalidPasswordHasUppercase}}<br/>\n    }\n\n    @if (control().errors?.['hasLowercase']) {\n      {{translations.invalidPasswordHasLowercase}}<br/>\n    }\n\n    @if (control().errors?.['hasNumber']) {\n      {{translations.invalidPasswordHasNumber}}<br/>\n    }\n\n    @if (control().errors?.['minlength']) {\n      {{translations.invalidMinLength(control().errors?.['minlength'].requiredLength)}}<br/>\n    }\n\n    @if (control().errors?.['confirmPassword']) {\n      {{translations.invalidConfirmPassword}}<br/>\n    }\n\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":";;;;;;;;AAEM,SAAU,qBAAqB,CAAC,OAAwB,EAAA;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;;AAG/B,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,kBAAkB,CAAC,OAAwB,EAAA;IACzD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAC7B,QAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;;AAG5B,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,6BAA6B,CAAC,OAAwB,EAAA;IACpE,IAAI,CAAC,wCAAwC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACjE,QAAA,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE;;AAGvC,IAAA,OAAO,IAAI;AACb;;ACNM,SAAU,qBAAqB,CAAC,OAAwB,EAAA;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;;AAG/B,IAAA,OAAO,IAAI;AACb;;ACkBM,MAAO,aAAc,SAAQ,cAAc,CAAA;IACtC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,IAAI;AAE1D,IAAA,IAAI,GAAG,MAAM,CAAoB,UAAU,gDAAC;IAC5C,yBAAyB,GAAG,KAAK,CAAC,KAAK,sEAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAEzE,wBAAwB,GAAA;QACtB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;;IAGjE,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,yBAAyB,EAAE,EAAE;AACpC,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC;gBAC3B,6BAA6B;gBAC7B,qBAAqB;gBACrB,qBAAqB;gBACrB,kBAAkB;AAClB,gBAAA,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACxB,aAAA,CAAC;;;uGAlBK,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,yBAAA,EAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,UAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B1B,opDA4DA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrCY,mBAAmB,uyBAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAG/B,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,mBAAmB,EAAA,OAAA,EAEpB,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAA,eAAA,EAC1B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,opDAAA,EAAA;;;AExBjD;;AAEG;;;;"}

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

@@ -73,14 +73,18 @@ class InputRadio extends InputFieldBase {
             !this.disableAutoTypeConversion()) {
             value = Number(value);
         }
+        if (this.control().value === value) {
+            this.control().setValue(null);
+            return;
+        }
         this.control().setValue(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRadio, isStandalone: true, selector: "kl-input-radio", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputRadioElement", first: true, predicate: ["inputRadio"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRadio, isStandalone: true, selector: "kl-input-radio", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disableAutoTypeConversion: { classPropertyName: "disableAutoTypeConversion", publicName: "disableAutoTypeConversion", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputRadioElement", first: true, predicate: ["inputRadio"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === control().value\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-input-radio', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === 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" }]
+            args: [{ selector: 'kl-input-radio', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === control().value\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { inputRadioElement: [{ type: i0.ViewChild, args: ['inputRadio', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disableAutoTypeConversion: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoTypeConversion", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field-input-radio.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.ts","../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.html","../../projects/koala-ui/shared/components/input-field/input-radio/koalarx-ui-shared-components-input-field-input-radio.ts"],"sourcesContent":["import {\n  booleanAttribute,\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 RadioColor =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost';\n\nexport type RadioSize =\n  | 'extraSmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'extraLarge';\n\n@Component({\n  selector: 'kl-input-radio',\n  templateUrl: './input-radio.html',\n  imports: [ReactiveFormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputRadio extends InputFieldBase {\n  private readonly inputRadioElement =\n    viewChild<ElementRef<HTMLInputElement>>('inputRadio');\n\n  color = input<RadioColor>();\n  size = input<RadioSize>();\n  name = input.required<string>();\n  value = input.required<string | number>();\n  disableAutoTypeConversion = input(false, { transform: booleanAttribute });\n\n  private getColorClass(): string {\n    switch (this.color()) {\n      case 'neutral':\n        return 'radio-neutral';\n      case 'primary':\n        return 'radio-primary';\n      case 'secondary':\n        return 'radio-secondary';\n      case 'accent':\n        return 'radio-accent';\n      case 'info':\n        return 'radio-info';\n      case 'success':\n        return 'radio-success';\n      case 'warning':\n        return 'radio-warning';\n      case 'error':\n        return 'radio-error';\n      case 'ghost':\n        return 'radio-ghost';\n      default:\n        return 'radio';\n    }\n  }\n\n  private getSizeClass(): string {\n    switch (this.size()) {\n      case 'extraSmall':\n        return 'radio-xs';\n      case 'small':\n        return 'radio-sm';\n      case 'medium':\n        return 'radio-md';\n      case 'large':\n        return 'radio-lg';\n      case 'extraLarge':\n        return 'radio-xl';\n      default:\n        return 'radio';\n    }\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const input = this.inputRadioElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getColorClass());\n      }\n    });\n\n    effect(() => {\n      const input = this.inputRadioElement()?.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\n    let value: string | number = target.value;\n\n    if (\n      !Number.isNaN(parseInt(value as any)) &&\n      !/^0+[1-9]\\d*$/.test(value) &&\n      !this.disableAutoTypeConversion()\n    ) {\n      value = Number(value);\n    }\n\n    this.control().setValue(value);\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === 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":";;;;;AAoCM,MAAO,UAAW,SAAQ,cAAc,CAAA;AAC3B,IAAA,iBAAiB,GAChC,SAAS,CAA+B,YAAY,6DAAC;IAEvD,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAc;IAC3B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAa;AACzB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAC/B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAmB;IACzC,yBAAyB,GAAG,KAAK,CAAC,KAAK,sEAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAEjE,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,KAAK,EAAE;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,iBAAiB;AAC1B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,YAAY;AACrB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,eAAe;AACxB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,aAAa;AACtB,YAAA;AACE,gBAAA,OAAO,OAAO;;;IAIZ,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,YAAY;AACf,gBAAA,OAAO,UAAU;AACnB,YAAA;AACE,gBAAA,OAAO,OAAO;;;AAIpB,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAAE,aAAa;YAErD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;;AAE7C,SAAC,CAAC;QAEF,MAAM,CAAC,MAAK;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,EAAE,aAAa;YAErD,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;AAE5C,SAAC,CAAC;;AAGJ,IAAA,MAAM,CAAC,KAAY,EAAA;AACjB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAE/C,QAAA,IAAI,KAAK,GAAoB,MAAM,CAAC,KAAK;QAEzC,IACE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAY,CAAC,CAAC;AACrC,YAAA,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC3B,YAAA,CAAC,IAAI,CAAC,yBAAyB,EAAE,EACjC;AACA,YAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;;QAGvB,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;;uGArFrB,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,yBAAA,EAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,UAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpCvB,4eAoBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDaY,mBAAmB,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGlB,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WAEjB,CAAC,mBAAmB,CAAC,EAAA,eAAA,EACb,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4eAAA,EAAA;yGAIL,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,yBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEtCxD;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field-input-radio.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.ts","../../projects/koala-ui/shared/components/input-field/input-radio/input-radio.html","../../projects/koala-ui/shared/components/input-field/input-radio/koalarx-ui-shared-components-input-field-input-radio.ts"],"sourcesContent":["import {\n  booleanAttribute,\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 RadioColor =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost';\n\nexport type RadioSize =\n  | 'extraSmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'extraLarge';\n\n@Component({\n  selector: 'kl-input-radio',\n  templateUrl: './input-radio.html',\n  imports: [ReactiveFormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputRadio extends InputFieldBase {\n  private readonly inputRadioElement =\n    viewChild<ElementRef<HTMLInputElement>>('inputRadio');\n\n  color = input<RadioColor>();\n  size = input<RadioSize>();\n  name = input.required<string>();\n  value = input.required<string | number>();\n  disableAutoTypeConversion = input(false, { transform: booleanAttribute });\n\n  private getColorClass(): string {\n    switch (this.color()) {\n      case 'neutral':\n        return 'radio-neutral';\n      case 'primary':\n        return 'radio-primary';\n      case 'secondary':\n        return 'radio-secondary';\n      case 'accent':\n        return 'radio-accent';\n      case 'info':\n        return 'radio-info';\n      case 'success':\n        return 'radio-success';\n      case 'warning':\n        return 'radio-warning';\n      case 'error':\n        return 'radio-error';\n      case 'ghost':\n        return 'radio-ghost';\n      default:\n        return 'radio';\n    }\n  }\n\n  private getSizeClass(): string {\n    switch (this.size()) {\n      case 'extraSmall':\n        return 'radio-xs';\n      case 'small':\n        return 'radio-sm';\n      case 'medium':\n        return 'radio-md';\n      case 'large':\n        return 'radio-lg';\n      case 'extraLarge':\n        return 'radio-xl';\n      default:\n        return 'radio';\n    }\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      const input = this.inputRadioElement()?.nativeElement;\n\n      if (input) {\n        input.classList.add(this.getColorClass());\n      }\n    });\n\n    effect(() => {\n      const input = this.inputRadioElement()?.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\n    let value: string | number = target.value;\n\n    if (\n      !Number.isNaN(parseInt(value as any)) &&\n      !/^0+[1-9]\\d*$/.test(value) &&\n      !this.disableAutoTypeConversion()\n    ) {\n      value = Number(value);\n    }\n\n    if (this.control().value === value) {\n      this.control().setValue(null);\n      return;\n    }\n\n    this.control().setValue(value);\n  }\n}\n","<label [attr.for]=\"fieldId\" class=\"flex items-center gap-2 cursor-pointer\">\n  <input #inputRadio\n    [id]=\"fieldId\"\n    type=\"radio\"\n    class=\"radio\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"value() === control().value\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle($event)\"\n  />\n\n  <ng-content />\n</label>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, computed, linkedSignal, afterRenderEffect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule } from '@angular/forms';
+
+class InputRange {
+    destroyRef = inject(DestroyRef);
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    min = input.required(...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input.required(...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input.required(...(ngDevMode ? [{ debugName: "step" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    colorClass = computed(() => {
+        switch (this.color()) {
+            case 'neutral':
+                return 'range-neutral';
+            case 'primary':
+                return 'range-primary';
+            case 'secondary':
+                return 'range-secondary';
+            case 'accent':
+                return 'range-accent';
+            case 'info':
+                return 'range-info';
+            case 'success':
+                return 'range-success';
+            case 'warning':
+                return 'range-warning';
+            case 'error':
+                return 'range-error';
+            case 'ghost':
+                return 'range-ghost';
+            default:
+                return 'range';
+        }
+    }, ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
+    sizeClass = computed(() => {
+        switch (this.size()) {
+            case 'extraSmall':
+                return 'range-xs';
+            case 'small':
+                return 'range-sm';
+            case 'medium':
+                return 'range-md';
+            case 'large':
+                return 'range-lg';
+            case 'extraLarge':
+                return 'range-xl';
+            default:
+                return '';
+        }
+    }, ...(ngDevMode ? [{ debugName: "sizeClass" }] : []));
+    steps = computed(() => {
+        const stepArray = [];
+        if (this.step() > 0) {
+            for (let i = this.min(); i <= this.max(); i += this.step()) {
+                stepArray.push(i);
+            }
+        }
+        return stepArray;
+    }, ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    value = linkedSignal(() => this.control().value, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    constructor() {
+        afterRenderEffect(() => {
+            this.control()
+                .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((value) => {
+                this.value.set(value);
+            });
+        });
+    }
+    setValue(event) {
+        const target = event.target;
+        this.control().setValue(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRange, isStandalone: true, selector: "kl-input-range", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full\">\n  <input type=\"range\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [value]=\"value()\"\n    class=\"range w-full\"\n    [class]=\"colorClass() + ' ' + sizeClass()\"\n    [step]=\"step()\"\n    (change)=\"setValue($event)\"\n  />\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>|</span>\n    }\n  </div>\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>{{step}}</span>\n    }\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRange, decorators: [{
+            type: Component,
+            args: [{ selector: 'kl-input-range', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n  <input type=\"range\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [value]=\"value()\"\n    class=\"range w-full\"\n    [class]=\"colorClass() + ' ' + sizeClass()\"\n    [step]=\"step()\"\n    (change)=\"setValue($event)\"\n  />\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>|</span>\n    }\n  </div>\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>{{step}}</span>\n    }\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], 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.
+ */
+
+export { InputRange };
+//# sourceMappingURL=koalarx-ui-shared-components-input-field-range.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"koalarx-ui-shared-components-input-field-range.mjs","sources":["../../projects/koala-ui/shared/components/input-field/range/input-range.ts","../../projects/koala-ui/shared/components/input-field/range/input-range.html","../../projects/koala-ui/shared/components/input-field/range/koalarx-ui-shared-components-input-field-range.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  inject,\n  input,\n  linkedSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\n\nexport type RangeColor =\n  | 'neutral'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost';\n\nexport type RangeSize =\n  | 'extraSmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'extraLarge';\n\n@Component({\n  selector: 'kl-input-range',\n  templateUrl: './input-range.html',\n  imports: [ReactiveFormsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputRange {\n  private destroyRef = inject(DestroyRef);\n\n  control = input.required<FormControl>();\n  min = input.required<number>();\n  max = input.required<number>();\n  step = input.required<number>();\n  hint = input<string>('');\n  color = input<RangeColor>();\n  size = input<RangeSize>();\n\n  colorClass = computed(() => {\n    switch (this.color()) {\n      case 'neutral':\n        return 'range-neutral';\n      case 'primary':\n        return 'range-primary';\n      case 'secondary':\n        return 'range-secondary';\n      case 'accent':\n        return 'range-accent';\n      case 'info':\n        return 'range-info';\n      case 'success':\n        return 'range-success';\n      case 'warning':\n        return 'range-warning';\n      case 'error':\n        return 'range-error';\n      case 'ghost':\n        return 'range-ghost';\n      default:\n        return 'range';\n    }\n  });\n\n  sizeClass = computed(() => {\n    switch (this.size()) {\n      case 'extraSmall':\n        return 'range-xs';\n      case 'small':\n        return 'range-sm';\n      case 'medium':\n        return 'range-md';\n      case 'large':\n        return 'range-lg';\n      case 'extraLarge':\n        return 'range-xl';\n      default:\n        return '';\n    }\n  });\n\n  steps = computed(() => {\n    const stepArray = [];\n\n    if (this.step() > 0) {\n      for (let i = this.min(); i <= this.max(); i += this.step()) {\n        stepArray.push(i);\n      }\n    }\n\n    return stepArray;\n  });\n\n  value = linkedSignal(() => this.control().value);\n\n  constructor() {\n    afterRenderEffect(() => {\n      this.control()\n        .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((value) => {\n          this.value.set(value);\n        });\n    });\n  }\n\n  setValue(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.control().setValue(target.value);\n  }\n}\n","<div class=\"w-full\">\n  <input type=\"range\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [value]=\"value()\"\n    class=\"range w-full\"\n    [class]=\"colorClass() + ' ' + sizeClass()\"\n    [step]=\"step()\"\n    (change)=\"setValue($event)\"\n  />\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>|</span>\n    }\n  </div>\n\n  <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n    @for (step of steps(); track $index) {\n      <span>{{step}}</span>\n    }\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">{{hint()}}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

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