@po-ui/ng-components 19.32.0 → 19.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/fesm2022/po-ui-ng-components.mjs +3395 -2696
  2. package/fesm2022/po-ui-ng-components.mjs.map +1 -1
  3. package/lib/components/po-breadcrumb/po-breadcrumb-base.component.d.ts +16 -1
  4. package/lib/components/po-chart/interfaces/po-chart-serie.interface.d.ts +3 -2
  5. package/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.d.ts +10 -5
  6. package/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form.component.d.ts +2 -2
  7. package/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.d.ts +16 -1
  8. package/lib/components/po-field/po-checkbox/po-checkbox-base.component.d.ts +6 -8
  9. package/lib/components/po-field/po-checkbox/po-checkbox.component.d.ts +3 -12
  10. package/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.d.ts +6 -8
  11. package/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.d.ts +7 -12
  12. package/lib/components/po-field/po-checkbox-group/po-checkbox-group.module.d.ts +2 -1
  13. package/lib/components/po-field/po-combo/po-combo-base.component.d.ts +6 -8
  14. package/lib/components/po-field/po-combo/po-combo.component.d.ts +5 -12
  15. package/lib/components/po-field/po-datepicker/po-datepicker-base.component.d.ts +5 -7
  16. package/lib/components/po-field/po-datepicker/po-datepicker.component.d.ts +7 -14
  17. package/lib/components/po-field/po-datepicker/po-datepicker.module.d.ts +2 -1
  18. package/lib/components/po-field/po-datepicker-range/po-datepicker-range-base.component.d.ts +5 -7
  19. package/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.d.ts +4 -12
  20. package/lib/components/po-field/po-decimal/po-decimal.component.d.ts +3 -4
  21. package/lib/components/po-field/po-email/po-email.component.d.ts +3 -3
  22. package/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.d.ts +3 -1
  23. package/lib/components/po-field/po-field-container/po-field-container.component.d.ts +3 -1
  24. package/lib/components/po-field/po-field.model.d.ts +7 -16
  25. package/lib/components/po-field/po-input/po-input-base.component.d.ts +12 -19
  26. package/lib/components/po-field/po-input/po-input.component.d.ts +3 -3
  27. package/lib/components/po-field/po-input-generic/po-input-generic.d.ts +0 -2
  28. package/lib/components/po-field/po-login/po-login.component.d.ts +3 -1
  29. package/lib/components/po-field/po-lookup/po-lookup-base.component.d.ts +6 -8
  30. package/lib/components/po-field/po-lookup/po-lookup-modal/po-lookup-modal.component.d.ts +1 -1
  31. package/lib/components/po-field/po-lookup/po-lookup.component.d.ts +8 -14
  32. package/lib/components/po-field/po-multiselect/po-multiselect-base.component.d.ts +6 -8
  33. package/lib/components/po-field/po-multiselect/po-multiselect.component.d.ts +4 -12
  34. package/lib/components/po-field/po-number/po-number.component.d.ts +3 -2
  35. package/lib/components/po-field/po-password/po-password.component.d.ts +3 -1
  36. package/lib/components/po-field/po-radio/po-radio.component.d.ts +11 -1
  37. package/lib/components/po-field/po-radio-group/po-radio-group-base.component.d.ts +6 -8
  38. package/lib/components/po-field/po-radio-group/po-radio-group.component.d.ts +7 -12
  39. package/lib/components/po-field/po-radio-group/po-radio-group.module.d.ts +2 -1
  40. package/lib/components/po-field/po-rich-text/po-rich-text-base.component.d.ts +6 -8
  41. package/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.d.ts +1 -2
  42. package/lib/components/po-field/po-rich-text/po-rich-text.component.d.ts +4 -10
  43. package/lib/components/po-field/po-select/po-select.component.d.ts +7 -14
  44. package/lib/components/po-field/po-switch/po-switch.component.d.ts +33 -6
  45. package/lib/components/po-field/po-textarea/po-textarea-base.component.d.ts +6 -8
  46. package/lib/components/po-field/po-textarea/po-textarea.component.d.ts +7 -12
  47. package/lib/components/po-field/po-upload/po-upload-base.component.d.ts +6 -8
  48. package/lib/components/po-field/po-upload/po-upload.component.d.ts +5 -11
  49. package/lib/components/po-field/po-url/po-url.component.d.ts +3 -2
  50. package/lib/components/po-helper/po-helper-base.component.d.ts +12 -1
  51. package/lib/components/po-helper/po-helper.component.d.ts +1 -0
  52. package/lib/components/po-info/po-info-base.component.d.ts +16 -1
  53. package/lib/components/po-loading/po-loading-base.component.d.ts +7 -4
  54. package/lib/components/po-page/po-page-default/po-page-default-base.component.d.ts +9 -8
  55. package/lib/components/po-page/po-page-detail/po-page-detail-base.component.d.ts +14 -0
  56. package/lib/components/po-page/po-page-edit/po-page-edit-base.component.d.ts +14 -0
  57. package/lib/components/po-page/po-page-header/po-page-header-base.component.d.ts +3 -1
  58. package/lib/components/po-page/po-page-list/po-page-list-base.component.d.ts +14 -0
  59. package/lib/components/po-popover/po-popover-base.component.d.ts +13 -1
  60. package/lib/components/po-popover/po-popover.component.d.ts +11 -0
  61. package/lib/components/po-search/po-search-base.component.d.ts +17 -1
  62. package/lib/components/po-search/po-search.component.d.ts +1 -1
  63. package/lib/components/po-table/enums/po-table-spacing.enum.d.ts +1 -1
  64. package/lib/components/po-tag/po-tag-base.component.d.ts +1 -0
  65. package/lib/enums/po-density-mode.enum.d.ts +14 -0
  66. package/lib/enums/po-field-size.enum.d.ts +5 -3
  67. package/lib/services/po-theme/helpers/accessibilities/po-theme-density.constant.d.ts +12 -0
  68. package/lib/services/po-theme/po-theme.module.d.ts +1 -1
  69. package/lib/services/po-theme/po-theme.service.d.ts +39 -11
  70. package/lib/utils/util.d.ts +9 -2
  71. package/package.json +4 -4
  72. package/po-ui-ng-components-19.33.0.tgz +0 -0
  73. package/schematics/ng-add/index.js +1 -1
  74. package/schematics/ng-update/v14/index.js +1 -1
  75. package/schematics/ng-update/v15/index.js +1 -1
  76. package/schematics/ng-update/v16/index.js +1 -1
  77. package/schematics/ng-update/v17/index.js +1 -1
  78. package/schematics/ng-update/v18/index.js +2 -2
  79. package/schematics/ng-update/v19/index.js +2 -2
  80. package/schematics/ng-update/v2/index.js +1 -1
  81. package/schematics/ng-update/v3/index.js +1 -1
  82. package/schematics/ng-update/v4/index.js +1 -1
  83. package/schematics/ng-update/v5/index.js +1 -1
  84. package/schematics/ng-update/v6/index.js +1 -1
  85. package/po-ui-ng-components-19.32.0.tgz +0 -0
