ecabs-components 1.1.55 → 1.1.57

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

@@ -8,3 +8,4 @@ export type Country = {
     flagClass: string;
     placeHolder?: string;
 };
+export type PhoneNumberCodeType = 'iso' | 'calling';

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

@@ -1,5 +1,5 @@
-export interface SelectOption {
+export interface SelectOption<T = unknown> {
     label: string;
-    value: any;
+    value: T;
     disabled?: boolean;
 }

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

@@ -6,7 +6,7 @@ export interface SidebarMenuItem {
     subItems?: SidebarMenuItem[];
     permissions?: PermissionValueEnum<string>[];
     iconResource?: SidebarIconResource;
-    badget?: string;
+    badge?: string;
 }
 type PermissionValueEnum<T extends string> = {
     values: Record<T, string>;

package/lib/base/pipes/phone-number-country-code.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { PhoneNumberCodeType } from '../models/phone.models';
+import * as i0 from "@angular/core";
+export declare class NumberToCountryCodePipe implements PipeTransform {
+    transform(phoneNumber: string | null, type?: PhoneNumberCodeType, withFlagClass?: boolean): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumberToCountryCodePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NumberToCountryCodePipe, "numberToCountryCode", true>;
+}

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

@@ -6,3 +6,4 @@ export interface Sorter<T> {
 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;
+export declare function getRandomItems<U>(items: U[], count: number): U[];

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

@@ -4,23 +4,22 @@ import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { SelectOption } from '../base/models/select.models';
 import * as i0 from "@angular/core";
 export type ButtonToggleSize = 'small' | 'medium' | 'large';
-export type ButtonToggleValue = SelectOption['value'] | SelectOption['value'][] | null;
-export declare class EcabsButtonToggleComponent implements ControlValueAccessor {
-    options: SelectOption[];
+export declare class EcabsButtonToggleComponent<T = unknown> implements ControlValueAccessor {
+    options: SelectOption<T>[];
     multiple: boolean;
     size: ButtonToggleSize;
-    value: ButtonToggleValue;
-    valueChange: EventEmitter<any>;
+    value: T | T[];
+    valueChange: EventEmitter<T | T[]>;
     isDisabled: boolean;
     private onChange;
     private onTouched;
     constructor();
     onGroupChange(event: MatButtonToggleChange): void;
-    trackByOptionValue(index: number, option: SelectOption): SelectOption['value'];
-    writeValue(value: ButtonToggleValue): void;
-    registerOnChange(fn: (value: ButtonToggleValue) => void): void;
+    trackByOptionValue(index: number, option: SelectOption<T>): T | number;
+    writeValue(value: T | T[]): void;
+    registerOnChange(fn: (value: T | T[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsButtonToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsButtonToggleComponent, "ecabs-button-toggle", never, { "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsButtonToggleComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsButtonToggleComponent<any>, "ecabs-button-toggle", never, { "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }

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

@@ -0,0 +1,50 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { SelectOption } from '../base/models/select.models';
+import EcabsElementBaseComponent from '../base/element-base';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import * as i0 from "@angular/core";
+export declare class EcabsChipAutocompleteComponent<T = unknown> extends EcabsElementBaseComponent implements ControlValueAccessor {
+    private readonly document;
+    private readonly inputRef?;
+    visibleOptions: number;
+    autoActiveFirstOption: boolean;
+    noResultsText: string;
+    compareFn: (a: T, b: T) => boolean;
+    avatarTemplate: TemplateRef<{
+        $implicit: SelectOption<T>;
+    }> | null;
+    truncateAt: number;
+    set options(value: SelectOption<T>[] | null);
+    readonly selectionChange: EventEmitter<T[]>;
+    readonly termChange: EventEmitter<string>;
+    protected readonly inputControl: FormControl<string>;
+    private readonly normalizedTerm$;
+    private readonly _options;
+    private readonly _values;
+    private readonly _term;
+    private readonly destroyRef;
+    protected readonly overlayPanelClass = "ecabs-chip-autocomplete-overlay-panel";
+    protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
+    protected readonly selectedOptions: import("@angular/core").Signal<SelectOption<T>[]>;
+    protected readonly filteredOptions: import("@angular/core").Signal<SelectOption<T>[]>;
+    protected readonly noMatchResult: import("@angular/core").Signal<boolean>;
+    get options(): SelectOption<T>[] | null;
+    constructor(document: Document);
+    setOverlayHeight(): void;
+    setSelection(event: MatAutocompleteSelectedEvent): void;
+    removeSelection(option: SelectOption<T>): void;
+    trackByFn(_index: number, option: SelectOption<T>): T | number;
+    writeValue(value: T[] | null): void;
+    registerOnChange(fn: typeof this.onChange): void;
+    registerOnTouched(fn: () => void): void;
+    blur(): void;
+    private onChange;
+    private onTouched;
+    private updateValues;
+    private clearAndRefocusInput;
+    private setValidSelectedOptions;
+    private setFilteredOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsChipAutocompleteComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsChipAutocompleteComponent<any>, "ecabs-chip-autocomplete", never, { "visibleOptions": { "alias": "visibleOptions"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "compareFn": { "alias": "compareFn"; "required": false; }; "avatarTemplate": { "alias": "avatarTemplate"; "required": false; }; "truncateAt": { "alias": "truncateAt"; "required": false; }; "options": { "alias": "options"; "required": true; }; }, { "selectionChange": "selectionChange"; "termChange": "termChange"; }, never, never, true, never>;
+}

package/lib/ecabs-chip-group/ecabs-chip-group.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SelectOption } from '../base/models/select.models';
+import * as i0 from "@angular/core";
+export declare class EcabsChipGroupComponent<T = unknown> implements ControlValueAccessor {
+    options: SelectOption<T>[];
+    multiple: boolean;
+    disableRipple: boolean;
+    selectedChange: EventEmitter<T | T[]>;
+    protected readonly _value: import("@angular/core").WritableSignal<T | T[]>;
+    protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
+    chipValueChange(value: T | T[]): void;
+    writeValue(value: T | T[] | null): void;
+    registerOnChange(fn: typeof this.onChange): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private onChange;
+    private onTouched;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsChipGroupComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsChipGroupComponent<any>, "ecabs-chip-group", never, { "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, false, never>;
+}

package/lib/ecabs-chip-group/ecabs-chip-group.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-chip-group.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/chips";
+import * as i4 from "@angular/forms";
+export declare class EcabsChipGroupModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsChipGroupModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsChipGroupModule, [typeof i1.EcabsChipGroupComponent], [typeof i2.CommonModule, typeof i3.MatChipsModule, typeof i4.FormsModule], [typeof i1.EcabsChipGroupComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsChipGroupModule>;
+}

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

@@ -0,0 +1,9 @@
+import { EcabsDatePickerHeaderService } from '../../../base/services/ecabs-date-picker-translations.service';
+import * as i0 from "@angular/core";
+export declare class EcabsDateRangePickerHeaderComponentV2 {
+    readonly ecabsDatePickerHeaderService: EcabsDatePickerHeaderService;
+    selectDateLabel: string;
+    constructor(ecabsDatePickerHeaderService: EcabsDatePickerHeaderService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDateRangePickerHeaderComponentV2, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDateRangePickerHeaderComponentV2, "ecabs-date-range-picker-header-v2", never, { "selectDateLabel": { "alias": "selectDateLabel"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,71 @@
+import { AfterViewInit, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl } from '@angular/forms';
+import { MatDateRangePicker } from '@angular/material/datepicker';
+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 { EcabsDateRangePickerHeaderComponentV2 } from './components/ecabs-date-range-picker-header/ecabs-date-range-picker-header-v2.component';
+import * as i0 from "@angular/core";
+export declare class EcabsDateRangePickerComponentV2 extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnChanges, OnDestroy {
+    private readonly injector;
+    private readonly ecabsDatePickerHeaderService;
+    private readonly unsubscribeService;
+    minDate: Date;
+    maxDate: Date;
+    touchUi: boolean;
+    cancelLabel: string;
+    applyLabel: string;
+    startDatePlaceholder: string;
+    endDatePlaceholder: string;
+    separatorLabel: string;
+    excludeHolidays: boolean;
+    excludeWeekends: boolean;
+    specificDates: Date[];
+    holidayOptions: EcabsDatePickerHolidayOptions;
+    onblur: EventEmitter<any>;
+    val: {
+        dateFrom: string;
+        dateTo: string;
+    };
+    pickerTo: MatDateRangePicker<any> | undefined;
+    header: typeof EcabsDateRangePickerHeaderComponentV2;
+    _dateFrom: string;
+    _dateTo: string;
+    translationConfig: EcabsDatePickerTranslations;
+    minDateFrom?: Date;
+    maxDateFrom?: Date;
+    minDateTo?: Date;
+    maxDateTo?: Date;
+    protected readonly panelClass = "ecabs-date-range-picker-v2";
+    private holidayInstance;
+    get value(): {
+        dateFrom: string;
+        dateTo: string;
+    };
+    get dateFrom(): string;
+    get dateTo(): string;
+    set value(val: {
+        dateFrom: string;
+        dateTo: string;
+    });
+    set dateFrom(val: string);
+    set dateTo(val: string);
+    constructor(injector: Injector, ecabsDatePickerHeaderService: EcabsDatePickerHeaderService, unsubscribeService: UnsubscribeService);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onChange: any;
+    onTouch: any;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    blurChange(e: any): void;
+    onApply(): void;
+    filterDateRange: (date: Date) => boolean;
+    isDateNotHoliday(date: Date): boolean;
+    dateRangeValidator(control: UntypedFormControl): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDateRangePickerComponentV2, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsDateRangePickerComponentV2, "ecabs-date-range-picker-v2", never, { "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "startDatePlaceholder": { "alias": "startDatePlaceholder"; "required": false; }; "endDatePlaceholder": { "alias": "endDatePlaceholder"; "required": false; }; "separatorLabel": { "alias": "separatorLabel"; "required": false; }; "excludeHolidays": { "alias": "excludeHolidays"; "required": false; }; "excludeWeekends": { "alias": "excludeWeekends"; "required": false; }; "specificDates": { "alias": "specificDates"; "required": false; }; "holidayOptions": { "alias": "holidayOptions"; "required": false; }; }, { "onblur": "onblur"; }, never, never, false, never>;
+}

package/lib/ecabs-date-range-picker-v2/ecabs-date-range-picker-v2.module.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-date-range-picker-v2.component";
+import * as i2 from "./components/ecabs-date-range-picker-header/ecabs-date-range-picker-header-v2.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../base/element-wrapper/element-wrapper.module";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/datepicker";
+import * as i7 from "@angular/material/button";
+import * as i8 from "@angular/forms";
+import * as i9 from "../ecabs-picker-header/ecabs-picker-header.module";
+import * as i10 from "../ecabs-buttons/ecabs-buttons.module";
+import * as i11 from "../base/directives/digits-only.directive.module";
+import * as i12 from "../base/directives/number-border.directive.module";
+import * as i13 from "../base/directives/date-mask.directive.module";
+import * as i14 from "@angular/material/input";
+import * as i15 from "../ecabs-date-picker-actions/ecabs-date-picker-actions.module";
+export declare class EcabsDateRangeModuleV2 {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsDateRangeModuleV2, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsDateRangeModuleV2, [typeof i1.EcabsDateRangePickerComponentV2, typeof i2.EcabsDateRangePickerHeaderComponentV2], [typeof i3.CommonModule, typeof i4.ElementWrapperModule, typeof i5.MatIconModule, typeof i6.MatDatepickerModule, typeof i7.MatButtonModule, typeof i8.FormsModule, typeof i8.ReactiveFormsModule, typeof i9.EcabsPickerHeaderModule, typeof i10.EcabsButtonsModule, typeof i11.EcabsDigitsOnlyDirectivesModule, typeof i12.EcabsNumberBorderDirectiveModule, typeof i13.EcabsMaskDateDirectiveModule, typeof i14.MatInputModule, typeof i15.EcabsDatePickerActionsModule], [typeof i1.EcabsDateRangePickerComponentV2, typeof i2.EcabsDateRangePickerHeaderComponentV2]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsDateRangeModuleV2>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.55",
+  "version": "1.1.57",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",
@@ -15,6 +15,7 @@
     "flag-icons": "^6.7.0",
     "libphonenumber-js": "^1.12.6",
     "ngx-mat-select-search": "^7.0.7",
+    "ngx-phosphor-icons": "^1.0.7",
     "postcss": "^8.4.35",
     "rxjs": "~7.5.0",
     "tailwindcss": "^3.4.13",

package/public-api.d.ts

@@ -117,6 +117,7 @@ export * from './lib/ecabs-base-phone-input/ecabs-base-phone.module';
 export * from './lib/base/services/unsubscribe.service';
 export * from './lib/base/pipes/truncate.pipe';
 export * from './lib/base/pipes/separator-append.pipe';
+export * from './lib/base/pipes/phone-number-country-code.pipe';
 export * from './lib/base/pipes/pipes.module';
 export * from './lib/ecabs-sidebar/ecabs-sidebar.module';
 export * from './lib/ecabs-sidebar/ecabs-sidebar.component';
@@ -137,3 +138,9 @@ export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';
 export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.module';
 export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.component';
+export * from './lib/ecabs-chip-group/ecabs-chip-group.module';
+export * from './lib/ecabs-chip-group/ecabs-chip-group.component';
+export * from './lib/ecabs-chip-autocomplete/ecabs-chip-autocomplete.component';
+export * from './lib/ecabs-date-range-picker-v2/ecabs-date-range-picker-v2.module';
+export * from './lib/ecabs-date-range-picker-v2/ecabs-date-range-picker-v2.component';
+export * from './lib/ecabs-date-range-picker-v2/components/ecabs-date-range-picker-header/ecabs-date-range-picker-header-v2.component';

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

@@ -9,3 +9,22 @@
     }
   }
 }
+
+ecabs-chip-autocomplete {
+  input.mat-mdc-chip-input {
+    margin-left: unset;
+    border-radius: calc-rem($border-radius-large);
+  }
+}
+
+.ecabs-chip-autocomplete-overlay-panel {
+  &.mat-mdc-autocomplete-panel {
+    box-shadow: $box-shadow-default;
+    border-radius: calc-rem($border-radius-large);
+    border-top: 0;
+
+    max-height: calc((var(--autocomplete-visible-options, 8.5) * var(--mat-option-height, 48px)) + 10px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

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

@@ -147,3 +147,83 @@
 .mdc-evolution-chip.mat-mdc-standard-chip[ng-reflect-disable-ripple]:not(.mdc-evolution-chip--disabled):active {
   box-shadow: none;
 }
+
+//V2 styles
+ecabs-chip-group {
+  .mat-mdc-chip-listbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc-rem(8px);
+
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-white);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{$font-size-xs};
+      --mdc-chip-label-text-weight: #{$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+
+      border-radius: calc-rem($border-radius-medium);
+      border: 1px solid var(--color-gray-200);
+
+      &:hover {
+        border-color: var(--color-gray-300);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--selected {
+      border-color: transparent;
+
+      .mdc-evolution-chip__action {
+        color: var(--mdc-chip-selected-label-text-color);
+      }
+    }
+
+    .mat-mdc-chip.mdc-evolution-chip--disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .mat-mdc-chip .mat-mdc-chip-graphic {
+      display: none;
+    }
+
+    .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary {
+      padding: 0;
+    }
+
+    .mat-mdc-chip .mdc-chip__ripple,
+    .mat-mdc-chip .mat-ripple {
+      display: none;
+    }
+  }
+}
+
+ecabs-chip-autocomplete {
+  .mat-mdc-chip-grid {
+    .mat-mdc-chip {
+      --mdc-chip-elevated-container-color: var(--color-gray-100);
+      --mdc-chip-label-text-color: var(--color-gray-600);
+      --mdc-chip-label-text-size: #{$font-size-xs};
+      --mdc-chip-label-text-weight: #{$font-weight-medium};
+      --mdc-chip-elevated-selected-container-color: var(--color-brand-dark);
+      --mdc-chip-selected-label-text-color: var(--color-white);
+      --mdc-chip-container-height: #{calc-rem(28px)};
+      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--color-gray-600);
+      --mdc-chip-with-avatar-avatar-shape-radius: 0;
+
+      border-radius: calc-rem($border-radius-medium);
+      padding-left: unset;
+      padding-right: unset;
+    }
+  }
+
+  .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing {
+    width: calc-rem(14px);
+    height: calc-rem(14px);
+  }
+
+  .mdc-evolution-chip-set .mdc-evolution-chip {
+    margin-top: 0;
+  }
+}

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

@@ -154,3 +154,25 @@
     }
   }
 }
+
+.ecabs-date-range-picker-v2 {
+  .mat-calendar-content {
+    padding: 0 1.6rem 1.6rem;
+  }
+}
+
+ecabs-date-range-picker-v2 {
+  .mat-datepicker-input {
+    text-align: center;
+  }
+
+  input {
+    border: none;
+    box-shadow: none;
+  }
+
+  input:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}

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

@@ -5,7 +5,7 @@
     width: 100%;
     background-color: var(--color-white);
     box-shadow: $box-shadow-default;
-    border-radius: $border-radius-base;
+    border-radius: calc-rem($border-radius-large);
     z-index: 1000;
   }
 

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

@@ -4,12 +4,18 @@
   border-radius: $border-radius-base;
   display: flex;
   width: fit-content;
-  padding: calc-rem(6px 8px);
+  min-width: calc-rem(56px);
+  padding: calc-rem(8px 12px);
   align-items: center;
   justify-content: center;
   background-color: var(--color-gray-50);
   color: var(--color-gray-500);
   font-weight: $font-weight-regular;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--color-gray-300);
+  }
 
   @include e(standard) {
     width: 7.2rem;

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

@@ -40,8 +40,8 @@ form {
       display: block;
       width: 100%;
       padding: calc-rem(8) calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-200);
       color: var(--color-black);
       line-height: $base-line-height;
 
@@ -104,8 +104,8 @@ form {
       display: block;
       width: 100%;
       padding: calc-rem(16);
-      border-radius: $border-radius-base;
-      border: 1px solid var(--color-gray-500);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-200);
       color: var(--color-black);
       line-height: $base-line-height;
 
@@ -152,14 +152,87 @@ form {
       }
     }
 
+    // #Range
+    @include e(range) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8) calc-rem(16);
+      color: var(--color-black);
+      line-height: $base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: calc-rem($border-radius-large);
+        border: 1px solid var(--color-gray-300);
+        align-items: center;
+        line-height: 1;
+        background-color: var(--color-white);
+
+        &:focus-within {
+          border-color: var(--color-brand-dark);
+        }
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16);
+        color: var(--color-gray-500);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: calc-rem(16);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        border-color: transparent;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
+      }
+    }
+
     // #Invalid
     @include m(invalid) {
       &,
       .form-field__input,
-      .form-field__textarea {
+      .form-field__textarea,
+      .form-field__range {
         color: var(--color-error);
         border-color: var(--color-error);
       }
+
+      &,
+      .form-field__range--wrapper {
+        border-color: var(--color-error);
+      }
     }
 
     // #Required

package/src/assets/styles/scss/utilities/_colors.scss

@@ -56,9 +56,7 @@
   --color-allocation-unavailable: #F2F2F2;
   --cropper-outline-color: rgba(0, 0, 0, 0.5);
 
-  /* #Slate */
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-500: #64748b;
-  --color-slate-900: #0f172a;
+  --mat-option-label-text-color: var(--color-gray-900);
+  --mat-option-focus-state-layer-color: var(--color-gray-100);
+  --mat-option-hover-state-layer-color: var(--color-gray-50);
 }

package/src/assets/styles/scss/utilities/_fonts.scss

@@ -24,3 +24,7 @@ $font-heading-lg: 36px;
 
 // Height
 $base-line-height: 1.5;
+
+:root {
+  --mat-option-label-text-size: #{$font-size-sm};
+}

package/src/assets/styles/scss/utilities/_variables.scss

@@ -4,6 +4,8 @@ $box-shadow-large: 0 0 25px rgba(0, 0, 0, 0.2);
 
 /* #Border settings */
 $border-radius-base: .25rem;
+$border-radius-medium: 6px;
+$border-radius-large: 8px;
 
 /* #Transition */
 $trans-duration-style: .24s ease-out;