@po-ui/ng-components 21.20.0 → 21.22.0

package/types/po-ui-ng-components.d.ts

@@ -7977,6 +7977,7 @@ interface PoTableColumn {
      * |------------|-----------------|-----------|----------|
      * | Monetário  | `currency`      | Formato para valores monetários. Informe o código da moeda (ISO 4217). | `'BRL'`, `'USD'`, `'EUR'`, `'RUB'` |
      * | Data       | `date`          | Aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), caso não seja informado um formato o mesmo será 'dd/MM/yyyy' | `'dd/MM/yyyy'`, `'dd-MM-yy'`, `'mm/dd/yyyy'` |
+     * | Data/Hora  | `dateTime`      | Aceita os caracteres de dia(dd), mês(MM), ano(yyyy), hora(HH para 24h ou hh para 12h), minutos(mm), segundos(ss), milissegundos(SSS) e período(a para AM/PM). Caso não seja informado um formato o mesmo será 'dd/MM/yyyy HH:mm:ss' | `'dd/MM/yyyy HH:mm'`, `'dd/MM/yyyy HH:mm:ss'`, `'dd/MM/yyyy HH:mm:ss.SSS'`, `'MM/dd/yyyy hh:mm a'`, `'yyyy-MM-dd HH:mm'`, `'short'`, `'medium'` |
      * | Hora       | `time`          | Aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será 'HH:mm:ss' | `'HH:mm'`, `'HH:mm:ss.ffffff'`, `'HH:mm:ss.ff'`, `'mm:ss.fff'` |
      * | Número     | `number`        | Aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.dev/api/common/DecimalPipe) para formatação, e caso não seja informado, o número será exibido na sua forma original. | `'1.2-5'` (ex.: `50` → `50.00`) |
      *
