ngx-opalbytes-components 1.19.0 → 1.21.0

package/src/lib/shared/components/time-picker/time-picker.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DateAdapter } from '@angular/material/core';
+import { MatTimepickerOption } from '@angular/material/timepicker';
+
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'cao-time-picker',
+  imports: [ MaterialModule, CommonModule, ReactiveFormsModule, ],
+  templateUrl: './time-picker.html',
+  styleUrl: './time-picker.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TimePicker {
+  @Input() control: FormControl<Date | null> = new FormControl<Date | null>(null);
+  @Input() isDisabled = false;
+  @Input() dataCy?: string;
+  @Input() set min(v: string) {
+    this._min = v;
+    this.minInNumber = this.convertStringInNumber(v)
+    this.customOptions = this.generateTimeOptions().filter((option) => option.label >= this._min);
+  }
+  @Input() set max(v: string) {
+    this._max = v;
+    this.maxInNumber = this.convertStringInNumber(v)
+    this.customOptions = this.generateTimeOptions().filter((option) => option.label <= this._max);
+  }
+
+  minInNumber = 7;
+  maxInNumber = 23;
+
+  @Output() readonly timeChange = new EventEmitter<Date>();
+
+  private _min = "07:00";
+  private _max = "23:00";
+
+  customOptions: MatTimepickerOption<Date>[] = this.generateTimeOptions();
+
+  constructor(private _adapter: DateAdapter<any>) {
+    this._adapter.setLocale("pt-BR");
+  }
+
+  get errorText(): string | null {
+    if (!this.control) {return null;}
+
+    if (this.control.hasError("required") || (this.control.touched && !this.control.value)) {
+      return "*Campo obrigatório";
+    }
+    if (this.control.hasError("quarterHour") && this.control.touched) {
+      return "Formato inválido";
+    }
+    return null;
+  }
+
+  private convertStringInNumber(hour: string): number{
+    const explodedHour = parseInt(hour.split(":")[0])
+    if(typeof explodedHour !== 'number'){
+      return explodedHour
+    }
+    return explodedHour
+  }
+
+  private generateTimeOptions(): MatTimepickerOption<Date>[] {
+    const options: MatTimepickerOption<Date>[] = [];
+    const baseDate = new Date(2025, 0, 1);
+
+    for (let hour = this.minInNumber; hour <= this.maxInNumber; hour++) {
+      for (let minute = 0; minute < 60; minute += 15) {
+        if (hour === this.maxInNumber && minute > 0) {continue;}
+        const date = new Date(baseDate);
+        date.setHours(hour, minute, 0);
+        const label = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+        options.push({ label, value: date });
+      }
+    }
+
+    return options;
+  }
+
+  updateTimeOptions(options: MatTimepickerOption<Date>[]): void {
+    this.customOptions = options;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+}

package/types/ngx-opalbytes-components.d.ts

@@ -29,10 +29,11 @@ declare class CaoBaseButtonComponent implements OnInit {
     iconColor?: string;
     strokeWidthIcon: number;
     minTextToTooltip: number;
+    iconSize: number;
     ngOnInit(): void;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoBaseButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseButtonComponent, "cao-button", never, { "buttonText": { "alias": "buttonText"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "btnClass": { "alias": "btnClass"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "minTextToTooltip": { "alias": "minTextToTooltip"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseButtonComponent, "cao-button", never, { "buttonText": { "alias": "buttonText"; "required": false; }; "isDarkMode": { "alias": "isDarkMode"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "btnClass": { "alias": "btnClass"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "minTextToTooltip": { "alias": "minTextToTooltip"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
 
 type CaoTypeInputs = 'text' | 'textarea' | 'number' | 'password' | 'date';
@@ -127,6 +128,7 @@ declare class CaoAutocompleteComponent implements OnInit, OnChanges, OnDestroy,
     strokeWidthIcon: number;
     isDisabled: boolean;
     inputHeigth: string;
+    iconSize: number;
     checkIcon: string;
     showCheckIcon: boolean;
     isLucideCheckIcon: boolean;
@@ -201,7 +203,7 @@ declare class CaoAutocompleteComponent implements OnInit, OnChanges, OnDestroy,
     setDisabledState?(isDisabled: boolean): void;
     setInputHeight(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CaoAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "inputHeigth": { "alias": "inputHeigth"; "required": false; }; "checkIcon": { "alias": "checkIcon"; "required": false; }; "showCheckIcon": { "alias": "showCheckIcon"; "required": false; }; "isLucideCheckIcon": { "alias": "isLucideCheckIcon"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoAutocompleteComponent, "cao-autocomplete", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "control": { "alias": "control"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_leadingIcon": { "alias": "_leadingIcon"; "required": false; }; "_trailingIcon": { "alias": "_trailingIcon"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "optionIConColor": { "alias": "optionIConColor"; "required": false; }; "isLucideOptionIcon": { "alias": "isLucideOptionIcon"; "required": false; }; "autocompleteBgColor": { "alias": "autocompleteBgColor"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "inputHeigth": { "alias": "inputHeigth"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "checkIcon": { "alias": "checkIcon"; "required": false; }; "showCheckIcon": { "alias": "showCheckIcon"; "required": false; }; "isLucideCheckIcon": { "alias": "isLucideCheckIcon"; "required": false; }; }, { "itemSelected": "itemSelected"; "blurEvent": "blurEvent"; "focusEvent": "focusEvent"; "leadingIconClick": "leadingIconClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
 }
 
 interface ICaoDropDownOption {
@@ -441,6 +443,23 @@ declare class CaoBaseIcon {
     static ɵcmp: i0.ɵɵComponentDeclaration<CaoBaseIcon, "cao-base-icon", never, { "imgSource": { "alias": "imgSource"; "required": false; }; "isLucideIcon": { "alias": "isLucideIcon"; "required": false; }; "strokeWidthIcon": { "alias": "strokeWidthIcon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface ICaoImage {
+    src: string;
+    alt: string;
+}
+interface ICaoKPI {
+    title: string;
+    value: string;
+    textColor: string;
+    borderColor: string;
+    icon: ICaoImage;
+}
+declare class CaoKpi {
+    readonly kpiData: i0.InputSignal<ICaoKPI>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CaoKpi, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CaoKpi, "cao-kpi", never, { "kpiData": { "alias": "kpiData"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type ModalType = "validation" | "finger" | "facial" | "clinic" | "graph" | "restriction" | "default";
 interface IModal {
     status: boolean;
@@ -833,5 +852,5 @@ declare class BaseAlertService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BaseAlertService>;
 }
 
-export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
-export type { AlertType, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoDropDownOption, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };
+export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoDropDownComponent, CaoKpi, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
+export type { AlertType, CaoTypeInputs, DialogType, IAlertConfig, ICaoAutoCompleteOption, ICaoDropDownOption, ICaoImage, ICaoKPI, ICaoTabChangeEvent, IColumnButton, IColumnConfig, IColumnPaginatedButton, IColumnPaginatedConfig, IDialogConfig, IModal, INavContent, INavLink, ITableConfig, ITablePaginatedConfig, ModalType, ModalTypeClass, ModalTypeSize };