@po-ui/ng-components 21.20.0 → 21.22.0

package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts

@@ -376,7 +376,7 @@ export 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>;
     /**
@@ -543,7 +543,7 @@ export interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `false`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     showSeconds?: boolean;
     /**
@@ -551,7 +551,7 @@ export interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `5`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     minuteInterval?: number;
     /**
@@ -559,7 +559,7 @@ export interface PoDynamicFormField extends PoDynamicField {
      *
      * @default `1`
      *
-     * **Componente compatível:** `po-timepicker`
+     * **Componente compatível:** `po-datetimepicker`, `po-timepicker`
      */
     secondInterval?: number;
     /**
@@ -964,7 +964,7 @@ export 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;
 }

package/lib/components/po-field/po-datetimepicker/po-datetimepicker-base.component.d.ts

@@ -102,7 +102,6 @@ export declare abstract class PoDatetimepickerBaseComponent implements ControlVa
     protected onTouchedModel: any;
     protected validatorChange: any;
     protected shortLanguage: string;
-    currentErrorPattern: import("@angular/core").WritableSignal<string>;
     /**
      * @optional
      *
@@ -170,7 +169,7 @@ export declare abstract class PoDatetimepickerBaseComponent implements ControlVa
      *
      * Mensagem apresentada quando a data/hora for inválida ou fora do período.
      */
-    errorPattern: import("@angular/core").InputSignal<string>;
+    errorPattern: import("@angular/core").ModelSignal<string>;
     /**
      * @optional
      *

package/lib/components/po-field/po-datetimepicker/po-datetimepicker.component.d.ts

@@ -35,6 +35,7 @@ export declare class PoDatetimepickerComponent extends PoDatetimepickerBaseCompo
     iconClean: ElementRef<HTMLElement>;
     dialogPicker: ElementRef;
     helperEl?: PoHelperComponent;
+    datetimepickerField: ElementRef;
     private readonly renderer;
     private readonly cd;
     private readonly poCalendarService;
@@ -44,6 +45,8 @@ export declare class PoDatetimepickerComponent extends PoDatetimepickerBaseCompo
     el: ElementRef;
     literals: any;
     visible: boolean;
+    currentPeriod: string;
+    isInputFocused: boolean;
     private clickListener;
     private eventResizeListener;
     private valueBeforeChange;
@@ -59,8 +62,12 @@ export declare class PoDatetimepickerComponent extends PoDatetimepickerBaseCompo
     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: {
@@ -68,10 +75,11 @@ export declare class PoDatetimepickerComponent extends PoDatetimepickerBaseCompo
         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;
@@ -127,4 +135,7 @@ export declare class PoDatetimepickerComponent extends PoDatetimepickerBaseCompo
     private hasOverlayClass;
     private hasAttrCalendar;
     private emitChangeIfDifferent;
+    onPeriodKeydown(event: KeyboardEvent): void;
+    onPeriodClick(event: MouseEvent): void;
+    private togglePeriod;
 }

package/lib/components/po-field/po-lookup/interfaces/po-lookup-column.interface.d.ts

@@ -29,6 +29,42 @@ export 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;
     /**

package/lib/components/po-field/po-lookup/po-lookup.component.d.ts

@@ -90,6 +90,12 @@ import { PoHelperComponent } from '../../po-helper';
  *  <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>
  */
 export declare class PoLookupComponent extends PoLookupBaseComponent implements AfterViewInit, OnDestroy, OnInit, DoCheck, OnChanges {
     private readonly renderer;

package/lib/components/po-table/interfaces/po-table-column.interface.d.ts

@@ -106,6 +106,7 @@ export 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`) |
      *
@@ -214,8 +215,10 @@ export 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.
@@ -260,4 +263,40 @@ export 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;
 }

package/lib/components/po-table/po-table.component.d.ts

@@ -231,6 +231,8 @@ export declare class PoTableComponent extends PoTableBaseComponent implements Af
      */
     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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@po-ui/ng-components",
-  "version": "21.20.0",
+  "version": "21.22.0",
   "description": "PO UI - Components",
   "author": "PO UI",
   "license": "MIT",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@angular/cdk": "~21.2.4",
-    "@po-ui/style": "21.20.0",
-    "@po-ui/ng-schematics": "21.20.0",
+    "@po-ui/style": "21.22.0",
+    "@po-ui/ng-schematics": "21.22.0",
     "driver.js": "~1.4.0",
     "echarts": "^5.6.0",
     "tslib": "^2.6.2"
@@ -39,7 +39,7 @@
     "@angular/platform-browser-dynamic": "^21",
     "@angular/router": "^21",
     "@angular-devkit/schematics": "^21",
-    "@po-ui/style": "21.20.0",
+    "@po-ui/style": "21.22.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ function default_1(options) {
 }
 function addPoPackageAndInstall() {
     return (tree, context) => {
-        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.20.0');
+        (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '21.22.0');
         // install packages
         context.addTask(new tasks_1.NodePackageInstallTask());
     };

package/schematics/ng-update/v14/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v15/index.js

@@ -11,7 +11,7 @@ const changes_1 = require("./changes");
 const httpClientModuleName = 'HttpClientModule';
 const httpClientModuleSourcePath = '@angular/common/http';
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v16/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v17/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v18/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v19/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v2/index.js

@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV2() {
     return (0, schematics_1.chain)([
-        updatePackageJson('21.20.0', changes_1.dependeciesChanges),
+        updatePackageJson('21.22.0', changes_1.dependeciesChanges),
         (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
         (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
         createUpgradeRule(),

package/schematics/ng-update/v20/index.js

@@ -40,11 +40,11 @@ function main(options) {
             configureNewIcon.toLowerCase() === 'y' ||
             configureNewIcon.toLowerCase() === 'sim' ||
             configureNewIcon.toLowerCase() === '') {
-            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+            return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
         }
         else {
             return (0, schematics_1.chain)([
-                (0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion),
+                (0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion),
                 addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
                 addProviderToAppModule(options, newProviderDictionary),
                 updateAppConfigFileRule(),

package/schematics/ng-update/v21/index.js

@@ -9,7 +9,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const changes_1 = require("./changes");
 function main() {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+        return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
     });
 }
 function default_1() {

package/schematics/ng-update/v3/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function updateToV3() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v4/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v5/index.js

@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {

package/schematics/ng-update/v6/index.js

@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
 const package_config_1 = require("@po-ui/ng-schematics/package-config");
 const changes_1 = require("./changes");
 function default_1() {
-    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.20.0', changes_1.updateDepedenciesVersion), postUpdate()]);
+    return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('21.22.0', changes_1.updateDepedenciesVersion), postUpdate()]);
 }
 function postUpdate() {
     return (_, context) => {