@gipisistemas/ngx-core 1.0.1

package/components/chips/chips.component.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class ChipsComponent<TChip = any> implements ControlValueAccessor, Validator, OnChanges {
+    protected readonly _uniqueId: string;
+    protected chips: import("@angular/core").WritableSignal<TChip[]>;
+    protected hasChips: import("@angular/core").Signal<boolean>;
+    private _changeDetectorRef;
+    id: string;
+    name: string;
+    label: string;
+    labelRemoveAll: string;
+    disabled: boolean;
+    required: boolean;
+    showRemove: boolean;
+    showRemoveAll: boolean;
+    property: string;
+    propertyFn: ((chip: TChip) => string) | null;
+    private _value;
+    set value(value: TChip[]);
+    get value(): TChip[];
+    onFocusEvent: EventEmitter<FocusEvent>;
+    onClickEvent: EventEmitter<FocusEvent>;
+    removeChangeEvent: EventEmitter<TChip>;
+    removeAllChangeEvent: EventEmitter<void>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    _onChange: (value: TChip[]) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: TChip[]): void;
+    registerOnChange(fn: (value: TChip[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<TChip[]>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected getChipLabel(chip: TChip): string;
+    protected remove(chip: TChip, index: number): void;
+    protected removeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipsComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipsComponent<any>, "gipi-chips", ["gChips"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelRemoveAll": { "alias": "labelRemoveAll"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "showRemove": { "alias": "showRemove"; "required": false; }; "showRemoveAll": { "alias": "showRemoveAll"; "required": false; }; "property": { "alias": "property"; "required": false; }; "propertyFn": { "alias": "propertyFn"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "onFocusEvent": "focus"; "onClickEvent": "click"; "removeChangeEvent": "remove"; "removeAllChangeEvent": "removeAll"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_showRemove: unknown;
+    static ngAcceptInputType_showRemoveAll: unknown;
+}

package/components/chips/chips.component.scss

@@ -0,0 +1,127 @@
+@use '../../theming/utils' as utils;
+
+@mixin chips-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+    $white-100: utils.get-color($theme, white, 100);
+    $secondary-50: utils.get-color($theme, secondary, 50);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+    $secondary-200: utils.get-color($theme, secondary, 200);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-600: utils.get-color($theme, primary, 600);
+
+    .g-chips-control .mdc-evolution-chip-set__chips {
+        --mdc-chip-container-shape-radius: 2rem;
+        --mdc-chip-container-height: 2.6rem;
+
+        margin-left: 0 !important;
+        align-items: center !important;
+        gap: 1rem !important;
+
+        &:not(.g-chips-control-item-all) {
+            --mdc-chip-elevated-container-color: #{$secondary-100};
+            --mdc-chip-outline-color: #{$secondary-200};
+            --mdc-chip-label-text-color: #{$font-color};
+            cursor: default;
+        }
+
+        .g-chips-control-item-all {
+            --mdc-chip-elevated-container-color: #{$primary-500};
+            --mdc-chip-outline-color: #{$primary-600};
+            --mdc-chip-label-text-color: #{$white-100};
+
+            .mdc-evolution-chip__cell .mat-mdc-chip-action {
+                cursor: pointer;
+            }
+        }
+
+        .g-chips-control-item {
+            margin: 0 !important;
+
+            &.mat-mdc-chip-disabled {
+                --mat-chip-disabled-container-opacity: 1;
+                --mdc-chip-elevated-disabled-container-color: #{$secondary-50};
+                --mdc-chip-disabled-outline-color: #{$secondary-100};
+                --mdc-chip-disabled-label-text-color: #{$secondary-100};
+
+                cursor: not-allowed !important;
+            }
+
+            .mdc-evolution-chip__cell .mat-mdc-chip-action {
+                padding: 0 0.6rem 0 1rem !important;
+
+                .mat-mdc-chip-action-label {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    gap: 0.6rem;
+                    font-family: $font-family !important;
+                    font-size: 1.2rem !important;
+                    font-weight: 500 !important;
+                    line-height: var(--mdc-chip-container-height) !important;
+                    letter-spacing: normal !important;
+                }
+            }
+        }
+    }
+
+    .g-control-item-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        outline: none;
+        border: none;
+        border-radius: 50%;
+        background-color: transparent;
+        transition: all 0.2s;
+        cursor: pointer;
+
+        .g-control-item-button-icon {
+            width: 1.8rem;
+            height: 1.8rem;
+            font-size: 1.8rem;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            background-color: $secondary-50 !important;
+            color: $secondary-100 !important;
+
+            .g-control-item-button-icon {
+                color: inherit !important;
+                fill: currentColor !important;
+                stroke: currentColor !important;
+            }
+        }
+
+        &:not(:disabled):hover {
+            transform: scale(0.98);
+
+            &:not(.g-control-item-button-all) {
+                background-color: $secondary-200;
+            }
+
+            &.g-control-item-button-all {
+                background-color: $primary-600;
+            }
+        }
+
+        &:not(.g-control-item-button-all),
+        &.g-control-item-button-all {
+            .g-control-item-button-icon {
+                color: inherit;
+            }
+        }
+
+        &:not(.g-control-item-button-all) {
+            color: $font-color;
+        }
+
+        &.g-control-item-button-all {
+            color: $white-100;
+        }
+    }
+}

package/components/chips/index.d.ts

@@ -0,0 +1 @@
+export * from './chips.component';

package/components/confirm-dialog/confirm-dialog.component.d.ts

@@ -0,0 +1,17 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import type { tConfirmDialogTypes } from './shared/confirm-dialog-types.enum';
+import { ConfirmDialogModel } from './shared/confirm-dialog.model';
+import * as i0 from "@angular/core";
+export declare class ConfirmDialogIconComponent {
+    protected readonly _uniqueId: string;
+    type: tConfirmDialogTypes;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmDialogIconComponent, "gipi-confirm-dialog-icon", ["gConfirmDialogIcon"], { "type": { "alias": "type"; "required": true; }; }, {}, never, never, true, never>;
+}
+export declare class ConfirmDialogComponent {
+    protected readonly _uniqueId: string;
+    protected readonly dialogRef: MatDialogRef<any, any>;
+    protected readonly dialogData: ConfirmDialogModel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmDialogComponent, "gipi-confirm-dialog", ["gConfirmDialog"], {}, {}, never, never, true, never>;
+}

package/components/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,121 @@
+@use '../../theming/utils' as utils;
+
+@mixin confirm-dialog-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+    $white-100: utils.get-color($theme, white, 100);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-600: utils.get-color($theme, primary, 600);
+    $secondary-50: utils.get-color($theme, secondary, 50);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+    $secondary-200: utils.get-color($theme, secondary, 200);
+    $secondary-900: utils.get-color($theme, secondary, 900);
+    $black-100: utils.get-color($theme, black, 100);
+    $danger-500: utils.get-color($theme, danger, 500);
+    $danger-700: utils.get-color($theme, danger, 700);
+    $information-500: utils.get-color($theme, information, 500);
+    $information-700: utils.get-color($theme, information, 700);
+    $warning-500: utils.get-color($theme, warning, 500);
+    $warning-700: utils.get-color($theme, warning, 700);
+
+    .g-confirm-dialog-title {
+        display: flex !important;
+        align-items: center !important;
+        gap: 1rem !important;
+        padding: 1.6rem !important;
+        font-family: $font-family !important;
+        font-size: 2rem !important;
+        font-weight: 600 !important;
+        color: $black-100 !important;
+        line-height: 3.2rem !important;
+
+        .g-confirm-dialog-icon,
+        .g-confirm-dialog-icon > svg {
+            width: 3.2rem !important;
+            height: 3.2rem !important;
+            font-size: 3.2rem !important;
+            line-height: 3.2rem !important;
+        }
+    }
+
+    .g-confirm-dialog-content {
+        display: flex !important;
+        align-items: flex-start !important;
+        padding: 0 2rem !important;
+        color: $secondary-900 !important;
+        font-family: $font-family !important;
+        font-size: $font-size !important;
+        line-height: 2rem !important;
+        min-height: 8rem !important;
+        max-height: 30rem !important;
+        overflow-y: auto !important;
+    }
+
+    .g-confirm-dialog-actions {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: flex-end !important;
+        gap: 1.6rem !important;
+        padding: 1.6rem 2rem !important;
+
+        .g-confirm-dialog-btn-action {
+            @include utils.button-reset($theme);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.6rem 1.2rem;
+            max-width: 10rem;
+            border-radius: 0.4rem;
+            font-family: $font-family;
+            font-size: $font-size;
+            font-weight: 500;
+            line-height: 2rem;
+            color: $black-100;
+            background-color: transparent;
+            transition: all 0.2s;
+            cursor: pointer;
+
+            &.g-cancel:not(:disabled):hover {
+                background-color: $secondary-100;
+            }
+
+            &.g-confirm {
+                background-color: $primary-500;
+                color: $white-100;
+
+                &:not(:disabled):hover {
+                    background-color: $primary-600;
+                }
+            }
+
+            &.g-confirm.g-warning {
+                background-color: $warning-500;
+                color: $white-100;
+
+                &:not(:disabled):hover {
+                    background-color: $warning-700;
+                }
+            }
+
+            &.g-confirm.g-danger {
+                background-color: $danger-500;
+                color: $white-100;
+
+                &:not(:disabled):hover {
+                    background-color: $danger-700;
+                }
+            }
+
+            &.g-confirm.g-information {
+                background-color: $information-500;
+                color: $white-100;
+
+                &:not(:disabled):hover {
+                    background-color: $information-700;
+                }
+            }
+        }
+    }
+}