@@ -16,7 +16,7 @@ export declare const poLoadingLiteralsDefault: {
16
16
  * ou aguardando a resposta de alguma requisição.
17
17
  */
18
18
  export declare class PoLoadingBaseComponent {
19
- private languageService;
19
+ protected languageService: PoLanguageService;
20
20
  private _text?;
21
21
  private _size?;
22
22
  /**
@@ -26,14 +26,17 @@ export declare class PoLoadingBaseComponent {
26
26
  get text(): string;
27
27
  /**
28
28
  * Define o tamanho do ícone.
29
- *
30
- * @default `lg`
31
- *
32
29
  * Valores válidos:
33
30
  * - `xs`: 16px
34
31
  * - `sm`: 24px
35
32
  * - `md`: 32px
36
33
  * - `lg`: 80px
34
+ *
35
+ * > Em nível de acessibilidade **AA**, caso o valor de `p-size` não seja definido, o valor padrão será `sm`
36
+ * > quando o valor padrão dos componentes for configurado como `small` no
37
+ * > [serviço de tema](https://po-ui.io/documentation/po-theme).
38
+ *
39
+ * @default `lg`
37
40
  */
38
41
  set size(value: string);
39
42
  get size(): string;
@@ -19,14 +19,15 @@ export declare const poPageDefaultLiteralsDefault: {
19
19
  *
20
20
  * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
21
21
  *
22
- * | Propriedade | Descrição | Valor Padrão |
23
- * |----------------------------------------|-------------------------------------------------------|-------------------------------------------------|
24
- * | **Default Values** | | |
25
- * | `--padding` | Espaçamento do componente | `var(--spacing-xs) var(--spacing-md)` |
26
- * | `--gap` | Gap entre o header e o conteúdo | `var(--spacing-md)` |
27
- * | `--padding-top-header` | Espaçamento do topo do header | `var(--color-neutral-light-30)` |
28
- * | `--gap-actions` | Gap entre os botões de action | `var(--spacing-xs)` |
29
- * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
22
+ * | Propriedade | Descrição | Valor Padrão |
23
+ * |---------------------|---------------------------------------------|---------------------------------------|
24
+ * | **Header** | | |
25
+ * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
26
+ * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
27
+ * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
28
+ * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
29
+ * | **Content** | | |
30
+ * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
30
31
  */
31
32
  export declare abstract class PoPageDefaultBaseComponent {
32
33
  poPageContent: PoPageContentComponent;
@@ -15,6 +15,20 @@ export declare const poPageDetailLiteralsDefault: {
15
15
  *
16
16
  * O componente **po-page-detail** é utilizado como container principal para a tela de
17
17
  * detalhamento de um registro, tendo a possibilidade de usar as ações de "Voltar", "Editar" e "Remover".
18
+ *
19
+ * #### Tokens customizáveis
20
+ *
21
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
22
+ *
23
+ * | Propriedade | Descrição | Valor Padrão |
24
+ * |---------------------|---------------------------------------------|---------------------------------------|
25
+ * | **Header** | | |
26
+ * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
27
+ * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
28
+ * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
29
+ * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
30
+ * | **Content** | | |
31
+ * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
18
32
  */
19
33
  export declare class PoPageDetailBaseComponent {
20
34
  poPageContent: PoPageContentComponent;
@@ -19,6 +19,20 @@ export declare const poPageEditLiteralsDefault: {
19
19
  * Os botões "Salvar" e "Salvar e Novo" podem ser habilitados/desabilitados utilizando a propriedade `p-disable-submit`.
20
20
  * Esta propriedade pode ser utilizada para desabilitar os botões caso exista um formulário inválido na página ou alguma
21
21
  * regra de negócio não tenha sido atendida.
22
+ *
23
+ * #### Tokens customizáveis
24
+ *
25
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
26
+ *
27
+ * | Propriedade | Descrição | Valor Padrão |
28
+ * |---------------------|---------------------------------------------|---------------------------------------|
29
+ * | **Header** | | |
30
+ * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
31
+ * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
32
+ * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
33
+ * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
34
+ * | **Content** | | |
35
+ * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
22
36
  */
23
37
  export declare class PoPageEditBaseComponent {
24
38
  poPageContent: PoPageContentComponent;
@@ -11,6 +11,8 @@ import * as i0 from "@angular/core";
11
11
  export declare class PoPageHeaderBaseComponent {
12
12
  /** Título da página. */
13
13
  title: string;
14
+ /** Define o tamanho dos componentes no header. */
15
+ size: string;
14
16
  /** Subtítulo da página. */
15
17
  subtitle: string;
16
18
  private _breadcrumb;
@@ -18,5 +20,5 @@ export declare class PoPageHeaderBaseComponent {
18
20
  set breadcrumb(value: PoBreadcrumb);
19
21
  get breadcrumb(): PoBreadcrumb;
20
22
  static ɵfac: i0.ɵɵFactoryDeclaration<PoPageHeaderBaseComponent, never>;
21
- static ɵdir: i0.ɵɵDirectiveDeclaration<PoPageHeaderBaseComponent, never, never, { "title": { "alias": "p-title"; "required": false; }; "subtitle": { "alias": "p-subtitle"; "required": false; }; "breadcrumb": { "alias": "p-breadcrumb"; "required": false; }; }, {}, never, never, true, never>;
23
+ static ɵdir: i0.ɵɵDirectiveDeclaration<PoPageHeaderBaseComponent, never, never, { "title": { "alias": "p-title"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "subtitle": { "alias": "p-subtitle"; "required": false; }; "breadcrumb": { "alias": "p-breadcrumb"; "required": false; }; }, {}, never, never, true, never>;
22
24
  }
@@ -24,6 +24,20 @@ export declare const poPageListLiteralsDefault: {
24
24
  *
25
25
  * Para facilitar a manipulação e visualização dos filtros aplicados, é possível também utilizar o componente
26
26
  * [`po-disclaimer-group`](/documentation/po-disclaimer-group).
27
+ *
28
+ * #### Tokens customizáveis
29
+ *
30
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
31
+ *
32
+ * | Propriedade | Descrição | Valor Padrão |
33
+ * |---------------------|---------------------------------------------|---------------------------------------|
34
+ * | **Header** | | |
35
+ * | `--padding` | Espaçamento do header | `var(--spacing-xs) var(--spacing-md)` |
36
+ * | `--gap` | Espaçamento entre os breadcrumbs e o título | `var(--spacing-md)` |
37
+ * | `--gap-actions` | Espaçamento entre as ações | `var(--spacing-xs)` |
38
+ * | `--font-family` | Família tipográfica do título | `var(--font-family-theme)` |
39
+ * | **Content** | | |
40
+ * | `--padding-content` | Espaçamento do conteúdo | `var(--spacing-xs) var(--spacing-sm)` |
27
41
  */
28
42
  export declare abstract class PoPageListBaseComponent {
29
43
  poPageContent: PoPageContentComponent;
@@ -141,7 +141,19 @@ export declare class PoPopoverBaseComponent {
141
141
  */
142
142
  set trigger(value: string);
143
143
  get trigger(): string;
144
+ /**
145
+ * @Input
146
+ *
147
+ * @optional
148
+ *
149
+ * @description
150
+ * Permite a inclusão de classes CSS customizadas ao componente.
151
+ *
152
+ * Exemplo: `p-custom-classes="minha-classe-1 minha-classe-2"`.
153
+ *
154
+ */
155
+ customClasses: import("@angular/core").InputSignal<string>;
144
156
  static ɵfac: i0.ɵɵFactoryDeclaration<PoPopoverBaseComponent, never>;
145
- static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopoverBaseComponent, never, never, { "appendBox": { "alias": "p-append-in-body"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; "title": { "alias": "p-title"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "trigger": { "alias": "p-trigger"; "required": false; }; }, { "closePopover": "p-close"; }, never, never, true, never>;
157
+ static ɵcmp: i0.ɵɵComponentDeclaration<PoPopoverBaseComponent, "po-popover-base", never, { "appendBox": { "alias": "p-append-in-body"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; "title": { "alias": "p-title"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "trigger": { "alias": "p-trigger"; "required": false; }; "customClasses": { "alias": "p-custom-classes"; "required": false; "isSignal": true; }; }, { "closePopover": "p-close"; }, never, never, false, never>;
146
158
  static ngAcceptInputType_appendBox: any;
147
159
  }
@@ -32,7 +32,10 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
32
32
  timeoutResize: any;
33
33
  targetElement: any;
34
34
  afterViewInitWasCalled: boolean;
35
+ private keydownTargetListener?;
36
+ private keydownPopoverListener?;
35
37
  eventListenerFunction: () => void;
38
+ private readonly tabbableSelector;
36
39
  constructor(renderer: Renderer2, poControlPosition: PoControlPositionService, cd: ChangeDetectorRef);
37
40
  ngOnChanges(changes: SimpleChanges): void;
38
41
  ngAfterViewInit(): void;
@@ -50,6 +53,14 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
50
53
  private initEventListenerFunction;
51
54
  private removeListeners;
52
55
  private setElementsControlPosition;
56
+ private focusOnTarget;
57
+ private focusOnFirstFocusable;
58
+ private attachPopoverKeydown;
59
+ private isVisible;
60
+ private getTabbablesIn;
61
+ private getDocumentTabbables;
62
+ private focusNextAfterTarget;
63
+ private focusPrevBeforeTarget;
53
64
  static ɵfac: i0.ɵɵFactoryDeclaration<PoPopoverComponent, never>;
54
65
  static ɵcmp: i0.ɵɵComponentDeclaration<PoPopoverComponent, "po-popover", never, {}, {}, never, ["*"], false, never>;
55
66
  }
@@ -329,6 +329,22 @@ export declare class PoSearchBaseComponent {
329
329
  * > Incompatível com a propriedade `p-search-type` do tipo `locate`.
330
330
  */
331
331
  filteredItemsChange: EventEmitter<any[]>;
332
+ /**
333
+ * @optional
334
+ *
335
+ * @description
336
+ *
337
+ * Evento emitido quando o campo de entrada (input) recebe foco.
338
+ */
339
+ focusEvent: EventEmitter<any>;
340
+ /**
341
+ * @optional
342
+ *
343
+ * @description
344
+ * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente.
345
+ * Retorna um objeto `KeyboardEvent` com informações sobre a tecla.
346
+ */
347
+ keydown: EventEmitter<KeyboardEvent>;
332
348
  /**
333
349
  * @optional
334
350
  *
@@ -371,7 +387,7 @@ export declare class PoSearchBaseComponent {
371
387
  constructor(languageService: PoLanguageService);
372
388
  ensureFilterSelectOption(values: any): any[];
373
389
  static ɵfac: i0.ɵɵFactoryDeclaration<PoSearchBaseComponent, never>;
374
- static ɵdir: i0.ɵɵDirectiveDeclaration<PoSearchBaseComponent, never, never, { "ariaLabel": { "alias": "p-aria-label"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "filterKeys": { "alias": "p-filter-keys"; "required": false; }; "filterSelect": { "alias": "p-filter-select"; "required": false; }; "filterType": { "alias": "p-filter-type"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "locateSummary": { "alias": "p-locate-summary"; "required": false; }; "type": { "alias": "p-search-type"; "required": false; }; "showListbox": { "alias": "p-show-listbox"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "blur": "p-blur"; "changeModel": "p-change-model"; "filter": "p-filter"; "filteredItemsChange": "p-filtered-items-change"; "listboxOnClick": "p-listbox-onclick"; "locateNext": "p-locate-next"; "locatePrevious": "p-locate-previous"; "footerAction": "p-footer-action-listbox"; }, never, never, true, never>;
390
+ static ɵdir: i0.ɵɵDirectiveDeclaration<PoSearchBaseComponent, never, never, { "ariaLabel": { "alias": "p-aria-label"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "filterKeys": { "alias": "p-filter-keys"; "required": false; }; "filterSelect": { "alias": "p-filter-select"; "required": false; }; "filterType": { "alias": "p-filter-type"; "required": false; }; "icon": { "alias": "p-icon"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "locateSummary": { "alias": "p-locate-summary"; "required": false; }; "type": { "alias": "p-search-type"; "required": false; }; "showListbox": { "alias": "p-show-listbox"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; }, { "blur": "p-blur"; "changeModel": "p-change-model"; "filter": "p-filter"; "filteredItemsChange": "p-filtered-items-change"; "focusEvent": "p-focus"; "keydown": "p-keydown"; "listboxOnClick": "p-listbox-onclick"; "locateNext": "p-locate-next"; "locatePrevious": "p-locate-previous"; "footerAction": "p-footer-action-listbox"; }, never, never, true, never>;
375
391
  static ngAcceptInputType_disabled: any;
376
392
  static ngAcceptInputType_showListbox: any;
377
393
  }
@@ -124,7 +124,7 @@ export declare class PoSearchComponent extends PoSearchBaseComponent implements
124
124
  getInputValue(): any;
125
125
  createDropdownFilterSelect(): void;
126
126
  isSelected(filterOption: PoSearchFilterSelect): boolean;
127
- changeFilterSelect(filterOption: PoSearchFilterSelect): void;
127
+ changeFilterSelect(filterOption: PoSearchFilterSelect, focus?: boolean): void;
128
128
  handlerFooterActionListbox(): void;
129
129
  private openListboxFooterAction;
130
130
  private handlerPlaceholderListbox;
@@ -5,7 +5,7 @@
5
5
  * Tipos de espaçamento interno (padding) das células (**p-spacing**) do po-table.
6
6
  */
7
7
  export declare enum PoTableColumnSpacing {
8
- /** Espaçamento extra pequeno: 0.25rem (vertical) x 1rem (horizontal). */
8
+ /** Espaçamento extra pequeno: 0.25rem (vertical) x 0.5rem (horizontal). */
9
9
  ExtraSmall = "extraSmall",
10
10
  /** Espaçamento pequeno: 0.5rem (vertical) x 1rem (horizontal). */
11
11
  Small = "small",
@@ -42,6 +42,7 @@ export declare const PoTagLiteralsDefault: {
42
42
  * | `--font-size` | Tamanho da fonte | `var(--font-size-sm)` |
43
43
  * | `--line-height` | Tamanho da label | `var(---line-height-sm)` |
44
44
  * | `--border-radius` | Contém o valor do raio dos cantos do elemento&nbsp; | `var(--border-radius-pill)` |
45
+ * | `--gap` | Espaçamento entre o label e o value | `var(--spacing-xs)` |
45
46
  * | **Neutral** | | |
46
47
  * | `--color-neutral` | Cor principal no estado neutral | `var(--color-neutral-light-10)` |
47
48
  * | `--text-color-positive` | Cor do texto no estado neutral | `var(--color-neutral-dark-80)` |
@@ -0,0 +1,14 @@
1
+ /**
2
+ * @docsPrivate
3
+ *
4
+ * @description
5
+ *
6
+ * Define o nível de densidade (espaçamento) aplicado em componentes agrupadores. Pode ser ajustado conforme a
7
+ * preferência do usuário ou requisitos de acessibilidade.
8
+ */
9
+ export declare enum PoDensityMode {
10
+ /** Define espaçamentos mais compactos entre os elementos. */
11
+ Small = "small",
12
+ /** Define espaçamentos mais amplos e confortáveis. */
13
+ Medium = "medium"
14
+ }
@@ -3,11 +3,13 @@
3
3
  *
4
4
  * @description
5
5
  *
6
- * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
6
+ * Define o tamanho padrão utilizado em componentes interativos. Este enum também é usado pelo serviço de tema para
7
+ * definir a preferência global de tamanho dos componentes. Por padrão, os componentes utilizam o tamanho `medium` por
8
+ * ser mais acessível (conforme diretrizes WCAG nível AAA).
9
+ *
10
+ * > O tamanho `small` está disponível apenas em contextos com acessibilidade AA.
7
11
  */
8
12
  export declare enum PoFieldSize {
9
- /** Define a altura do input como 32px. */
10
13
  Small = "small",
11
- /** Define a altura do input como 44px. */
12
14
  Medium = "medium"
13
15
  }
@@ -0,0 +1,12 @@
1
+ export declare const poThemeDensity: {
2
+ small: {
3
+ '--default-spacing-0': string;
4
+ '--default-spacing-xs': string;
5
+ '--default-spacing-sm': string;
6
+ '--default-spacing-md': string;
7
+ '--default-spacing-lg': string;
8
+ '--default-spacing-xl': string;
9
+ '--default-line-height-xs': string;
10
+ '--default-spacing-squish-xs': string;
11
+ };
12
+ };
@@ -1,6 +1,6 @@
1
1
  import * as i0 from "@angular/core";
2
2
  /**
3
- * Módulo responsável por fornecer serviços relacionados ao tema PO.
3
+ * Módulo do serviço PoThemeService.
4
4
  */
5
5
  export declare class PoThemeModule {
6
6
  static ɵfac: i0.ɵɵFactoryDeclaration<PoThemeModule, never>;
@@ -1,4 +1,5 @@
1
1
  import { RendererFactory2 } from '@angular/core';
2
+ import { PoDensityMode } from '../../enums/po-density-mode.enum';
2
3
  import { PoThemeA11yEnum } from './enum/po-theme-a11y.enum';
3
4
  import { PoThemeTypeEnum } from './enum/po-theme-type.enum';
4
5
  import { PoTheme, PoThemeActive } from './interfaces/po-theme.interface';
@@ -6,11 +7,20 @@ import * as i0 from "@angular/core";
6
7
  /**
7
8
  * @description
8
9
  *
9
- * O `PoThemeService` possibilita a personalização das cores do tema padrão do `PO-UI`, permitindo a alteração dos valores das variáveis de estilo usadas no CSS padrão.
10
+ * O serviço `PoThemeService` permite customizar as cores do tema padrão do `PO-UI` e definir o nível de acessibilidade
11
+ * mais adequado ao projeto.
10
12
  *
11
- * > Para saber mais sobre como customizar o tema padrão verifique o item [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
13
+ * O nível **AAA** (padrão) garante maior contraste, áreas clicáveis amplas e espaçamentos maiores entre os elementos,
14
+ * enquanto o nível **AA** mantém a conformidade com as diretrizes de acessibilidade, mas com proporções mais equilibradas
15
+ * e contornos mais sutis.
12
16
  *
13
- * > Obs.: Não está documentado aqui e não indicamos a customização das cores de 'feedback' por motivos de acessibilidade e usabilidade.
17
+ * O serviço também possibilita configurar a **densidade de espaçamentos**, permitindo ajustar o espaço entre e dentro dos
18
+ * componentes. Essa configuração pode ser utilizada com qualquer nível de acessibilidade.
19
+ *
20
+ * > Observação: a customização das cores de `feedback` não é recomendada por motivos de acessibilidade e usabilidade.
21
+ *
22
+ * > Para saber mais sobre como customizar o tema padrão, consulte o item
23
+ * [Customização de Temas usando o serviço PO-UI](guides/theme-service) na aba `Guias`.
14
24
  */
15
25
  /**
16
26
  * @example
@@ -39,7 +49,8 @@ export declare class PoThemeService {
39
49
  * @param {PoTheme} themeConfig - Configuração de tema a ser aplicada ao componente.
40
50
  * @param {PoThemeTypeEnum} [themeType=PoThemeTypeEnum.light] - (Opcional) Tipo de tema, podendo ser 'light' (claro) ou 'dark' (escuro). O tema claro é o padrão.
41
51
  * @param {PoThemeA11yEnum} [a11yLevel=PoThemeA11yEnum.AAA] - (Opcional) Nível de acessibilidade dos componentes, podendo ser AA ou AAA. Padrão é AAA.
42
- * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no localStorage para persistência. `true` para salvar, `false` para não salvar.
52
+ * @param {boolean} [persistPreference=true] - (Opcional) Define se a preferência de tema deve ser salva no
53
+ * localStorage para persistência. Por padrão é `true`, ou seja, a preferência será salva automaticamente.
43
54
  */
44
55
  setTheme(themeConfig: PoTheme, themeType?: PoThemeTypeEnum, a11yLevel?: PoThemeA11yEnum, persistPreference?: boolean): void;
45
56
  private setDataDefaultSizeHTML;
@@ -50,18 +61,35 @@ export declare class PoThemeService {
50
61
  */
51
62
  getA11yLevel(): PoThemeA11yEnum;
52
63
  /**
53
- * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido.
54
- * Essa configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`.
55
- * Caso contrário, o tamanho padrão será `medium`.
64
+ * Define o tamanho `small` como padrão para componentes de formulário que não possuem um tamanho definido. Essa
65
+ * configuração é aplicada globalmente apenas quando o nível de acessibilidade for `AA`. O valor definido é salvo no
66
+ * `localStorage` sob a chave `po-default-size`.
56
67
  *
57
68
  * > Para garantir que o tamanho `small` seja aplicado corretamente a todos os componentes, recomendamos
58
69
  * definir esta configuração **junto com o nível de acessibilidade `AA` na inicialização da aplicação**.
59
70
  * Se for aplicada em tempo de execução, será necessário recarregar a aplicação (`reload`)
60
71
  * para que os estilos sejam aplicados corretamente.
72
+ * > Para ajustar a densidade visual dos componentes agrupadores (como pages, container, etc.), utilize também
73
+ * o método `setDensityMode` conforme necessário.
61
74
  *
62
75
  * @param {boolean} enable Habilita ou desabilita o tamanho `small` globalmente.
63
76
  */
64
77
  setA11yDefaultSizeSmall(enable: boolean): boolean;
78
+ /**
79
+ * Retorna o modo de adensamento dos componentes agrupadores.
80
+ * Se não estiver configurado, retorna `medium` como padrão.
81
+ * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
82
+ */
83
+ getDensityMode(): PoDensityMode;
84
+ /**
85
+ * Aplica o modo de adensamento compacto (`small`) ou espaçoso (`medium`) para os componentes agrupadores,
86
+ * independentemente do nível de acessibilidade. O valor definido é salvo no `localStorage` sob a chave
87
+ * `po-density-mode`.
88
+ *
89
+ * @param {'small' | 'medium'} mode Define o modo de densidade: `small` para compacto, `medium` para espaçoso.
90
+ * O valor padrão é `medium`.
91
+ */
92
+ setDensityMode(mode: string): void;
65
93
  /**
66
94
  * @docsPrivate
67
95
  * Retorna a preferência global de tamanho dos componentes.
@@ -143,11 +171,10 @@ export declare class PoThemeService {
143
171
  private applyThemeStyles;
144
172
  private changeThemeType;
145
173
  /**
146
- * Persiste e define o tema do aplicativo com base nos dados armazenados.
147
- *
148
- * Este método recupera os dados do tema armazenados e os aplica ao aplicativo.
174
+ * Restaura e aplica as preferências visuais do usuário para o tema da aplicação, garantindo que essas preferências
175
+ * sejam persistidas no `localStorage` para uso em recarregamentos futuros.
149
176
  *
150
- * @returns {PoTheme} Recupera o tema armazenado.
177
+ * @returns {PoTheme} O tema atualmente aplicado.
151
178
  */
152
179
  persistThemeActive(): PoTheme;
153
180
  private formatTheme;
@@ -169,6 +196,7 @@ export declare class PoThemeService {
169
196
  cleanThemeActive(persistPreference?: boolean): void;
170
197
  private getActiveTypeFromTheme;
171
198
  private getActiveA11yFromTheme;
199
+ private isValidA11yLevel;
172
200
  /**
173
201
  * @docsPrivate
174
202
  *
@@ -1,6 +1,7 @@
1
- import { PoThemeService } from '../services/po-theme/po-theme.service';
2
- import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
1
+ import { PoDensityMode } from '../enums/po-density-mode.enum';
3
2
  import { ElementRef } from '@angular/core';
3
+ import { PoThemeA11yEnum } from '../services/po-theme/enum/po-theme-a11y.enum';
4
+ import { PoThemeService } from '../services/po-theme/po-theme.service';
4
5
  /**
5
6
  * Converte e formata os bytes em formato mais legível para o usuário.
6
7
  *
@@ -273,6 +274,12 @@ export declare function getA11yDefaultSize(): string;
273
274
  * @returns {PoThemeA11yEnum} O nível de acessibilidade, que pode ser `AA` ou `AAA`.
274
275
  */
275
276
  export declare function getA11yLevel(): PoThemeA11yEnum;
277
+ /**
278
+ * Retorna o modo de adensamento dos componentes agrupadores.
279
+ * Se não estiver configurado, retorna `medium` como padrão.
280
+ * @returns {PoDensityMode} O modo de adensamento, que pode ser `small` ou `medium`.
281
+ */
282
+ export declare function getDensityMode(): PoDensityMode;
276
283
  /**
277
284
  * Realiza a tradução das propriedades de ajuda dos componentes.
278
285
  * Type do Helper default é 'help' e size 'medium'.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@po-ui/ng-components",
3
- "version": "19.32.0",
3
+ "version": "19.33.0",
4
4
  "description": "PO UI - Components",
5
5
  "author": "PO UI",
6
6
  "license": "MIT",
@@ -22,8 +22,8 @@
22
22
  },
23
23
  "dependencies": {
24
24
  "@angular/cdk": "~19.0.3",
25
- "@po-ui/style": "19.32.0",
26
- "@po-ui/ng-schematics": "19.32.0",
25
+ "@po-ui/style": "19.33.0",
26
+ "@po-ui/ng-schematics": "19.33.0",
27
27
  "echarts": "^5.6.0",
28
28
  "tslib": "^2.6.2"
29
29
  },
@@ -38,7 +38,7 @@
38
38
  "@angular/platform-browser-dynamic": "^19",
39
39
  "@angular/router": "^19",
40
40
  "@angular-devkit/schematics": "^19",
41
- "@po-ui/style": "19.32.0",
41
+ "@po-ui/style": "19.33.0",
42
42
  "rxjs": "~7.8.1",
43
43
  "zone.js": "~0.15.0"
44
44
  },
Binary file
@@ -18,7 +18,7 @@ function default_1(options) {
18
18
  }
19
19
  function addPoPackageAndInstall() {
20
20
  return (tree, context) => {
21
- (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.32.0');
21
+ (0, package_config_1.addPackageToPackageJson)(tree, '@po-ui/ng-components', '19.33.0');
22
22
  // install packages
23
23
  context.addTask(new tasks_1.NodePackageInstallTask());
24
24
  };
@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
6
6
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
7
7
  const changes_1 = require("./changes");
8
8
  function default_1() {
9
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
9
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
10
10
  }
11
11
  function postUpdate() {
12
12
  return (_, context) => {
@@ -11,7 +11,7 @@ const changes_1 = require("./changes");
11
11
  const httpClientModuleName = 'HttpClientModule';
12
12
  const httpClientModuleSourcePath = '@angular/common/http';
13
13
  function default_1() {
14
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
14
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
15
15
  }
16
16
  function postUpdate() {
17
17
  return (_, context) => {
@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
6
6
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
7
7
  const changes_1 = require("./changes");
8
8
  function default_1() {
9
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
9
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
10
10
  }
11
11
  function postUpdate() {
12
12
  return (_, context) => {
@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
6
6
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
7
7
  const changes_1 = require("./changes");
8
8
  function default_1() {
9
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
9
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
10
10
  }
11
11
  function postUpdate() {
12
12
  return (_, context) => {
@@ -40,11 +40,11 @@ function main(options) {
40
40
  configureNewIcon.toLowerCase() === 'y' ||
41
41
  configureNewIcon.toLowerCase() === 'sim' ||
42
42
  configureNewIcon.toLowerCase() === '') {
43
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
43
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
44
44
  }
45
45
  else {
46
46
  return (0, schematics_1.chain)([
47
- (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
47
+ (0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion),
48
48
  addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
49
49
  addProviderToAppModule(options, newProviderDictionary),
50
50
  updateAppConfigFileRule(),
@@ -40,11 +40,11 @@ function main(options) {
40
40
  configureNewIcon.toLowerCase() === 'y' ||
41
41
  configureNewIcon.toLowerCase() === 'sim' ||
42
42
  configureNewIcon.toLowerCase() === '') {
43
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
43
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
44
44
  }
45
45
  else {
46
46
  return (0, schematics_1.chain)([
47
- (0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion),
47
+ (0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion),
48
48
  addImportOnly(options, [IconsDictionaryName, poIconDictionary], poModuleSourcePath),
49
49
  addProviderToAppModule(options, newProviderDictionary),
50
50
  updateAppConfigFileRule(),
@@ -10,7 +10,7 @@ const package_config_1 = require("@po-ui/ng-schematics/package-config");
10
10
  const changes_1 = require("./changes");
11
11
  function updateToV2() {
12
12
  return (0, schematics_1.chain)([
13
- updatePackageJson('19.32.0', changes_1.dependeciesChanges),
13
+ updatePackageJson('19.33.0', changes_1.dependeciesChanges),
14
14
  (0, replace_1.replaceInFile)('tslint.json', changes_1.tsLintReplaces),
15
15
  (0, replace_1.replaceInFile)('angular.json', changes_1.angularJsonReplaces),
16
16
  createUpgradeRule(),
@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
7
7
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
8
8
  const changes_1 = require("./changes");
9
9
  function updateToV3() {
10
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
10
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
11
11
  }
12
12
  function postUpdate() {
13
13
  return (_, context) => {
@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
7
7
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
8
8
  const changes_1 = require("./changes");
9
9
  function default_1() {
10
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
10
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
11
11
  }
12
12
  function postUpdate() {
13
13
  return (_, context) => {
@@ -7,7 +7,7 @@ const project_1 = require("@po-ui/ng-schematics/project");
7
7
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
8
8
  const changes_1 = require("./changes");
9
9
  function default_1() {
10
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
10
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), createUpgradeRule(), postUpdate()]);
11
11
  }
12
12
  function postUpdate() {
13
13
  return (_, context) => {
@@ -6,7 +6,7 @@ const tasks_1 = require("@angular-devkit/schematics/tasks");
6
6
  const package_config_1 = require("@po-ui/ng-schematics/package-config");
7
7
  const changes_1 = require("./changes");
8
8
  function default_1() {
9
- return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.32.0', changes_1.updateDepedenciesVersion), postUpdate()]);
9
+ return (0, schematics_1.chain)([(0, package_config_1.updatePackageJson)('19.33.0', changes_1.updateDepedenciesVersion), postUpdate()]);
10
10
  }
11
11
  function postUpdate() {
12
12
  return (_, context) => {
Binary file