@wlcm/angular 19.2.2 → 19.2.4

package/phone-input/fesm2022/wlcm-angular-phone-input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, effect, forwardRef, ElementRef, HostListener, Inject, Directive, Pipe, output, ViewChild, Component, inject, NgZone, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, input, effect, forwardRef, ElementRef, Directive, Inject, HostListener, Pipe, output, Component, ViewChild, inject, NgZone, ContentChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@angular/forms';
@@ -10,7 +10,7 @@ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import examples from 'libphonenumber-js/mobile/examples';
 import { Subject, fromEvent, takeUntil, merge, tap } from 'rxjs';
 import * as i1 from '@wlcm/angular/forms';
-import { WlcmFormsModule, WlcmSelectComponent, WLCM_INPUT_BINDER } from '@wlcm/angular/forms';
+import { WlcmSelectComponent, WlcmFormsModule, WLCM_INPUT_BINDER } from '@wlcm/angular/forms';
 import { WlcmOption } from '@wlcm/angular/core';
 import { countries, getEmojiFlag, getCountryCode } from 'countries-list';
 
@@ -135,8 +135,8 @@ let WlcmPhoneInputDirective = class WlcmPhoneInputDirective {
             .pipe(untilDestroyed(this))
             .subscribe((event) => this.handlePaste(event));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputDirective, deps: [{ token: i0.ElementRef }, { token: WLCM_PHONE_ADAPTER }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.9", type: WlcmPhoneInputDirective, isStandalone: true, selector: "[wlcmPhoneInput]", inputs: { applyMask: { classPropertyName: "applyMask", publicName: "applyMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "handleBlur($event)" }, classAttribute: "wlcm-form-field-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputDirective, deps: [{ token: i0.ElementRef }, { token: WLCM_PHONE_ADAPTER }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: WlcmPhoneInputDirective, isStandalone: true, selector: "[wlcmPhoneInput]", inputs: { applyMask: { classPropertyName: "applyMask", publicName: "applyMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "handleBlur($event)" }, classAttribute: "wlcm-form-field-input" }, providers: [
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmPhoneInputDirective), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmPhoneInputDirective), multi: true },
         ], ngImport: i0 }); }
@@ -146,7 +146,7 @@ WlcmPhoneInputDirective = __decorate([
     __metadata("design:paramtypes", [ElementRef,
         WlcmPhoneAdapter])
 ], WlcmPhoneInputDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmPhoneInput]',