package/components/confirm-dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from './confirm-dialog.component';
+export * from './shared/confirm-dialog-types.enum';
+export * from './shared/confirm-dialog.model';
+export * from './shared/confirm-dialog.service';

package/components/confirm-dialog/shared/confirm-dialog-types.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum eConfirmDialogTypes {
+    DEFAULT = 0,
+    WARNING = 1,
+    DANGER = 2,
+    INFORMATION = 3
+}
+export type tConfirmDialogTypes = keyof typeof eConfirmDialogTypes;

package/components/confirm-dialog/shared/confirm-dialog.model.d.ts

@@ -0,0 +1,25 @@
+import { tConfirmDialogTypes } from './confirm-dialog-types.enum';
+export declare class ConfirmDialogModel {
+    title: string;
+    message?: string;
+    listMessage?: string[];
+    type?: tConfirmDialogTypes;
+    width?: string;
+    showConfirm?: boolean;
+    disableConfirm?: boolean;
+    labelConfirm?: string;
+    showCancel?: boolean;
+    disabledCancel?: boolean;
+    labelCancel?: string;
+    accept?: Function;
+    cancel?: Function;
+    constructor(init?: Partial<ConfirmDialogModel>);
+    /**
+     * Combina os valores fornecidos com os valores padrão do modelo.
+     * Se um valor não for fornecido, o padrão da classe será usado.
+     *
+     * @param data Objeto parcial contendo os valores personalizados do dialog.
+     * @returns Um novo objeto `ConfirmDialogModel` com os valores mesclados.
+     */
+    static merge(data?: Partial<ConfirmDialogModel>): ConfirmDialogModel;
+}

