ecabs-components 1.1.1 → 1.1.2

package/lib/base/element-base.d.ts

@@ -2,13 +2,14 @@ import { EventEmitter } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { ElementData } from './models/element.models';
 import * as i0 from "@angular/core";
-export default class ElementBaseComponent {
+export default class EcabsElementBaseComponent {
     type: string;
     name: string;
     label: string;
     placeholder: string;
     validationLabel: string;
     disabled: boolean;
+    readonly: boolean;
     showValidation: boolean;
     showValidationOnNotTouched: boolean;
     hideValidationMessage: boolean;
@@ -20,6 +21,7 @@ export default class ElementBaseComponent {
     showAsterisk: boolean;
     labelNote: string;
     showLabel: boolean;
+    showLocalLoading: boolean;
     focused: EventEmitter<any>;
     focusOuted: EventEmitter<any>;
     control: UntypedFormControl;
@@ -31,6 +33,6 @@ export default class ElementBaseComponent {
     private disableControl;
     private toggleDisableState;
     private isRequired;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElementBaseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElementBaseComponent, "ng-component", never, { "type": { "alias": "type"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "validationLabel": { "alias": "validationLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "showValidationOnNotTouched": { "alias": "showValidationOnNotTouched"; "required": false; }; "hideValidationMessage": { "alias": "hideValidationMessage"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showHint": { "alias": "showHint"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; }; "labelNote": { "alias": "labelNote"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; }, { "focused": "focused"; "focusOuted": "focusOuted"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsElementBaseComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsElementBaseComponent, "ng-component", never, { "type": { "alias": "type"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "validationLabel": { "alias": "validationLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "showValidationOnNotTouched": { "alias": "showValidationOnNotTouched"; "required": false; }; "hideValidationMessage": { "alias": "hideValidationMessage"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showHint": { "alias": "showHint"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "showAsterisk": { "alias": "showAsterisk"; "required": false; }; "labelNote": { "alias": "labelNote"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "showLocalLoading": { "alias": "showLocalLoading"; "required": false; }; }, { "focused": "focused"; "focusOuted": "focusOuted"; }, never, never, true, never>;
 }

package/lib/base/element-wrapper/element-wrapper.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ElementWrapperComponent {
+export declare class EcabsElementWrapperComponent {
     data: any;
     showCloseIcon: boolean;
     focusedFlag: any;
@@ -14,6 +14,6 @@ export declare class ElementWrapperComponent {
     clearFn(): void;
     increaseFn(): void;
     decreaseFn(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElementWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElementWrapperComponent, "app-element-wrapper", never, { "data": { "alias": "data"; "required": false; }; "showCloseIcon": { "alias": "showCloseIcon"; "required": false; }; "focusedFlag": { "alias": "focusedFlag"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "showHidePassword": "showHidePassword"; "clear": "clear"; "increase": "increase"; "decrease": "decrease"; }, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsElementWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsElementWrapperComponent, "ecabs-element-wrapper", never, { "data": { "alias": "data"; "required": false; }; "showCloseIcon": { "alias": "showCloseIcon"; "required": false; }; "focusedFlag": { "alias": "focusedFlag"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "showHidePassword": "showHidePassword"; "clear": "clear"; "increase": "increase"; "decrease": "decrease"; }, never, ["*"], false, never>;
 }

package/lib/base/element-wrapper/element-wrapper.module.d.ts

@@ -12,6 +12,6 @@ import * as i9 from "../../ecabs-hint/ecabs-hint.module";
 export declare function scrollFactory(overlay: Overlay): () => BlockScrollStrategy;
 export declare class ElementWrapperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElementWrapperModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElementWrapperModule, [typeof i1.ElementWrapperComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.EcabsLoadingModule, typeof i5.EcabsValidationModule, typeof i6.MatFormFieldModule, typeof i7.MatIconModule, typeof i8.MatTooltipModule, typeof i9.EcabsHintModule], [typeof i1.ElementWrapperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElementWrapperModule, [typeof i1.EcabsElementWrapperComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.EcabsLoadingModule, typeof i5.EcabsValidationModule, typeof i6.MatFormFieldModule, typeof i7.MatIconModule, typeof i8.MatTooltipModule, typeof i9.EcabsHintModule], [typeof i1.EcabsElementWrapperComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElementWrapperModule>;
 }

package/lib/base/models/element.models.d.ts

@@ -21,6 +21,7 @@ export interface ElementData {
     showLabel?: boolean;
     showLocalLoading?: boolean;
     labelPosition?: 'before' | 'after';
+    readonly?: boolean;
 }
 export interface SelectValue {
     label: string | number;

package/lib/base/utils/object-utils.d.ts

@@ -4,3 +4,5 @@ export interface Sorter<T> {
     dataType?: 'string' | 'number' | 'date';
 }
 export declare const sortGeneric: <T>(objX: T, objY: T, sortParams: Sorter<T>) => number;
+export declare const removeNullUndefineds: <T>(obj: any, exceptProperties?: string[]) => T;
+export declare const removeEmpty: <T>(o: any, exceptProperties?: string[]) => T;

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterViewInit, DestroyRef, EventEmitter, Injector, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
-export declare class EcabsCheckboxToggleComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
+export declare class EcabsCheckboxToggleComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
     private readonly injector;
     private readonly destroyRef;
     type: 'checkbox' | 'toggle';

package/lib/ecabs-date-picker/ecabs-date-picker.component.d.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsDatePickerHolidayOptions, EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDatePickerHeaderComponent } from './components/ecabs-date-picker-header/ecabs-date-picker-header.component';
 import * as i0 from "@angular/core";
-export declare class EcabsDatePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsDatePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
     private readonly ecabsDatePickerHeaderService;
     private readonly unsubscribeService;

package/lib/ecabs-date-range-picker/ecabs-date-range-picker.component.d.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDateRangePickerHeaderComponent } from './components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component';
 import * as i0 from "@angular/core";
-export declare class EcabsDateRangePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsDateRangePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
     private readonly ecabsDatePickerHeaderService;
     private readonly unsubscribeService;

package/lib/ecabs-date-time-picker/ecabs-date-time-picker.component.d.ts

@@ -1,13 +1,13 @@
 import { DecimalPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectorRef, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDateTimePickerHeaderComponent } from './components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
 import * as i0 from "@angular/core";
-export declare class EcabsDateTimePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsDateTimePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
     private readonly decimalPipe;
     private readonly cd;

package/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.d.ts

@@ -1,13 +1,13 @@
 import { DecimalPipe } from '@angular/common';
 import { AfterViewInit, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormControl } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDateTimeRangePickerHeaderComponent } from './components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component';
 import * as i0 from "@angular/core";
-export declare class EcabsDateTimeRangePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
     private readonly decimalPipe;
     private readonly ecabsDatePickerHeaderService;

package/lib/ecabs-increment/ecabs-increment.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterViewInit, EventEmitter, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
-export declare class EcabsIncrementComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+export declare class EcabsIncrementComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit {
     private injector;
     digitsOnly: boolean;
     allowDecimal: boolean;

package/lib/ecabs-input/ecabs-input.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterViewInit, DestroyRef, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
-export declare class EcabsInputComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsInputComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private injector;
     private readonly destroyRef;
     digitsOnly: boolean;

package/lib/ecabs-multiple-dates-picker/ecabs-multiple-dates-picker.component.d.ts

@@ -1,13 +1,13 @@
 import { AfterViewInit, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsDatePickerHolidayOptions, EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import { EcabsDatePickerHeaderService } from '../base/services/ecabs-date-picker-translations.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import { EcabsDatePickerHeaderComponent } from '../../public-api';
 import * as i0 from "@angular/core";
-export declare class EcabsMultipleDatesPickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
+export declare class EcabsMultipleDatesPickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit {
     private readonly injector;
     private readonly ecabsDatePickerHeaderService;
     private readonly unsubscribeService;

package/lib/ecabs-phone/ecabs-phone.component.d.ts

@@ -1,11 +1,11 @@
 import { AfterViewInit, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, UntypedFormGroup } from '@angular/forms';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsComponentsService } from '../base/services/ecabs-components.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
 import * as i0 from "@angular/core";
-export declare class EcabsPhoneComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit, OnChanges {
+export declare class EcabsPhoneComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit, OnChanges {
     private readonly injector;
     private readonly ecabsComponentsService;
     private unsubscribeService;

package/lib/ecabs-place-autocomplete/ecabs-place-autocomplete.component.d.ts

@@ -2,10 +2,10 @@
 import { AfterViewInit, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { UnsubscribeService } from '../../public-api';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import PlaceResult = google.maps.places.PlaceResult;
 import * as i0 from "@angular/core";
-export declare class EcabsPlaceAutocompleteComponent extends ElementBaseComponent implements OnDestroy, OnChanges, AfterViewInit, ControlValueAccessor {
+export declare class EcabsPlaceAutocompleteComponent extends EcabsElementBaseComponent implements OnDestroy, OnChanges, AfterViewInit, ControlValueAccessor {
     private readonly ngZone;
     private readonly unsubscribeService;
     private readonly elementRef;

package/lib/ecabs-radio-button-list/ecabs-radio-button-list.component.d.ts

@@ -1,9 +1,9 @@
 import { AfterViewInit, EventEmitter, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { SelectOption } from '../base/models/select.models';
 import * as i0 from "@angular/core";
-export declare class EcabsRadioButtonListComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+export declare class EcabsRadioButtonListComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit {
     private injector;
     items: SelectOption[];
     direction: 'horizontal' | 'vertical';

package/lib/ecabs-select/ecabs-select.component.d.ts

@@ -3,10 +3,10 @@ import { UntypedFormControl } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
 import { MatSelectSearchComponent } from 'ngx-mat-select-search';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { SelectOption } from '../base/models/select.models';
 import * as i0 from "@angular/core";
-export declare class EcabsSelectComponent extends ElementBaseComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+export declare class EcabsSelectComponent extends EcabsElementBaseComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private readonly injector;
     private readonly changeDetectorRef;
     private readonly destroyRef;

package/lib/ecabs-select-v2/ecabs-select-v2.component.d.ts

@@ -0,0 +1,58 @@
+import { AfterViewInit, DestroyRef, Injector, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { Subject } from 'rxjs';
+import EcabsElementBaseComponent from '../base/element-base';
+import { SelectValue } from '../base/models/element.models';
+import * as i0 from "@angular/core";
+export declare class EcabsSelectV2Component extends EcabsElementBaseComponent implements AfterViewInit, ControlValueAccessor, OnChanges, OnInit {
+    private readonly injector;
+    private readonly destroyRef;
+    ngSelect: NgSelectComponent;
+    appearance: 'underline' | 'outline';
+    items: SelectValue[];
+    bindLabel: string;
+    bindValue: string;
+    editableSearchTerm: boolean;
+    searchable: boolean;
+    clearable: boolean;
+    multiple: boolean;
+    notFoundText: string;
+    hideSelected: boolean;
+    clearOnBackspace: boolean;
+    clearSearchOnAdd: boolean;
+    trackByFn: any;
+    minLength: number;
+    searchPlaceholder: string;
+    typeahead: Subject<string>;
+    closeOnSelect: boolean;
+    clearAllText: string;
+    selectAllLabel: string;
+    otherLabel: string;
+    othersLabel: string;
+    touched: boolean;
+    val: string | number;
+    isOpen: boolean;
+    groupByKey: string;
+    selectedMulti: any[];
+    itemsList: SelectValue[];
+    isTypeAhead: boolean;
+    get value(): string | number;
+    set value(val: string | number);
+    constructor(injector: Injector, destroyRef: DestroyRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    writeValue(value: number): void;
+    registerOnChange(onChange: any): void;
+    registerOnTouched(onTouched: any): void;
+    markAsTouched(): void;
+    onChange: any;
+    onTouch: any;
+    onBlur(): void;
+    selectAllFn(items: SelectValue[]): void;
+    changed(event: SelectValue[]): void;
+    protected initTrackBy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsSelectV2Component, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsSelectV2Component, "ecabs-select-v2", never, { "appearance": { "alias": "appearance"; "required": false; }; "items": { "alias": "items"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; }; "otherLabel": { "alias": "otherLabel"; "required": false; }; "othersLabel": { "alias": "othersLabel"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/ecabs-select-v2/ecabs-select-v2.module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-select-v2.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../base/element-wrapper/element-wrapper.module";
+import * as i4 from "@angular/material/select";
+import * as i5 from "@angular/forms";
+import * as i6 from "@ng-select/ng-select";
+import * as i7 from "../ecabs-loading/ecabs-loading.module";
+import * as i8 from "../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module";
+import * as i9 from "@angular/material/checkbox";
+export declare class EcabsSelectV2Module {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsSelectV2Module, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsSelectV2Module, [typeof i1.EcabsSelectV2Component], [typeof i2.CommonModule, typeof i3.ElementWrapperModule, typeof i4.MatSelectModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.NgSelectModule, typeof i7.EcabsLoadingModule, typeof i8.EcabsCheckboxToggleModule, typeof i9.MatCheckboxModule], [typeof i1.EcabsSelectV2Component]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsSelectV2Module>;
+}

package/lib/ecabs-textarea/ecabs-textarea.component.d.ts

@@ -1,8 +1,8 @@
 import { AfterViewInit, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
-export declare class EcabsTextareaComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+export declare class EcabsTextareaComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit {
     private injector;
     rows: number;
     val: string;

package/lib/ecabs-timepicker/ecabs-timepicker.component.d.ts

@@ -1,11 +1,11 @@
 import { AfterViewInit, DestroyRef, ElementRef, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FormTimePickerService } from './ecabs-timepicker.service';
-import ElementBaseComponent from '../base/element-base';
+import EcabsElementBaseComponent from '../base/element-base';
 import { ListPlacement, ListPosition } from '../base/models/timepicker.models';
 import { EcabsDatePickerTranslations } from '../base/models/ecabs-date-picker-translations.models';
 import * as i0 from "@angular/core";
-export declare class EcabsTimepickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+export declare class EcabsTimepickerComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit {
     private readonly elementRef;
     private readonly timepickerService;
     private readonly injector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",

package/public-api.d.ts

@@ -7,6 +7,8 @@ export * from './lib/ecabs-input/ecabs-input.component';
 export * from './lib/ecabs-input/ecabs-input.module';
 export * from './lib/ecabs-select/ecabs-select.module';
 export * from './lib/ecabs-select/ecabs-select.component';
+export * from './lib/ecabs-select-v2/ecabs-select-v2.module';
+export * from './lib/ecabs-select-v2/ecabs-select-v2.component';
 export * from './lib/ecabs-textarea/ecabs-textarea.component';
 export * from './lib/ecabs-textarea/ecabs-textarea.module';
 export * from './lib/base/services/ecabs-components.service';

package/src/assets/styles/material/overrides/_form.scss

@@ -58,10 +58,6 @@
   }
 }
 
-label {
-  @extend .form-field__label;
-}
-
 .mat-mdc-slide-toggle-label,
 .mat-mdc-checkbox .mdc-form-field .mdc-label,
 .mat-mdc-radio-button .mdc-form-field .mdc-label {
@@ -74,13 +70,13 @@ label {
 .newline-validation .form-field {
   flex-wrap: wrap;
 
-  app-validations-messages {
+  ecabs-validations-messages {
     flex-basis: 100%;
   }
 }
 
 .form-field--required {
-  .form-field__label, label {
+  .form-field__label {
     &:not([class*=mat-slide-toggle-label], [class*=mat-radio-label]) {
       &:after {
         @extend %required;

package/src/assets/styles/material/overrides/_select.scss

@@ -1,7 +1,7 @@
 @import "../../scss/utilities/index";
 
 .mat-mdc-select {
-  &, &.form-field__select {
+  &, &.form-field__select, {
     @extend .select;
 
     .mat-mdc-select-arrow {
@@ -47,7 +47,8 @@
 }
 
 .form-field--invalid {
-  .mat-mdc-form-field .mat-mdc-select {
+  .mat-mdc-form-field .mat-mdc-select,
+  .form-field__select.ng-select .ng-select-container {
     @extend .form-field--invalid;
   }
 }
@@ -67,3 +68,126 @@
 .mat-mdc-select-search-input {
   color: var(--color-black) !important;
 }
+
+/**
+* #@ng-select
+*/
+.form-field__select.ng-select {
+  .ng-select-container,
+  [class*="form-field__select ng-select"] .ng-select-container {
+    @extend .select;
+
+    &:hover {
+      box-shadow: unset;
+    }
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: var(--color-white-opacity-05);
+    border-color: var(--color-gray-300);
+  }
+
+  .mdc-checkbox {
+    box-sizing: unset;
+  }
+
+  .ng-clear-wrapper {
+    width: calc-rem(24px);
+    height: calc-rem(24px);
+    text-align: center;
+
+    .ng-clear {
+      @include fontSize(24px);
+
+      color: var(--color-gray-500);
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    border-color: var(--color-brand-dark);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgb(50 95 218 / 10%);
+  }
+
+  &.ng-select-typeahead.ng-select-opened .ng-value {
+    color: var(--color-gray-400);
+  }
+
+  &.ng-select-multiple .ng-select-container .ng-value-container {
+    &, .ng-input {
+      padding: 0;
+    }
+  }
+
+  &.ng-select-single .ng-select-container .ng-value-container .ng-input {
+    top: .5rem;
+  }
+
+  &, &.ng-select-multiple .ng-select-container .ng-value-container {
+    .ng-placeholder {
+      top: unset;
+      padding-bottom: unset;
+      padding-left: unset;
+    }
+  }
+
+  .ng-select-container .ng-value-container {
+    padding-left: 0;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: unset;
+  }
+
+  .ng-dropdown-panel {
+    box-shadow: $box-shadow-default;
+    border: unset;
+
+    &.ng-select-bottom {
+      margin-top: 0;
+    }
+
+    .ng-dropdown-panel-items {
+      .ng-optgroup {
+        color: inherit;
+        font-weight: inherit;
+      }
+
+      .ng-option.ng-option-child {
+        padding-left: 10px;
+      }
+
+      .ng-option,
+      .ng-optgroup.ng-option-marked {
+        &.ng-option-selected,
+        &.ng-option-selected.ng-option-marked,
+        &.ng-optgroup.ng-option-marked,
+        &.ng-option-marked {
+          background-color: var(--color-gray-100);
+          color: var(--color-brand-dark);
+
+          .ng-option-label {
+            font-weight: $font-weight-regular;
+          }
+        }
+      }
+    }
+  }
+
+  .ng-arrow-wrapper, &.ng-select-opened > .ng-select-container {
+    .ng-arrow {
+      border-width: 0;
+      border-color: unset;
+      width: calc-rem(12px);
+      height: calc-rem(12px);
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
+      background-size: 0.75rem 1rem;
+    }
+  }
+
+  &.ng-select-opened > .ng-select-container .ng-arrow {
+    transform: scaleY(-1);
+    background-size: 0.75rem 0.6rem;
+    height: 0.6rem;
+  }
+}

package/src/assets/styles/scss/modules/_datepicker.scss

@@ -97,7 +97,7 @@ ecabs-date-picker {
     }
   }
 
-  .app-element-wrapper {
+  .ecabs-element-wrapper {
     &.focused {
       label {
         color: #376bfb;

package/src/assets/styles/scss/modules/_form.scss

@@ -150,6 +150,7 @@ form {
 
     // #Invalid
     @include m(invalid) {
+      &,
       .form-field__input,
       .form-field__textarea {
         color: var(--color-error);