@@ -194,10 +194,10 @@ class PhoneCodePipe {
     transform(value) {
         return value ? getPhoneCode(value) : '1';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PhoneCodePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: PhoneCodePipe, isStandalone: true, name: "phoneCode" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PhoneCodePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PhoneCodePipe, isStandalone: true, name: "phoneCode" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PhoneCodePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PhoneCodePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'phoneCode',
@@ -214,10 +214,10 @@ class WlcmCountryCodeSelectComponent {
     get selectComponent() {
         return this.wlcmSelect.matSelect;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCountryCodeSelectComponent, deps: [{ token: WLCM_COUNTRY_CODE_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: WlcmCountryCodeSelectComponent, isStandalone: true, selector: "wlcm-country-code-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wlcm-country-code-select" }, viewQueries: [{ propertyName: "wlcmSelect", first: true, predicate: WlcmSelectComponent, descendants: true }], ngImport: i0, template: "<wlcm-select\n  [options]=\"options\"\n  [formControl]=\"control()\"\n  [optionTemplate]=\"optionTemplate\"\n  [triggerTemplate]=\"triggerTemplate\"\n  (selectionChange)=\"changed.emit($event)\"\n></wlcm-select>\n\n<ng-template #optionTemplate let-option>\n  <span class=\"emoji-flag\">{{ option.emojiFlag }}</span>\n\n  {{ option.viewValue }}\n</ng-template>\n\n<ng-template #triggerTemplate let-selected>\n  <div class=\"wlcm-country-code-select-trigger\">\n    +{{ selected?.value | phoneCode }}\n  </div>\n</ng-template>\n", styles: [".emoji-flag{font-size:20px;vertical-align:bottom;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1.WlcmSelectComponent, selector: "wlcm-select", inputs: ["multiple", "placeholder", "fetchPaginatedOptions", "canSelect", "queryParams", "paginated", "options", "selectOptionFormat", "optionTemplate", "triggerTemplate", "isOptionDisabled"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: PhoneCodePipe, name: "phoneCode" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmCountryCodeSelectComponent, deps: [{ token: WLCM_COUNTRY_CODE_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: WlcmCountryCodeSelectComponent, isStandalone: true, selector: "wlcm-country-code-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wlcm-country-code-select" }, viewQueries: [{ propertyName: "wlcmSelect", first: true, predicate: WlcmSelectComponent, descendants: true }], ngImport: i0, template: "<wlcm-select\n  [options]=\"options\"\n  [formControl]=\"control()\"\n  [optionTemplate]=\"optionTemplate\"\n  [triggerTemplate]=\"triggerTemplate\"\n  (selectionChange)=\"changed.emit($event)\"\n></wlcm-select>\n\n<ng-template #optionTemplate let-option>\n  <span class=\"emoji-flag\">{{ option.emojiFlag }}</span>\n\n  {{ option.viewValue }}\n</ng-template>\n\n<ng-template #triggerTemplate let-selected>\n  <div class=\"wlcm-country-code-select-trigger\">\n    +{{ selected?.value | phoneCode }}\n  </div>\n</ng-template>\n", styles: [".emoji-flag{font-size:20px;vertical-align:bottom;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1.WlcmSelectComponent, selector: "wlcm-select", inputs: ["multiple", "placeholder", "fetchPaginatedOptions", "canSelect", "queryParams", "paginated", "options", "selectOptionFormat", "optionTemplate", "triggerTemplate", "isOptionDisabled"], outputs: ["selectionChange", "opened", "closed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: PhoneCodePipe, name: "phoneCode" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmCountryCodeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmCountryCodeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-country-code-select', host: { class: 'wlcm-country-code-select' }, standalone: true, imports: [CommonModule, WlcmFormsModule, ReactiveFormsModule, PhoneCodePipe], template: "<wlcm-select\n  [options]=\"options\"\n  [formControl]=\"control()\"\n  [optionTemplate]=\"optionTemplate\"\n  [triggerTemplate]=\"triggerTemplate\"\n  (selectionChange)=\"changed.emit($event)\"\n></wlcm-select>\n\n<ng-template #optionTemplate let-option>\n  <span class=\"emoji-flag\">{{ option.emojiFlag }}</span>\n\n  {{ option.viewValue }}\n</ng-template>\n\n<ng-template #triggerTemplate let-selected>\n  <div class=\"wlcm-country-code-select-trigger\">\n    +{{ selected?.value | phoneCode }}\n  </div>\n</ng-template>\n", styles: [".emoji-flag{font-size:20px;vertical-align:bottom;margin-right:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -286,8 +286,8 @@ let WlcmPhoneInputContainerComponent = class WlcmPhoneInputContainerComponent {
                 .subscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputContainerComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmPhoneInputContainerComponent, isStandalone: true, selector: "wlcm-phone-input-container", host: { classAttribute: "wlcm-phone-input-container" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputContainerComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmPhoneInputContainerComponent, isStandalone: true, selector: "wlcm-phone-input-container", host: { classAttribute: "wlcm-phone-input-container" }, providers: [
             {
                 provide: WLCM_INPUT_BINDER,
                 useFactory: () => {
@@ -302,7 +302,7 @@ WlcmPhoneInputContainerComponent = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [NgZone])
 ], WlcmPhoneInputContainerComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-phone-input-container', host: { class: 'wlcm-phone-input-container' }, standalone: true, imports: [CommonModule, WlcmCountryCodeSelectComponent], providers: [
                         {
@@ -325,11 +325,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 const publicComponents = [WlcmPhoneInputContainerComponent];
 const publicDirectives = [WlcmPhoneInputDirective];
 class WlcmPhoneInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputModule, imports: [CommonModule, WlcmPhoneInputContainerComponent, WlcmPhoneInputDirective], exports: [WlcmPhoneInputContainerComponent, WlcmPhoneInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputModule, imports: [CommonModule, publicComponents] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputModule, imports: [CommonModule, WlcmPhoneInputContainerComponent, WlcmPhoneInputDirective], exports: [WlcmPhoneInputContainerComponent, WlcmPhoneInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputModule, imports: [CommonModule, publicComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmPhoneInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmPhoneInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],

package/search-field/fesm2022/wlcm-angular-search-field.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
 import { DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
 import { BehaviorSubject, skip, debounceTime } from 'rxjs';
 import { CommonModule } from '@angular/common';
@@ -24,10 +24,10 @@ class WlcmSearchFieldComponent {
             this.queryParamsChange.emit(this.queryParams);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmSearchFieldComponent, isStandalone: true, selector: "wlcm-search-field", inputs: { placeholder: "placeholder", queryParams: "queryParams" }, outputs: { queryParamsChange: "queryParamsChange" }, host: { classAttribute: "wlcm-search-field" }, ngImport: i0, template: "<wlcm-form-field>\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.SEARCH\"\n    wlcmFormFieldPrefix\n  ></ng-container>\n\n  <input\n    #field\n    wlcmInput\n    type=\"text\"\n    class=\"wlcm-search-field__input\"\n    [placeholder]=\"placeholder\"\n    [value]=\"queryParams.query\"\n    (input)=\"_inputValue$.next(field.value)\"\n  />\n</wlcm-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1.WlcmFormFieldComponent, selector: "wlcm-form-field", inputs: ["displayErrorMessages"] }, { kind: "directive", type: i1.WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: i1.WlcmFormFieldPrefixDirective, selector: "[wlcmFormFieldPrefix]" }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmSearchFieldComponent, isStandalone: true, selector: "wlcm-search-field", inputs: { placeholder: "placeholder", queryParams: "queryParams" }, outputs: { queryParamsChange: "queryParamsChange" }, host: { classAttribute: "wlcm-search-field" }, ngImport: i0, template: "<wlcm-form-field>\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.SEARCH\"\n    wlcmFormFieldPrefix\n  ></ng-container>\n\n  <input\n    #field\n    wlcmInput\n    type=\"text\"\n    class=\"wlcm-search-field__input\"\n    [placeholder]=\"placeholder\"\n    [value]=\"queryParams.query\"\n    (input)=\"_inputValue$.next(field.value)\"\n  />\n</wlcm-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }, { kind: "component", type: i1.WlcmFormFieldComponent, selector: "wlcm-form-field", inputs: ["displayErrorMessages"] }, { kind: "directive", type: i1.WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: i1.WlcmFormFieldPrefixDirective, selector: "[wlcmFormFieldPrefix]" }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-search-field', standalone: true, host: { class: 'wlcm-search-field' }, imports: [CommonModule, WlcmFormsModule, WlcmIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<wlcm-form-field>\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.SEARCH\"\n    wlcmFormFieldPrefix\n  ></ng-container>\n\n  <input\n    #field\n    wlcmInput\n    type=\"text\"\n    class=\"wlcm-search-field__input\"\n    [placeholder]=\"placeholder\"\n    [value]=\"queryParams.query\"\n    (input)=\"_inputValue$.next(field.value)\"\n  />\n</wlcm-form-field>\n" }]
         }], propDecorators: { placeholder: [{
@@ -39,11 +39,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
             }] } });
 
 class WlcmSearchFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldModule, imports: [CommonModule, WlcmSearchFieldComponent], exports: [WlcmSearchFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldModule, imports: [CommonModule, WlcmSearchFieldComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldModule, imports: [CommonModule, WlcmSearchFieldComponent], exports: [WlcmSearchFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldModule, imports: [CommonModule, WlcmSearchFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmSearchFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmSearchFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/stepper/fesm2022/wlcm-angular-stepper.mjs

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from 'tslib';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, contentChildren, effect, ChangeDetectorRef, Directive, input, ElementRef, HostBinding, Inject, Component, Input, forwardRef, NgZone, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
+import { InjectionToken, contentChildren, effect, ChangeDetectorRef, Directive, input, ElementRef, Component, Inject, HostBinding, Input, forwardRef, NgZone, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, filter, skip, takeUntil, combineLatest, distinctUntilChanged, map, switchMap, of } from 'rxjs';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 
@@ -112,14 +112,14 @@ let WlcmStepperBase = class WlcmStepperBase extends WlcmStepsNavigator {
             this._minIncompleteStepIndex$.next(minIndex !== Infinity ? minIndex : -1);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.9", type: WlcmStepperBase, isStandalone: true, queries: [{ propertyName: "_steps", predicate: WLCM_STEP, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.1.4", type: WlcmStepperBase, isStandalone: true, queries: [{ propertyName: "_steps", predicate: WLCM_STEP, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 };
 WlcmStepperBase = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ChangeDetectorRef])
 ], WlcmStepperBase);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
@@ -172,14 +172,14 @@ let WlcmStepHeaderComponent = class WlcmStepHeaderComponent {
             this.element.classList.remove('wlcm-step-header-disabled');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepHeaderComponent, deps: [{ token: i0.ElementRef }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: WlcmStepHeaderComponent, isStandalone: true, selector: "wlcm-step-header", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.wlcm-step-header-passed": "this.isPassed", "class.wlcm-step-header-completed": "this.isCompleted" }, classAttribute: "wlcm-step-header" }, ngImport: i0, template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label$ | async }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepHeaderComponent, deps: [{ token: i0.ElementRef }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: WlcmStepHeaderComponent, isStandalone: true, selector: "wlcm-step-header", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.wlcm-step-header-passed": "this.isPassed", "class.wlcm-step-header-completed": "this.isCompleted" }, classAttribute: "wlcm-step-header" }, ngImport: i0, template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label$ | async }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 };
 WlcmStepHeaderComponent = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [ElementRef, WlcmStepsNavigator])
 ], WlcmStepHeaderComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-step-header', host: { class: 'wlcm-step-header' }, standalone: true, imports: [CommonModule], template: "<button class=\"wlcm-step-header-button\" (click)=\"activate()\">\n  <span class=\"wlcm-step-header-label\">{{ step().label$ | async }}</span>\n\n  <div class=\"wlcm-step-header-progress-bar\">\n    <div class=\"wlcm-step-header-complete-indicator\"></div>\n\n    <div class=\"wlcm-step-header-pass-indicator\"></div>\n  </div>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WlcmStepsNavigator, decorators: [{
@@ -234,10 +234,10 @@ class WlcmStepBase extends WlcmStep {
         this.disabled = this.options.hasOwnProperty('completed') ? this.options.completed : false;
         this.disabled = this.options.hasOwnProperty('disabled') ? this.options.disabled : 'on_any_previous_incomplete';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmStepBase, isStandalone: true, inputs: { key: "key", label: "label", completed: "completed", disabled: "disabled" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepBase, isStandalone: true, inputs: { key: "key", label: "label", completed: "completed", disabled: "disabled" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { key: [{
                 type: Input
@@ -272,8 +272,8 @@ let WlcmStepComponent = class WlcmStepComponent extends WlcmStepBase {
             this.element.classList.remove('wlcm-step-active');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: WLCM_STEP_OPTIONS }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmStepComponent, isStandalone: true, selector: "wlcm-step", host: { classAttribute: "wlcm-step" }, providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: WLCM_STEP_OPTIONS }, { token: WLCM_STEPS_NAVIGATOR }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepComponent, isStandalone: true, selector: "wlcm-step", host: { classAttribute: "wlcm-step" }, providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 };
 WlcmStepComponent = __decorate([
     UntilDestroy(),
@@ -281,7 +281,7 @@ WlcmStepComponent = __decorate([
         ElementRef,
         ChangeDetectorRef, Object, WlcmStepsNavigator])
 ], WlcmStepComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-step', host: { class: 'wlcm-step' }, standalone: true, imports: [CommonModule], providers: [{ provide: WLCM_STEP, useExisting: forwardRef(() => WlcmStepComponent) }], template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
@@ -296,19 +296,19 @@ class WlcmStepperHeaderComponent {
     constructor() {
         this.steps = input.required();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: WlcmStepperHeaderComponent, isStandalone: true, selector: "wlcm-stepper-header", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-stepper-header" }, ngImport: i0, template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepHeaderComponent, selector: "wlcm-step-header", inputs: ["step"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmStepperHeaderComponent, isStandalone: true, selector: "wlcm-stepper-header", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-stepper-header" }, ngImport: i0, template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepHeaderComponent, selector: "wlcm-step-header", inputs: ["step"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-stepper-header', host: { class: 'wlcm-stepper-header' }, standalone: true, imports: [CommonModule, WlcmStepHeaderComponent], template: "@for (step of steps(); track step) {\n<wlcm-step-header [step]=\"step\"></wlcm-step-header>\n}\n" }]
         }] });
 
 class WlcmStepperComponent extends WlcmStepperBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: WlcmStepperComponent, isStandalone: true, selector: "wlcm-stepper", host: { classAttribute: "wlcm-stepper" }, providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], usesInheritance: true, ngImport: i0, template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepperHeaderComponent, selector: "wlcm-stepper-header", inputs: ["steps"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: WlcmStepperComponent, isStandalone: true, selector: "wlcm-stepper", host: { classAttribute: "wlcm-stepper" }, providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], usesInheritance: true, ngImport: i0, template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmStepperHeaderComponent, selector: "wlcm-stepper-header", inputs: ["steps"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wlcm-stepper', host: { class: 'wlcm-stepper' }, standalone: true, imports: [CommonModule, WlcmStepperHeaderComponent], providers: [{ provide: WLCM_STEPS_NAVIGATOR, useExisting: forwardRef(() => WlcmStepperComponent) }], template: "<wlcm-stepper-header [steps]=\"_steps()\"></wlcm-stepper-header>\n\n<ng-content select=\"wlcm-step\"></ng-content>\n" }]
         }] });
@@ -329,8 +329,8 @@ let WlcmLoadOnActiveStepDirective = class WlcmLoadOnActiveStepDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLoadOnActiveStepDirective, deps: [{ token: WLCM_STEP }, { token: WLCM_STEPS_NAVIGATOR }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: WlcmLoadOnActiveStepDirective, isStandalone: true, selector: "[wlcmLoadOnActiveStep]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoadOnActiveStepDirective, deps: [{ token: WLCM_STEP }, { token: WLCM_STEPS_NAVIGATOR }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: WlcmLoadOnActiveStepDirective, isStandalone: true, selector: "[wlcmLoadOnActiveStep]", ngImport: i0 }); }
 };
 WlcmLoadOnActiveStepDirective = __decorate([
     UntilDestroy(),
@@ -339,7 +339,7 @@ WlcmLoadOnActiveStepDirective = __decorate([
         TemplateRef,
         ViewContainerRef])
 ], WlcmLoadOnActiveStepDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmLoadOnActiveStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmLoadOnActiveStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wlcmLoadOnActiveStep]',
@@ -361,17 +361,17 @@ const publicComponents = [
 ];
 const publicDirectives = [WlcmLoadOnActiveStepDirective];
 class WlcmStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, WlcmStepComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, WlcmStepComponent,
             WlcmStepperComponent,
             WlcmStepHeaderComponent,
             WlcmStepperHeaderComponent, WlcmLoadOnActiveStepDirective], exports: [WlcmStepComponent,
             WlcmStepperComponent,
             WlcmStepHeaderComponent,
             WlcmStepperHeaderComponent, WlcmLoadOnActiveStepDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, publicComponents] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, imports: [CommonModule, publicComponents] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: WlcmStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...publicComponents, ...publicDirectives],

package/styles/components/forms/_autocomplete.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use '../../core/utils' as utils;
+@use '../../core/utils';
+@use 'partials/dropdown-panel';
 
 @mixin theme($theme-config) {
   $theme: utils.using-theme($theme_config);
@@ -22,8 +23,11 @@
 
       .spinner {
         font-size: 18px;
-        font-size: 18px;
       }
     }
   }
+
+  .wlcm-autocomplete-panel {
+    @include dropdown-panel.theme($theme-config);
+  }
 }

package/styles/components/forms/_checkbox.scss

@@ -4,76 +4,69 @@
 @mixin theme($theme-config) {
   $theme: utils.using-theme($theme_config);
 
-  mat-checkbox {
-    .mdc-checkbox {
-      padding: 0 !important;
-    }
-
-    .mat-ripple,
-    .mdc-checkbox__ripple {
-      display: none !important;
-    }
-
-    .mdc-checkbox__background {
-      width: 16px;
-      height: 16px;
-      box-sizing: border-box;
-      top: 0 !important;
-      left: 0 !important;
-      background: #ffffff !important;
-      border: 1px solid map-get($theme, field-outline-color) !important;
-      border-radius: 4px;
+  .wlcm-checkbox {
+    mat-checkbox {
+      .mdc-checkbox {
+        padding: 0;
+      }
 
-      .mdc-checkbox__checkmark {
-        transition: 0s !important;
+      .mat-ripple,
+      .mdc-checkbox__ripple {
+        display: none;
       }
-    }
 
-    .mdc-checkbox__checkmark-path {
-      stroke-width: 3px;
-      stroke: map-get($theme, primary-color) !important;
-      d: path('M 5 11.7 L 11 16.6 L 19 7') !important;
-    }
+      .mdc-checkbox__background {
+        $border-color: map-get($theme, field-outline-color);
+        --mdc-checkbox-unselected-focus-icon-color: #{$border-color};
+        width: 16px;
+        height: 16px;
+        box-sizing: border-box;
+        top: 0;
+        left: 0;
+        border: 1px solid $border-color;
+        border-radius: 4px;
 
-    label {
-      padding-left: 8px !important;
-      padding-bottom: 2px !important;
-      letter-spacing: 0.41px;
-      line-height: 24px;
-      user-select: none;
-      font-size: 14px;
-    }
+        .mdc-checkbox__checkmark {
+          transition: 0s;
+        }
+      }
 
-    &.mat-mdc-checkbox-checked {
-      .mdc-checkbox__background {
-        color: map-get($theme, primary-color) !important;
-        border-color: map-get($theme, primary-color) !important;
+      .mdc-checkbox__checkmark-path {
+        stroke-width: 3px;
+        stroke: map-get($theme, primary-color);
+        d: path('M 5 11.7 L 11 16.6 L 19 7');
       }
-    }
 
-    .mdc-checkbox__native-control {
-      top: 0 !important;
-      left: 0 !important;
-      height: auto !important;
-      width: auto !important;
-    }
-  }
+      label {
+        padding-left: 8px;
+        padding-bottom: 2px;
+        letter-spacing: 0.41px;
+        line-height: 24px;
+        user-select: none;
+        font-size: 14px;
+      }
 
-  .mat-pseudo-checkbox {
-    width: 16px !important;
-    height: 16px !important;
-    border: 1px solid map-get($theme, field-outline-color) !important;
-    background: white !important;
-    border-radius: 4px !important;
+      .mdc-checkbox__native-control {
+        top: 0;
+        left: 0;
+        height: auto;
+        width: auto;
+      }
 
-    &.mat-pseudo-checkbox-checked {
-      border-color: map-get($theme, primary-color) !important;
+      // States
+      &:hover {
+        .mdc-checkbox__background {
+          $border-hover-color: map-get($theme, text-black-color);
+          --mdc-checkbox-unselected-focus-icon-color: #{$border-hover-color};
+          border-color: $border-hover-color;
+        }
+      }
 
-      &::after {
-        width: 5px !important;
-        height: 3px !important;
-        border-color: map-get($theme, primary-color);
-        top: -1.5px !important;
+      &.mat-mdc-checkbox-checked {
+        .mdc-checkbox__background {
+          border-color: map-get($theme, primary-color) !important;
+          background-color: #ffffff !important;
+        }
       }
     }
   }

package/styles/components/forms/_form-field.scss

@@ -4,10 +4,6 @@
 @mixin theme($theme-config) {
   $theme: utils.using-theme($theme_config);
 
-  input {
-    color: map-get($theme, field-text-color);
-  }
-
   .wlcm-form-field {
     display: block;
 
@@ -86,6 +82,7 @@
     font-size: 14px;
     letter-spacing: 0.41px;
     font-family: map-get($theme, regular-font-family);
+    color: map-get($theme, field-text-color);
 
     &:disabled {
       background-color: inherit;

package/styles/components/forms/_radio.scss

@@ -4,62 +4,75 @@
 @mixin theme($theme-config) {
   $theme: utils.using-theme($theme_config);
 
-  .mat-mdc-radio-group {
-    display: grid;
-  }
-
-  .mat-mdc-radio-button {
-    label {
-      font-size: 14px;
-      font-family: map-get($theme, regular-font-family);
-      color: map-get($theme, text-black-color);
-      -webkit-font-smoothing: initial !important;
-      font-weight: normal;
+  // TODO replace with `wlcm-radio-group`
+  .wlcm-form-field {
+    .mat-mdc-radio-group {
+      display: grid;
     }
 
-    .mat-mdc-radio-touch-target {
-      width: 22px;
-      height: 22px;
-    }
+    .mat-mdc-radio-button {
+      label {
+        cursor: pointer;
+        font-size: 14px;
+        font-family: map-get($theme, regular-font-family);
+        color: map-get($theme, text-black-color);
+        -webkit-font-smoothing: initial;
+        font-weight: normal;
+      }
 
-    .mdc-radio {
-      width: 16px !important;
-      height: 16px !important;
-      padding: 6px 6px 6px 0 !important;
+      .mat-mdc-radio-touch-target {
+        width: 22px;
+        height: 22px;
+      }
 
-      &__background {
-        width: 16px !important;
-        height: 16px !important;
+      .mdc-radio {
+        width: 16px;
+        height: 16px;
+        padding: 6px 6px 6px 0;
 
-        &::before {
-          display: none !important;
+        .mat-ripple {
+          display: none;
         }
-      }
 
-      &__inner-circle {
-        top: -2px !important;
-        left: -2px !important;
-      }
-    }
+        &__background {
+          width: 16px;
+          height: 16px;
 
-    &:not(.mat-mdc-radio-checked) {
-      .mdc-radio__outer-circle {
-        border: 1px solid map-get($theme, field-outline-color) !important;
-      }
-    }
+          &::before {
+            display: none;
+          }
+        }
+
+        &__inner-circle {
+          top: -2px;
+          left: -2px;
+        }
 
-    &.mat-mdc-radio-checked {
-      .mdc-radio__outer-circle {
-        border-width: 1px !important;
+        &__outer-circle {
+          $border-color: map-get($theme, field-outline-color);
+          --mdc-radio-unselected-icon-color: #{$border-color};
+          border: 1px solid $border-color;
+        }
       }
 
-      .mdc-radio__inner-circle {
-        transform: scale(0.4) !important;
+      // States
+      .mdc-form-field:hover {
+        .mdc-radio__outer-circle {
+          $border-hover-color: map-get($theme, text-black-color);
+          --mdc-radio-unselected-icon-color: #{$border-hover-color};
+          border: 1px solid $border-hover-color;
+        }
       }
-    }
 
-    .mat-radio-ripple {
-      display: none !important;
+      &.mat-mdc-radio-checked {
+        .mdc-radio__outer-circle {
+          border-width: 1px;
+        }
+
+        .mdc-radio__inner-circle {
+          transform: scale(0.4) !important;
+        }
+      }
     }
   }
 }