@@ -8085,8 +8086,10 @@ interface PoTableColumn {
      *   por exemplo: `'2017-11-28'` ou `new Date(2017, 10, 28)`.
      *
      * - `dateTime`: valor de data com horário.
-     *   + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddThh:mm:ss+|-hh:mm'**
-     *   e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`.
+     *   + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddTHH:mm:ss+|-hh:mm'**
+     *   ou **'yyyy-mm-ddTHH:mm+|-hh:mm'** (sem segundos),
+     *   e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'`, `'2017-11-28T14:30-02:00'` ou `new Date(2017, 10, 28)`.
+     *   + A formatação de exibição pode ser configurada pela propriedade `format`.
      *
      * - `detail`: array de objetos para o master-detail.
      *   + Incompatível com `virtual-scroll`, que requer altura fixa nas linhas.
@@ -8131,6 +8134,42 @@ interface PoTableColumn {
      */
     width?: string;
     fixed?: boolean;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma máscara para formatação do valor exibido na coluna.
+     *
+     * A máscara é aplicada somente para **exibição** na tabela, formatando o valor bruto
+     * armazenado no model antes de apresentá-lo ao usuário.
+     *
+     * Caracteres válidos para a máscara:
+     * - `9` : aceita um dígito numérico (0-9).
+     * - `@` : aceita um caractere alfabético (a-z, A-Z).
+     * - `w` : aceita um caractere alfanumérico (a-z, A-Z, 0-9).
+     * - Demais caracteres são considerados fixos e inseridos automaticamente na formatação
+     * (por exemplo: `.`, `-`, `/`, `(`, `)`, `+`, ` `).
+     *
+     * Exemplos de uso:
+     * ```
+     * // CPF
+     * { property: 'cpf', label: 'CPF', mask: '999.999.999-99' }
+     *
+     * // CNPJ
+     * { property: 'cnpj', label: 'CNPJ', mask: '99.999.999/9999-99' }
+     *
+     * // Telefone
+     * { property: 'phone', label: 'Telefone', mask: '(99) 99999-9999' }
+     *
+     * // CEP
+     * { property: 'zipCode', label: 'CEP', mask: '99999-999' }
+     * ```
+     *
+     * > Esta propriedade é utilizada apenas para colunas do tipo `string` (padrão).
+     * Caso a coluna possua um `type` diferente de `string`, a máscara será ignorada.
+     */
+    mask?: string;
 }
 
 /**
@@ -10064,6 +10103,8 @@ declare class PoTableComponent extends PoTableBaseComponent implements AfterView
      */
     deleteItems(): void;
     formatNumber(value: any, format: string): any;
+    protected formatWithMask(value: any, mask: string): string;
+    private isValidMaskChar;
     getCellData(row: any, column: PoTableColumn): any;
     getBooleanLabel(rowValue: any, columnBoolean: PoTableColumn): string;
     getColumnIcons(row: any, column: PoTableColumn): any;
@@ -20451,7 +20492,6 @@ declare abstract class PoDatetimepickerBaseComponent implements ControlValueAcce
     protected onTouchedModel: any;
     protected validatorChange: any;
     protected shortLanguage: string;
-    currentErrorPattern: i0.WritableSignal<string>;
     /**
      * @optional
      *
@@ -20519,7 +20559,7 @@ declare abstract class PoDatetimepickerBaseComponent implements ControlValueAcce
      *
      * Mensagem apresentada quando a data/hora for inválida ou fora do período.
      */
-    errorPattern: i0.InputSignal<string>;
+    errorPattern: i0.ModelSignal<string>;
     /**
      * @optional
      *
@@ -20856,7 +20896,7 @@ declare abstract class PoDatetimepickerBaseComponent implements ControlValueAcce
     private requiredFailed;
     private applySizeBasedOnA11y;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoDatetimepickerBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoDatetimepickerBaseComponent, never, never, { "appendBox": { "alias": "p-append-in-body"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; "isSignal": true; }; "clean": { "alias": "p-clean"; "required": false; "isSignal": true; }; "compactLabel": { "alias": "p-compact-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "p-disabled"; "required": false; "isSignal": true; }; "errorLimit": { "alias": "p-error-limit"; "required": false; "isSignal": true; }; "errorPattern": { "alias": "p-error-pattern"; "required": false; "isSignal": true; }; "help": { "alias": "p-help"; "required": false; "isSignal": true; }; "label": { "alias": "p-label"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; "loading": { "alias": "p-loading"; "required": false; "isSignal": true; }; "localeInput": { "alias": "p-locale"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "p-max-date"; "required": false; "isSignal": true; }; "maxTime": { "alias": "p-max-time"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "p-min-date"; "required": false; "isSignal": true; }; "minTime": { "alias": "p-min-time"; "required": false; "isSignal": true; }; "minuteInterval": { "alias": "p-minute-interval"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "noAutocomplete": { "alias": "p-no-autocomplete"; "required": false; "isSignal": true; }; "optional": { "alias": "p-optional"; "required": false; "isSignal": true; }; "placeholder": { "alias": "p-placeholder"; "required": false; "isSignal": true; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "readonly": { "alias": "p-readonly"; "required": false; "isSignal": true; }; "required": { "alias": "p-required"; "required": false; "isSignal": true; }; "secondInterval": { "alias": "p-second-interval"; "required": false; "isSignal": true; }; "showErrorMessageRequired": { "alias": "p-required-field-error-message"; "required": false; "isSignal": true; }; "showRequired": { "alias": "p-show-required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "p-show-seconds"; "required": false; "isSignal": true; }; "size": { "alias": "p-size"; "required": false; "isSignal": true; }; "timerFormat": { "alias": "p-format-time"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "p-format-date"; "required": false; "isSignal": true; }; }, { "onblur": "p-blur"; "onchange": "p-change"; "keydown": "p-keydown"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoDatetimepickerBaseComponent, never, never, { "appendBox": { "alias": "p-append-in-body"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "p-auto-focus"; "required": false; "isSignal": true; }; "clean": { "alias": "p-clean"; "required": false; "isSignal": true; }; "compactLabel": { "alias": "p-compact-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "p-disabled"; "required": false; "isSignal": true; }; "errorLimit": { "alias": "p-error-limit"; "required": false; "isSignal": true; }; "errorPattern": { "alias": "p-error-pattern"; "required": false; "isSignal": true; }; "help": { "alias": "p-help"; "required": false; "isSignal": true; }; "label": { "alias": "p-label"; "required": false; "isSignal": true; }; "labelTextWrap": { "alias": "p-label-text-wrap"; "required": false; "isSignal": true; }; "loading": { "alias": "p-loading"; "required": false; "isSignal": true; }; "localeInput": { "alias": "p-locale"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "p-max-date"; "required": false; "isSignal": true; }; "maxTime": { "alias": "p-max-time"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "p-min-date"; "required": false; "isSignal": true; }; "minTime": { "alias": "p-min-time"; "required": false; "isSignal": true; }; "minuteInterval": { "alias": "p-minute-interval"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "noAutocomplete": { "alias": "p-no-autocomplete"; "required": false; "isSignal": true; }; "optional": { "alias": "p-optional"; "required": false; "isSignal": true; }; "placeholder": { "alias": "p-placeholder"; "required": false; "isSignal": true; }; "poHelperComponent": { "alias": "p-helper"; "required": false; "isSignal": true; }; "readonly": { "alias": "p-readonly"; "required": false; "isSignal": true; }; "required": { "alias": "p-required"; "required": false; "isSignal": true; }; "secondInterval": { "alias": "p-second-interval"; "required": false; "isSignal": true; }; "showErrorMessageRequired": { "alias": "p-required-field-error-message"; "required": false; "isSignal": true; }; "showRequired": { "alias": "p-show-required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "p-show-seconds"; "required": false; "isSignal": true; }; "size": { "alias": "p-size"; "required": false; "isSignal": true; }; "timerFormat": { "alias": "p-format-time"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "p-format-date"; "required": false; "isSignal": true; }; }, { "errorPattern": "p-error-patternChange"; "onblur": "p-blur"; "onchange": "p-change"; "keydown": "p-keydown"; }, never, never, true, never>;
 }
 
 /**
@@ -20891,6 +20931,7 @@ declare class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent im
     iconClean: ElementRef<HTMLElement>;
     dialogPicker: ElementRef;
     helperEl?: PoHelperComponent;
+    datetimepickerField: ElementRef;
     private readonly renderer;
     private readonly cd;
     private readonly poCalendarService;
@@ -20900,6 +20941,8 @@ declare class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent im
     el: ElementRef;
     literals: any;
     visible: boolean;
+    currentPeriod: string;
+    isInputFocused: boolean;
     private clickListener;
     private eventResizeListener;
     private valueBeforeChange;
@@ -20915,8 +20958,12 @@ declare class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent im
     getErrorPattern(): string;
     onKeyup($event: any): void;
     onKeydown($event: any): void;
+    onInputFocus(): void;
+    onPeriodBlur(): void;
     eventOnBlur($event: any): void;
+    eventOnButtonKeydown(event: KeyboardEvent): void;
     eventOnClick($event: any): void;
+    onFieldClick($event: any): void;
     private isFocusOnFirstCombo;
     eventOnCalendarKeydown(event: KeyboardEvent): void;
     onTimerBoundaryTab(event: {
@@ -20924,10 +20971,11 @@ declare class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent im
         event: KeyboardEvent;
         column: string;
     }): void;
+    writeValue(value: any): void;
     refreshValue(value: Date): void;
     onTimeChange(time: string): void;
     onDateChange(date: any): void;
-    clear(): void;
+    clear(triggeredByKeyboard?: boolean): void;
     setHelper(label?: string, additionalHelpTooltip?: string): {
         hideAdditionalHelp: boolean;
         helperSettings?: any;
@@ -20983,6 +21031,9 @@ declare class PoDatetimepickerComponent extends PoDatetimepickerBaseComponent im
     private hasOverlayClass;
     private hasAttrCalendar;
     private emitChangeIfDifferent;
+    onPeriodKeydown(event: KeyboardEvent): void;
+    onPeriodClick(event: MouseEvent): void;
+    private togglePeriod;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoDatetimepickerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PoDatetimepickerComponent, "po-datetimepicker", never, {}, {}, never, never, false, never>;
 }
@@ -21977,6 +22028,42 @@ interface PoLookupColumn {
      * Caso não seja informado, será utilizado como *label* o valor da propriedade *property* com a primeira letra em maiúsculo.
      */
     label?: string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma máscara para formatação do valor exibido na coluna.
+     *
+     * A máscara é aplicada somente para **exibição** na tabela da modal do lookup, formatando o valor bruto
+     * armazenado no model antes de apresentá-lo ao usuário.
+     *
+     * Caracteres válidos para a máscara:
+     * - `9` : aceita um dígito numérico (0-9).
+     * - `@` : aceita um caractere alfabético (a-z, A-Z).
+     * - `w` : aceita um caractere alfanumérico (a-z, A-Z, 0-9).
+     * - Demais caracteres são considerados fixos e inseridos automaticamente na formatação
+     * (por exemplo: `.`, `-`, `/`, `(`, `)`, `+`, ` `).
+     *
+     * Exemplos de uso:
+     * ```
+     * // CPF
+     * { property: 'cpf', label: 'CPF', mask: '999.999.999-99' }
+     *
+     * // CNPJ
+     * { property: 'cnpj', label: 'CNPJ', mask: '99.999.999/9999-99' }
+     *
+     * // Telefone
+     * { property: 'phone', label: 'Telefone', mask: '(99) 99999-9999' }
+     *
+     * // CEP
+     * { property: 'zipCode', label: 'CEP', mask: '99999-999' }
+     * ```
+     *
+     * > Esta propriedade é utilizada apenas para colunas do tipo `string` (padrão).
+     * Caso a coluna possua um `type` diferente de `string`, a máscara será ignorada.
+     */
+    mask?: string;
     /** Nome identificador da coluna. */
     property?: string;
     /**
@@ -23212,6 +23299,12 @@ declare abstract class PoLookupBaseComponent implements ControlValueAccessor, On
  *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.component.ts"> </file>
  *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.service.ts"> </file>
  * </example>
+ *
+ * <example name="po-lookup-mask" title="PO Lookup - Mask">
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.component.html"> </file>
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.component.ts"> </file>
+ *  <file name="sample-po-lookup-mask/sample-po-lookup-mask.service.ts"> </file>
+ * </example>
  */
 declare class PoLookupComponent extends PoLookupBaseComponent implements AfterViewInit, OnDestroy, OnInit, DoCheck, OnChanges {
     private readonly renderer;
@@ -28946,7 +29039,7 @@ interface PoDynamicFormField extends PoDynamicField {
      * Também pode-se utilizar em conjunto com `searchService`, informando uma lista de propriedades que será utilizado
      * para formatação da exibição no campo, por exemplo: ["id", "name"].
      *
-     * **Componentes compatíveis:** `po-datepicker`, `po-timepicker`, `po-lookup`.
+     * **Componentes compatíveis:** `po-datepicker`, `po-datetimepicker`, `po-timepicker`, `po-lookup`.
      */
     format?: string | Array<string>;
     /**
@@ -29113,7 +29206,7 @@ interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `false`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     showSeconds?: boolean;
     /**
@@ -29121,7 +29214,7 @@ interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `5`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     minuteInterval?: number;
     /**
@@ -29129,7 +29222,7 @@ interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `1`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     secondInterval?: number;
     /**
@@ -29534,7 +29627,7 @@ interface PoDynamicFormField extends PoDynamicField {
     /**
      * Define o formato de exibição do timer (`'12'` ou `'24'`).
      *
-     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`
      */
     formatTime?: string;
 }