package/components/confirm-dialog/shared/confirm-dialog.service.d.ts

@@ -0,0 +1,17 @@
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogModel } from './confirm-dialog.model';
+import * as i0 from "@angular/core";
+export declare class ConfirmDialogService {
+    protected matDialog: MatDialog;
+    constructor();
+    /**
+     * Exibe um dialog de confirmação com opções personalizadas.
+     * Caso algumas propriedades não sejam fornecidas, valores padrão serão aplicados.
+     *
+     * @param confirmDialog Objeto contendo as configurações do dialog.
+     * @returns Uma `Promise<boolean>` indicando se o usuário confirmou (true) ou cancelou (false) a ação.
+     */
+    show(confirmDialog: Partial<ConfirmDialogModel>): Promise<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConfirmDialogService>;
+}

package/components/date-picker/date-picker.component.d.ts

@@ -0,0 +1,55 @@
+import 'moment/locale/pt-br';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { DateFilterFn } from '@angular/material/datepicker';
+import { tFieldErrorCustomValidators } from '../field-error/shared/field-error-custom-validators.type';
+import * as i0 from "@angular/core";
+export declare class DatePickerComponent implements ControlValueAccessor, Validator, OnChanges {
+    protected readonly _matFormFieldUniqueId: string;
+    protected readonly _uniqueId: string;
+    private _dateAdapter;
+    private _changeDetectorRef;
+    id: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    hintLabel: string;
+    help: string;
+    disabled: BooleanInput;
+    readonly: BooleanInput;
+    required: BooleanInput;
+    startView: 'month' | 'year' | 'multi-year';
+    startAt: Date | null;
+    customErrors: tFieldErrorCustomValidators;
+    dateFilter: DateFilterFn<Date | null>;
+    private _min;
+    set min(value: Date | null);
+    get min(): Date | null;
+    private _max;
+    set max(value: Date | null);
+    get max(): Date | null;
+    private _value;
+    set value(value: Date | null);
+    get value(): Date | null;
+    readonly onFocusEvent: EventEmitter<FocusEvent>;
+    readonly onKeyupEvent: EventEmitter<KeyboardEvent>;
+    readonly onBlurEvent: EventEmitter<FocusEvent>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    _onChange: (value: Date | null) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<Date | null>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onHandleBlur(event: FocusEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "gipi-date-picker", ["gDatePicker"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "help": { "alias": "help"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "customErrors": { "alias": "customErrors"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "onFocusEvent": "focus"; "onKeyupEvent": "keyup"; "onBlurEvent": "blur"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_required: unknown;
+}

package/components/date-picker/date-picker.component.scss

@@ -0,0 +1,27 @@
+@use '../../theming/utils' as utils;
+
+@mixin date-picker-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    .g-date-picker-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-date-picker {
+        @include utils.mat-form-field-reset($theme);
+
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-family: $font-family;
+        color: $font-color;
+        position: relative;
+        overflow: visible;
+        min-width: 0;
+        width: 100%;
+        min-height: fit-content;
+        height: fit-content;
+    }
+}

package/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './date-picker.component';

package/components/date-range-picker/date-range-picker.component.d.ts

@@ -0,0 +1,66 @@
+import 'moment/locale/pt-br';
+import { BooleanInput, type NumberInput } from '@angular/cdk/coercion';
+import { AfterViewInit, EventEmitter, OnInit } from '@angular/core';
+import { DateRange, type DateFilterFn } from '@angular/material/datepicker';
+import { iSelectDateOption } from './shared/select-date-option.interface';
+import { iSelectedDateEvent } from './shared/selected-date-event.interface';
+import * as i0 from "@angular/core";
+export declare class DateRangePickerComponent implements OnInit, AfterViewInit {
+    protected readonly _matFormFieldUniqueId: string;
+    private _uniqueId;
+    private _changeDetectorRef;
+    private _dateAdapter;
+    protected isCustomRange: import("@angular/core").WritableSignal<boolean>;
+    id: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    hintLabel: string;
+    help: string;
+    disabled: BooleanInput;
+    readonly: BooleanInput;
+    required: BooleanInput;
+    startAt: Date | null;
+    dateFilter: DateFilterFn<Date | null>;
+    showPresetDefault: BooleanInput;
+    startPresetIndex: NumberInput;
+    dateFormat: string;
+    private _minDate;
+    set minDate(value: Date | null);
+    get minDate(): Date | null;
+    private _maxDate;
+    set maxDate(value: Date | null);
+    get maxDate(): Date | null;
+    private _dateDropDownOptions;
+    set dateDropDownOptions(value: iSelectDateOption[]);
+    get dateDropDownOptions(): iSelectDateOption[];
+    selectedDates: DateRange<Date>;
+    onDateSelectionChanged: EventEmitter<iSelectedDateEvent>;
+    dateListOptions: EventEmitter<iSelectDateOption[]>;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    protected toggleDateOptionSelectionList(event?: MouseEvent): void;
+    protected updateCustomRange(selectedDates: DateRange<Date> | null): void;
+    private _getDateRangeFromOption;
+    private _areDatesEqual;
+    protected updateSelection(option: iSelectDateOption): void;
+    protected selectCustomOption(): void;
+    protected toggleCustomDateRangeView(): void;
+    protected clearSelection(event: MouseEvent): void;
+    private _resetOptionSelection;
+    private _updateDateOnOptionSelect;
+    private _updateSelectedDates;
+    private _getDaysInMonth;
+    private _getClone;
+    private _updateDefaultDatesValues;
+    private _updatedFromListValueSelection;
+    private _initializeDefaultSelection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "gipi-date-range-picker", ["gDateRangePicker"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "help": { "alias": "help"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "showPresetDefault": { "alias": "showPresetDefault"; "required": false; }; "startPresetIndex": { "alias": "startPresetIndex"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "minDate": { "alias": "min"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateDropDownOptions": { "alias": "dateDropDownOptions"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; }, { "onDateSelectionChanged": "onDateSelectionChanged"; "dateListOptions": "dateListOptions"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_showPresetDefault: unknown;
+    static ngAcceptInputType_startPresetIndex: unknown;
+}

package/components/date-range-picker/date-range-picker.component.scss

@@ -0,0 +1,89 @@
+@use '../../theming/utils' as utils;
+@use './shared/calendar/calendar.component.scss' as calendar;
+
+@mixin date-range-picker-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+    $white-100: utils.get-color($theme, white, 100);
+    $white-400: utils.get-color($theme, white, 400);
+    $black-300: utils.get-color($theme, black, 300);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-700: utils.get-color($theme, primary, 700);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+
+    @include calendar.calendar-theme($theme);
+
+    .g-date-range-picker-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-date-range-picker {
+        @include utils.mat-form-field-reset($theme);
+    }
+
+    .cdk-overlay-pane:has(.g-date-range-picker-ckd-container) {
+        @include utils.overlay();
+
+        max-height: 100vh;
+        border-radius: 0.4rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .g-date-range-picker-custom-calendar-container {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        border-radius: 0.4rem;
+        background-color: $white-100;
+        overflow: hidden;
+    }
+
+    .g-preset-ranges {
+        display: flex;
+        flex-direction: column;
+        gap: 0.2rem;
+        padding: 0.8rem;
+        min-width: 14rem;
+        height: 100%;
+        background: $white-400;
+        border-top-left-radius: 0.6rem;
+        border-bottom-left-radius: 0.6rem;
+        border-right: 1px solid $secondary-100;
+
+        .g-preset-ranges-button {
+            @include utils.user-select(none);
+
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0.8rem;
+            height: 3.6rem;
+            border-radius: 0.6rem;
+            background-color: transparent;
+            outline: none;
+            font-family: $font-family;
+            font-size: 1.2rem;
+            font-weight: 500;
+            color: $black-300;
+            border: none;
+            transition: all 0.2s;
+            cursor: pointer;
+
+            &.g-preset-ranges-button-selected {
+                background-color: $primary-500;
+                color: $white-100;
+
+                &:hover {
+                    background-color: $primary-700;
+                }
+            }
+
+            &:hover {
+                background-color: $primary-500;
+                color: $white-100;
+            }
+        }
+    }
+}

package/components/date-range-picker/index.d.ts

@@ -0,0 +1,6 @@
+export * from './date-range-picker.component';
+export * from './shared/calendar/calendar.component';
+export * from './shared/default-preset-date-options';
+export * from './shared/preset-key.enum';
+export * from './shared/select-date-option.interface';
+export * from './shared/selected-date-event.interface';

package/components/date-range-picker/shared/calendar/calendar.component.d.ts

@@ -0,0 +1,27 @@
+import 'moment/locale/pt-br';
+import { EventEmitter, OnInit } from '@angular/core';
+import { DateFilterFn, DateRange, MatCalendar } from '@angular/material/datepicker';
+import * as i0 from "@angular/core";
+export declare class CalendarComponent implements OnInit {
+    calendarView: MatCalendar<Date>;
+    private readonly _uniqueId;
+    private _changeDetectorRef;
+    private _dateAdapter;
+    id: string;
+    name: string;
+    selectedDates: DateRange<Date> | null;
+    startAt: Date | null;
+    dateFilter: DateFilterFn<Date | null>;
+    private _min;
+    set min(value: Date | null);
+    get min(): Date | null;
+    private _max;
+    set max(value: Date | null);
+    get max(): Date | null;
+    dateRangeCompleted: EventEmitter<DateRange<Date>>;
+    constructor();
+    ngOnInit(): void;
+    protected updateDateRangeSelection(date: Date | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "gipi-calendar", ["gCalendar"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "dateRangeCompleted": "dateRangeCompleted"; }, never, never, true, never>;
+}