@koalarx/ui 20.3.3 → 20.4.3

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

@@ -1 +1 @@
-{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  signal,\n} from '@angular/core';\nimport { FormControl, Validators } from '@angular/forms';\nimport { CURRENT_THEME } from '@koalarx/ui/core/config';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly required = signal(false);\n  protected readonly isDisabled = linkedSignal(() => this.disabled());\n  protected readonly isRequired = this.required.asReadonly();\n  protected readonly fieldId = randomString(10, {\n    lowercase: true,\n    uppercase: true,\n  });\n\n  control = input.required<FormControl>();\n  label = input<string>();\n  placeholder = input<string>('');\n  hint = input<string>();\n  disabled = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    effect(() => this.checkIsRequired(this.control()));\n\n    effect(() => {\n      CURRENT_THEME();\n\n      if (\n        this.elementRef.nativeElement?.tagName.toLowerCase() !==\n        'kl-input-field'\n      ) {\n        const container = this.elementRef.nativeElement.parentElement;\n\n        if (container) {\n          const containerBgColor = this.getBgColorParent(container);\n\n          this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n        }\n      }\n    });\n  }\n\n  private getBgColorParent(element: HTMLElement): string {\n    const containerBgColor = window.getComputedStyle(element).backgroundColor;\n\n    if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n      if (!element.parentElement) {\n        return 'var(--color-base-100)';\n      }\n\n      return this.getBgColorParent(element.parentElement!);\n    }\n\n    return containerBgColor;\n  }\n\n  private checkIsRequired(control: FormControl) {\n    this.required.set(control.hasValidator(Validators.required));\n  }\n}\n","import { Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n  | 'text'\n  | 'email'\n  | 'password'\n  | 'number'\n  | 'tel'\n  | 'url'\n  | 'date'\n  | 'datetime-local'\n  | 'month'\n  | 'time'\n  | 'search';\n\n@Component({\n  selector: 'kl-input-field',\n  templateUrl: './input-field.html',\n  imports: [ReactiveFormsModule, InputMask, FieldErrors],\n})\nexport class InputField extends InputFieldBase {\n  type = input<InputTypeField>('text');\n  mask = input<string>('');\n  min = input<string>();\n  max = input<string>();\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    [mask]=\"mask()\"\n    [type]=\"type()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\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":";;;;;;;;;MAesB,cAAc,CAAA;AACjB,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;IACtB,UAAU,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;AAChD,IAAA,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AACvC,IAAA,OAAO,GAAG,YAAY,CAAC,EAAE,EAAE;AAC5C,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,SAAS,EAAE,IAAI;AAChB,KAAA,CAAC;AAEF,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAe;IACvC,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACvB,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC;IAC/B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACtB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AAExD,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAElD,MAAM,CAAC,MAAK;AACV,YAAA,aAAa,EAAE;YAEf,IACE,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC,WAAW,EAAE;AACpD,gBAAA,gBAAgB,EAChB;gBACA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa;gBAE7D,IAAI,SAAS,EAAE;oBACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;oBAEzD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,GAAG,CAAA,YAAA,EAAe,gBAAgB,CAAA,CAAE;;;AAG7E,SAAC,CAAC;;AAGI,IAAA,gBAAgB,CAAC,OAAoB,EAAA;QAC3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAAe;AAEzE,QAAA,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,KAAK,kBAAkB,EAAE;AAChE,YAAA,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;AAC1B,gBAAA,OAAO,uBAAuB;;YAGhC,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,aAAc,CAAC;;AAGtD,QAAA,OAAO,gBAAgB;;AAGjB,IAAA,eAAe,CAAC,OAAoB,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;;uGApD1C,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBADnC;;;ACUK,MAAO,UAAW,SAAQ,cAAc,CAAA;AAC5C,IAAA,IAAI,GAAG,KAAK,CAAiB,MAAM,gDAAC;AACpC,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,gDAAC;IACxB,GAAG,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,KAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;IACrB,GAAG,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,KAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;uGAJV,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,2jBCxBvB,41BAmCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDbY,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,SAAS,0EAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE1C,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WAEjB,CAAC,mBAAmB,EAAE,SAAS,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,41BAAA,EAAA;;;AEtBxD;;AAEG;;;;"}
+{"version":3,"file":"koalarx-ui-shared-components-input-field.mjs","sources":["../../projects/koala-ui/shared/components/input-field/input-field.base.ts","../../projects/koala-ui/shared/components/input-field/input-field.ts","../../projects/koala-ui/shared/components/input-field/input-field.html","../../projects/koala-ui/shared/components/input-field/koalarx-ui-shared-components-input-field.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  signal,\n} from '@angular/core';\nimport { FormControl, Validators } from '@angular/forms';\nimport { CURRENT_THEME } from '@koalarx/ui/core/config';\nimport { randomString } from '@koalarx/utils/KlString';\n\n@Directive()\nexport abstract class InputFieldBase {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly required = signal(false);\n\n  readonly isDisabled = linkedSignal(() => this.disabled());\n  readonly isRequired = this.required.asReadonly();\n  readonly fieldId = randomString(10, {\n    lowercase: true,\n    uppercase: true,\n  });\n\n  control = input.required<FormControl>();\n  label = input<string>();\n  placeholder = input<string>('');\n  hint = input<string>();\n  disabled = input(false, { transform: booleanAttribute });\n\n  constructor() {\n    effect(() => this.checkIsRequired(this.control()));\n\n    effect(() => {\n      CURRENT_THEME();\n\n      if (\n        this.elementRef.nativeElement?.tagName.toLowerCase() !==\n        'kl-input-field'\n      ) {\n        const container = this.elementRef.nativeElement.parentElement;\n\n        if (container) {\n          const containerBgColor = this.getBgColorParent(container);\n\n          this.elementRef.nativeElement.style = `--bg-input: ${containerBgColor}`;\n        }\n      }\n    });\n  }\n\n  private getBgColorParent(element: HTMLElement): string {\n    const containerBgColor = window.getComputedStyle(element).backgroundColor;\n\n    if (!containerBgColor || containerBgColor === 'rgba(0, 0, 0, 0)') {\n      if (!element.parentElement) {\n        return 'var(--color-base-100)';\n      }\n\n      return this.getBgColorParent(element.parentElement!);\n    }\n\n    return containerBgColor;\n  }\n\n  private checkIsRequired(control: FormControl) {\n    this.required.set(control.hasValidator(Validators.required));\n  }\n}\n","import { Component, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputMask } from '@koalarx/ui/shared/directives';\nimport { InputFieldBase } from './input-field.base';\n\ntype InputTypeField =\n  | 'text'\n  | 'email'\n  | 'password'\n  | 'number'\n  | 'tel'\n  | 'url'\n  | 'date'\n  | 'datetime-local'\n  | 'month'\n  | 'time'\n  | 'search';\n\n@Component({\n  selector: 'kl-input-field',\n  templateUrl: './input-field.html',\n  imports: [ReactiveFormsModule, InputMask, FieldErrors],\n})\nexport class InputField extends InputFieldBase {\n  type = input<InputTypeField>('text');\n  mask = input<string>('');\n  min = input<string>();\n  max = input<string>();\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    [mask]=\"mask()\"\n    [type]=\"type()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koalarx/ui",
-  "version": "20.3.3",
+  "version": "20.4.3",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0"
@@ -15,8 +15,8 @@
     "@koalarx/utils": "^4.2.1",
     "@ngx-loading-bar/core": "^7.0.0",
     "@ngx-loading-bar/router": "^7.0.0",
-    "@tailwindcss/postcss": "^4.1.11",
-    "daisyui": "^5.0.43",
+    "@tailwindcss/postcss": "^4.1.18",
+    "daisyui": "^5.5.14",
     "date-fns": "^4.1.0",
     "jwt-decode": "^4.0.0",
     "marked": "^15.0.0",
@@ -26,7 +26,7 @@
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.18",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
@@ -62,6 +62,22 @@
       "types": "./theme/index.d.ts",
       "default": "./fesm2022/koalarx-ui-theme.mjs"
     },
+    "./shared/directives": {
+      "types": "./shared/directives/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-directives.mjs"
+    },
+    "./shared/services": {
+      "types": "./shared/services/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-services.mjs"
+    },
+    "./shared/utils": {
+      "types": "./shared/utils/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-utils.mjs"
+    },
+    "./shared/validators": {
+      "types": "./shared/validators/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-validators.mjs"
+    },
     "./core/base": {
       "types": "./core/base/index.d.ts",
       "default": "./fesm2022/koalarx-ui-core-base.mjs"
@@ -86,46 +102,6 @@
       "types": "./core/translations/index.d.ts",
       "default": "./fesm2022/koalarx-ui-core-translations.mjs"
     },
-    "./shared/directives": {
-      "types": "./shared/directives/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-directives.mjs"
-    },
-    "./shared/services": {
-      "types": "./shared/services/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-services.mjs"
-    },
-    "./shared/utils": {
-      "types": "./shared/utils/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-utils.mjs"
-    },
-    "./shared/validators": {
-      "types": "./shared/validators/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-validators.mjs"
-    },
-    "./core/components/dialog": {
-      "types": "./core/components/dialog/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-dialog.mjs"
-    },
-    "./core/components/kl-root": {
-      "types": "./core/components/kl-root/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-kl-root.mjs"
-    },
-    "./core/components/loader": {
-      "types": "./core/components/loader/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-loader.mjs"
-    },
-    "./core/components/loader-page": {
-      "types": "./core/components/loader-page/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-loader-page.mjs"
-    },
-    "./core/components/side-window": {
-      "types": "./core/components/side-window/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-side-window.mjs"
-    },
-    "./core/components/snackbar": {
-      "types": "./core/components/snackbar/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-snackbar.mjs"
-    },
     "./shared/components/accordion": {
       "types": "./shared/components/accordion/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-accordion.mjs"
@@ -190,9 +166,29 @@
       "types": "./shared/components/vertical-menu/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-vertical-menu.mjs"
     },
-    "./shared/components/input-field/autocomplete": {
-      "types": "./shared/components/input-field/autocomplete/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-components-input-field-autocomplete.mjs"
+    "./core/components/dialog": {
+      "types": "./core/components/dialog/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-dialog.mjs"
+    },
+    "./core/components/kl-root": {
+      "types": "./core/components/kl-root/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-kl-root.mjs"
+    },
+    "./core/components/loader": {
+      "types": "./core/components/loader/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-loader.mjs"
+    },
+    "./core/components/loader-page": {
+      "types": "./core/components/loader-page/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-loader-page.mjs"
+    },
+    "./core/components/side-window": {
+      "types": "./core/components/side-window/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-side-window.mjs"
+    },
+    "./core/components/snackbar": {
+      "types": "./core/components/snackbar/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-snackbar.mjs"
     },
     "./shared/components/input-field/field-group": {
       "types": "./shared/components/input-field/field-group/index.d.ts",
@@ -206,6 +202,10 @@
       "types": "./shared/components/input-field/input-checkbox/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-checkbox.mjs"
     },
+    "./shared/components/input-field/input-cnpj": {
+      "types": "./shared/components/input-field/input-cnpj/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cnpj.mjs"
+    },
     "./shared/components/input-field/input-cpf": {
       "types": "./shared/components/input-field/input-cpf/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cpf.mjs"
@@ -214,10 +214,6 @@
       "types": "./shared/components/input-field/input-currency/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-currency.mjs"
     },
-    "./shared/components/input-field/input-cnpj": {
-      "types": "./shared/components/input-field/input-cnpj/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-cnpj.mjs"
-    },
     "./shared/components/input-field/input-date": {
       "types": "./shared/components/input-field/input-date/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-date.mjs"
@@ -234,14 +230,14 @@
       "types": "./shared/components/input-field/input-month/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-month.mjs"
     },
-    "./shared/components/input-field/input-radio": {
-      "types": "./shared/components/input-field/input-radio/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-radio.mjs"
-    },
     "./shared/components/input-field/input-password": {
       "types": "./shared/components/input-field/input-password/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-password.mjs"
     },
+    "./shared/components/input-field/input-radio": {
+      "types": "./shared/components/input-field/input-radio/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-radio.mjs"
+    },
     "./shared/components/input-field/input-text": {
       "types": "./shared/components/input-field/input-text/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-text.mjs"
@@ -254,14 +250,14 @@
       "types": "./shared/components/input-field/input-url/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-input-url.mjs"
     },
-    "./shared/components/input-field/switcher": {
-      "types": "./shared/components/input-field/switcher/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-components-input-field-switcher.mjs"
-    },
     "./shared/components/input-field/select": {
       "types": "./shared/components/input-field/select/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-select.mjs"
     },
+    "./shared/components/input-field/switcher": {
+      "types": "./shared/components/input-field/switcher/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-components-input-field-switcher.mjs"
+    },
     "./shared/components/input-field/textarea": {
       "types": "./shared/components/input-field/textarea/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-textarea.mjs"

package/shared/components/field-errors/index.d.ts

@@ -14,6 +14,7 @@ declare class FieldErrors {
         invalidPasswordHasUppercase: string;
         invalidPasswordHasNumber: string;
         invalidConfirmPassword: string;
+        selectTypeSearch: string;
     };
     field: i0.InputSignal<FormControl<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldErrors, never>;

package/shared/components/input-field/index.d.ts

@@ -4,9 +4,9 @@ import { FormControl } from '@angular/forms';
 declare abstract class InputFieldBase {
     private readonly elementRef;
     private readonly required;
-    protected readonly isDisabled: _angular_core.WritableSignal<boolean>;
-    protected readonly isRequired: _angular_core.Signal<boolean>;
-    protected readonly fieldId: string;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    readonly isRequired: _angular_core.Signal<boolean>;
+    readonly fieldId: string;
     control: _angular_core.InputSignal<FormControl<any>>;
     label: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;

package/shared/components/input-field/input-cnpj/index.d.ts

@@ -19,6 +19,7 @@ declare class InputCnpj extends InputFieldBase {
         invalidPasswordHasUppercase: string;
         invalidPasswordHasNumber: string;
         invalidConfirmPassword: string;
+        selectTypeSearch: string;
     };
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<InputCnpj, never>;

package/shared/components/input-field/input-cpf/index.d.ts

@@ -19,6 +19,7 @@ declare class InputCpf extends InputFieldBase {
         invalidPasswordHasUppercase: string;
         invalidPasswordHasNumber: string;
         invalidConfirmPassword: string;
+        selectTypeSearch: string;
     };
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<InputCpf, never>;

package/shared/components/input-field/input-password/index.d.ts

@@ -33,6 +33,7 @@ declare class InputPassword extends InputFieldBase implements OnInit {
         invalidPasswordHasUppercase: string;
         invalidPasswordHasNumber: string;
         invalidConfirmPassword: string;
+        selectTypeSearch: string;
     };
     type: _angular_core.WritableSignal<InputPasswordType>;
     enableStrongPasswordCheck: _angular_core.InputSignalWithTransform<boolean, unknown>;

package/shared/components/input-field/input-url/index.d.ts

@@ -14,6 +14,7 @@ declare class InputUrl extends InputFieldBase {
         invalidPasswordHasUppercase: string;
         invalidPasswordHasNumber: string;
         invalidConfirmPassword: string;
+        selectTypeSearch: string;
     };
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<InputUrl, never>;

package/shared/components/input-field/select/index.d.ts

@@ -1,7 +1,13 @@
-import * as i0 from '@angular/core';
-import { ResourceRef } from '@angular/core';
+import * as _koalarx_ui_shared_components_input_field_select from '@koalarx/ui/shared/components/input-field/select';
+import * as _angular_core from '@angular/core';
+import { ResourceRef, Signal, OnInit, ApplicationRef, DestroyRef, Injector, ElementRef } from '@angular/core';
 import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
 
+interface SelectDataOptionsFnParams {
+    filter?: string | null;
+    currentValue?: any | null;
+    internalFilter?: string | null;
+}
 type SelectValue = string | number | boolean | null;
 interface SelectOption<TData = any> {
     label: string;
@@ -9,12 +15,67 @@ interface SelectOption<TData = any> {
     data?: TData;
 }
 type SelectList<TData = any> = SelectOption<TData>[];
-declare class Select extends InputFieldBase {
-    options: i0.InputSignal<ResourceRef<SelectList<any>>>;
-    onSelectChange(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Select, "kl-select", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; }, {}, never, ["[errors]"], true, never>;
+type SelectDataOptionsFn = (data: Signal<SelectDataOptionsFnParams>) => ResourceRef<SelectList>;
+type SelectDataOptions = SelectDataOptionsFn | ResourceRef<SelectList> | Signal<SelectList> | SelectList;
+interface OptionsResource {
+    onDemand?: ResourceRef<SelectList>;
+    onServer?: ResourceRef<SelectList>;
+    inMemory?: SelectList;
+    inMemoryWithLoading?: Signal<SelectList>;
+}
+
+declare class Select extends InputFieldBase implements OnInit {
+    readonly appRef: ApplicationRef;
+    readonly destroyRef: DestroyRef;
+    readonly injector: Injector;
+    readonly selectField: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    readonly optionsResource: _angular_core.WritableSignal<OptionsResource | null>;
+    readonly optionList: _angular_core.WritableSignal<SelectList>;
+    readonly selectedOptions: _angular_core.WritableSignal<SelectList>;
+    readonly isLoading: _angular_core.WritableSignal<boolean>;
+    readonly requestOptionsParams: _angular_core.WritableSignal<SelectDataOptionsFnParams>;
+    readonly translations: {
+        required: string;
+        invalidEmail: string;
+        invalidMinLength: (requiredLength: number) => string;
+        invalidCPF: string;
+        invalidCNPJ: string;
+        invalidURL: string;
+        invalidPasswordHasSpecialCharacters: string;
+        invalidPasswordHasLowercase: string;
+        invalidPasswordHasUppercase: string;
+        invalidPasswordHasNumber: string;
+        invalidConfirmPassword: string;
+        selectTypeSearch: string;
+    };
+    readonly supportsExperimentalSelect: boolean;
+    readonly hasValue: _angular_core.WritableSignal<boolean>;
+    filter: _angular_core.ModelSignal<string | undefined>;
+    filteredValue: _angular_core.WritableSignal<string | null>;
+    options: _angular_core.InputSignal<SelectDataOptions>;
+    internalFilter: _angular_core.InputSignal<string | null>;
+    withoutFilter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selectedItem: _angular_core.OutputEmitterRef<any>;
+    get selectElement(): HTMLDivElement;
+    constructor();
+    ngOnInit(): void;
+    applyFilter(options: SelectList): _koalarx_ui_shared_components_input_field_select.SelectOption<any>[];
+    setValue(event: Event): void;
+    clear(event: MouseEvent): void;
+    removeOption(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kl-select", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "internalFilter": { "alias": "internalFilter"; "required": false; "isSignal": true; }; "withoutFilter": { "alias": "withoutFilter"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, { "filter": "filterChange"; "selectedItem": "selectedItem"; }, never, ["[errors]"], true, never>;
+}
+
+declare class SelectBuilder {
+    onDemand(config: SelectDataOptionsFn): SelectDataOptionsFn;
+    onServer(config: ResourceRef<SelectList>): ResourceRef<SelectList>;
+    inMemory(config: SelectList): SelectList;
+    inMemoryWithLoading(config: Signal<SelectList>): Signal<SelectList>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectBuilder, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SelectBuilder>;
 }
 
-export { Select };
-export type { SelectList, SelectOption };
+export { Select, SelectBuilder };
+export type { OptionsResource, SelectDataOptions, SelectDataOptionsFn, SelectDataOptionsFnParams, SelectList, SelectOption, SelectValue };

package/theme/animations.css

@@ -19,4 +19,16 @@
       transform: translateX(100%);
     }
   }
+
+  @keyframes bounce {
+    0% {
+      top: 10px;
+    }
+    60% {
+      top: -5px;
+    }
+    100% {
+      top: 0;
+    }
+  }
 }

package/theme/form.css

@@ -4,13 +4,17 @@
   display: block;
 }
 
-kl-autocomplete-field .autocomplete-label {
+kl-select-multiple .select-multiple-button {
+  overflow: unset;
+}
+
+kl-select-multiple .select-multiple-label {
   top: 0;
   left: 0.75rem;
   transition: top 0.2s, font-size 0.2s;
 }
 
-kl-autocomplete-field .has-value .autocomplete-label {
+kl-select-multiple .has-value .select-multiple-label {
   position: absolute;
   display: block;
   font-size: 0.75rem;
@@ -19,12 +23,12 @@ kl-autocomplete-field .has-value .autocomplete-label {
   padding: 0 0.3rem;
 }
 
-kl-autocomplete-field .has-value .autocomplete-label span {
+kl-select-multiple .has-value .select-multiple-label span {
   position: relative;
   z-index: 2;
 }
 
-kl-autocomplete-field .has-value .autocomplete-label:after {
+kl-select-multiple .has-value .select-multiple-label:after {
   content: "";
   position: absolute;
   width: 100%;
@@ -34,21 +38,21 @@ kl-autocomplete-field .has-value .autocomplete-label:after {
   left: 0;
 }
 
-kl-autocomplete-field .has-value:focus .autocomplete-label:after {
+kl-select-multiple .has-value:focus .select-multiple-label:after {
   height: 4px;
 }
 
-.kl-autocomplete-options-container input {
+.kl-select-multiple-options-container input {
   -webkit-appearance: none;
   appearance: none;
 }
 
-.kl-autocomplete-options-container label.active {
+.kl-select-multiple-options-container label.active {
   background-color: rgba(63, 63, 63, 0.7);
   transition: background-color 0.1s;
 }
 
-.kl-autocomplete-options-container label:has(input:checked):after {
+.kl-select-multiple-options-container label:has(input:checked):after {
   content: "\f00c";
   color: var(--color-neutral-500);
   font-family: "Font Awesome 6 Free";
@@ -96,3 +100,191 @@ button:focus {
   font-size: 0.65rem;
   text-transform: uppercase;
 }
+
+label.floating-label:not(:has(option:checked)) > span {
+  top: calc(var(--size-field, 0.25rem) * 10 / 2);
+  translate: 0 -50%;
+  pointer-events: none;
+  scale: 1;
+}
+
+kl-select .kl-select-container {
+  position: relative;
+  overflow: unset;
+}
+
+kl-select .kl-select-label {
+  position: absolute;
+  display: block;
+  top: 0.5rem;
+  left: 1rem;
+  font-size: 1rem;
+  transition: all 0.1s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+kl-select .has-value:has(selectedcontent > *) .kl-select-label,
+kl-select
+  .has-value:has(.kl-select-content .selectcontent > *)
+  .kl-select-label {
+  font-size: 0.75rem;
+  top: -0.6rem;
+  left: 0.6rem;
+  padding: 0 0.3rem;
+}
+
+kl-select .has-value .kl-select-label > span {
+  position: relative;
+  z-index: 2;
+}
+
+kl-select .has-value .kl-select-label:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--bg-input);
+  bottom: 0.4rem;
+  left: 0;
+  z-index: 1;
+}
+
+kl-select .has-value:focus .kl-select-label:after {
+  height: 4px;
+}
+
+select,
+::picker(select) {
+  appearance: base-select;
+}
+
+select,
+.kl-select-button {
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: calc(var(--spacing) * 10);
+  background-color: var(--color-base-100);
+  padding-inline: 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-neutral-600);
+  transition: opacity 0.3s;
+}
+
+select::picker-icon {
+  display: none;
+}
+
+kl-select .picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.8rem;
+  transition: rotate 0.3s ease;
+  color: var(--color-neutral-400);
+}
+
+select:open .picker,
+kl-select .kl-select-button:popover-open .picker {
+  rotate: 180deg;
+}
+
+.kl-select-options-container[popover] {
+  display: none;
+}
+
+::picker(select),
+.kl-select-options-container[popover] {
+  position: relative;
+  width: var(--select-width);
+  box-sizing: border-box;
+  margin-block-start: 0.5rem;
+  margin-block-end: 0.5rem;
+  padding: 0;
+  background-color: var(--color-base-300);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-neutral-600);
+  transform: translateY(-1rem);
+  opacity: 0;
+  overflow: hidden;
+  transition: transform 0.3s ease allow-discrete,
+    opacity 0.3s ease allow-discrete, display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete, height 0.3s allow-discrete;
+  position-area: var(--select-position-area, bottom);
+}
+
+::picker(select):popover-open,
+.kl-select-options-container.with-popover:popover-open {
+  transform: translateY(0);
+  opacity: 1;
+  display: flex;
+}
+
+select {
+  anchor-name: --select-content;
+}
+
+select selectedcontent span:not(.not-animate) {
+  position: relative;
+  animation: 0.5s ease bounce;
+}
+
+@starting-style {
+  ::picker(select):popover-open,
+  .kl-select-options-container.with-popover:popover-open {
+    transform: translateY(-1rem);
+    opacity: 0;
+  }
+}
+
+select option,
+.kl-select-options-container.with-popover .kl-select-option-content {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-md);
+  color: var(--color-neutral-300);
+  white-space: break-spaces;
+}
+
+.kl-select-options-container.with-popover .kl-select-option-content input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select option:focus,
+.kl-select-options-container.with-popover
+  .kl-select-option-content
+  input:focus {
+  background-color: rgba(63, 63, 63, 0.7);
+  outline: none;
+  transition: background-color 0.1s;
+}
+
+select option:checked,
+.kl-select-options-container.with-popover
+  .kl-select-option-content:has(input:checked) {
+  background-color: rgba(63, 63, 63, 0.7);
+  transition: background-color 0.1s;
+}
+
+select option::checkmark,
+.kl-select-options-container.with-popover
+  .kl-select-option-content:has(input:checked):after {
+  content: "\f00c";
+  color: var(--color-neutral-500);
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  font-size: 1rem;
+  margin-left: auto;
+  order: 1;
+}
+
+.kl-select-options-container.with-popover label.active {
+  background-color: rgba(63, 63, 63, 0.7);
+  transition: background-color 0.1s;
+}