diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
index f88ccb951..eb2f7804d 100644
--- a/projects/ui/src/lib/components/po-button/po-button-base.component.ts
+++ b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
@@ -95,11 +95,12 @@ export class PoButtonBaseComponent {
* @description
* Ícone exibido ao lado esquerdo do label do botão.
*
- * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
+ * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
* ```
*
* ```
- * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
+ * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+ * esteja carregada no projeto:
* ```
*
* ```
diff --git a/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts b/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
index d4998e983..3eb5e7b73 100644
--- a/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
+++ b/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
@@ -187,6 +187,7 @@ export const AnimaliaIconDictionary: { [key: string]: string } = {
ICON_ALIGN_JUSTIFY: 'an an-text-align-justify',
ICON_ALIGN_LEFT: 'an an-text-align-left',
ICON_ALIGN_RIGHT: 'an an-text-align-right',
+ ICON_ARROW_ARC_LEFT: 'an an-arrow-arc-left',
ICON_ARROW_DOWN: 'an an-caret-down',
ICON_ARROW_LEFT: 'an an-caret-left',
ICON_ARROW_RIGHT: 'an an-caret-right',
@@ -223,14 +224,16 @@ export const AnimaliaIconDictionary: { [key: string]: string } = {
ICON_PARAMETERS: 'an an-sliders-horizontal',
ICON_PICTURE: 'an an-image',
ICON_PICTURE_BROKEN: 'an an-image-broken',
+ ICON_PLUS: 'an an-plus',
+ ICON_PROHIBIT: 'an an-prohibit',
ICON_PUSH_PIN: 'an an-push-pin',
ICON_PUSH_PIN_SLASH: 'an an-push-pin-slash',
ICON_REFRESH: 'an an-arrow-clockwise',
ICON_SEARCH: 'an an-magnifying-glass',
ICON_SETTINGS: 'an an-gear-six',
- ICON_SORT: 'an an-caret-up-down ',
- ICON_SORT_ASC: 'an an-caret-up',
- ICON_SORT_DESC: 'an an-caret-down',
+ ICON_SORT: 'an an-arrows-down-up',
+ ICON_SORT_ASC: 'an an-arrow-up',
+ ICON_SORT_DESC: 'an an-arrow-down',
ICON_STAR: 'an an-star',
ICON_TELEPHONE: 'an an-phone',
ICON_TEXT_BOLD: 'an an-text-b',
diff --git a/projects/ui/src/lib/components/po-modal/po-modal-action.interface.ts b/projects/ui/src/lib/components/po-modal/po-modal-action.interface.ts
index d312f7852..ab13cbbf6 100644
--- a/projects/ui/src/lib/components/po-modal/po-modal-action.interface.ts
+++ b/projects/ui/src/lib/components/po-modal/po-modal-action.interface.ts
@@ -1,3 +1,5 @@
+import { TemplateRef } from '@angular/core';
+
/**
* @usedBy PoModalComponent
*
@@ -19,6 +21,50 @@ export interface PoModalAction {
/** Desabilita o botão impossibilitando que sua ação seja executada. */
disabled?: boolean;
+ /**
+ * Ícone exibido ao lado esquerdo do label do botão.
+ *
+ * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
+ * ```
+ * modalAction: PoModalAction = {
+ * action: () => {},
+ * label: 'Botão com ícone PO',
+ * icon: 'an an-user'
+ * };
+ * ```
+ * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+ * esteja carregada no projeto:
+ * ```
+ * modalAction: PoModalAction = {
+ * action: () => {},
+ * label: 'Botão com ícone Font Awesome',
+ * icon: 'fa fa-user'
+ * };
+ * ```
+ * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+ * ```
+ * // Template HTML
+ *
+ *
+ *
+ *
+ * // Componente TypeScript
+ * @ViewChild('customIcon', { static: true }) customIcon: TemplateRef;
+ *
+ * modalAction: PoModalAction = {
+ * action: () => {},
+ * label: 'Botão com ícone customizado',
+ * };
+ *
+ * // Atribuição do TemplateRef à propriedade icon após a inicialização da view
+ * ngAfterViewInit() {
+ * this.modalAction.icon = this.customIcon;
+ * }
+ * ```
+ * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
+ */
+ icon?: string | TemplateRef;
+
/** Rótulo do botão. */
label: string;
diff --git a/projects/ui/src/lib/components/po-modal/po-modal.component.html b/projects/ui/src/lib/components/po-modal/po-modal.component.html
index 471f0e685..2bb8bfecb 100644
--- a/projects/ui/src/lib/components/po-modal/po-modal.component.html
+++ b/projects/ui/src/lib/components/po-modal/po-modal.component.html
@@ -36,6 +36,7 @@
-
+
+
+
+
+
+
+
;
primaryActionOptions: Array = [
{ value: 'danger', label: 'Danger' },
@@ -56,11 +57,12 @@ export class SamplePoModalLabsComponent implements OnInit {
};
secondaryActionLabel: string;
+ secondaryActionIcon: string;
secondaryActionProperties: Array;
secondaryActionOptions: Array = [
+ { value: 'danger', label: 'Danger' },
{ value: 'disabled', label: 'Disabled' },
- { value: 'loading', label: 'Loading' },
- { value: 'danger', label: 'Danger' }
+ { value: 'loading', label: 'Loading' }
];
propertiesOptions: Array = [
@@ -81,11 +83,13 @@ export class SamplePoModalLabsComponent implements OnInit {
openModal() {
this.primaryAction.disabled = this.primaryActionProperties.includes('disabled');
this.primaryAction.label = this.primaryActionLabel;
+ this.primaryAction.icon = this.primaryActionIcon;
this.primaryAction.loading = this.primaryActionProperties.includes('loading');
this.primaryAction.danger = this.primaryActionProperties.includes('danger');
this.secondaryAction.disabled = this.secondaryActionProperties.includes('disabled');
this.secondaryAction.label = this.secondaryActionLabel;
+ this.secondaryAction.icon = this.secondaryActionIcon;
this.secondaryAction.loading = this.secondaryActionProperties.includes('loading');
this.secondaryAction.danger = this.secondaryActionProperties.includes('danger');
@@ -102,8 +106,10 @@ export class SamplePoModalLabsComponent implements OnInit {
this.title = 'PO Modal';
this.properties = [];
this.primaryActionLabel = undefined;
+ this.primaryActionIcon = undefined;
this.primaryActionProperties = [];
this.secondaryActionLabel = undefined;
+ this.secondaryActionIcon = undefined;
this.secondaryActionProperties = [];
this.componentsSize = 'medium';
this.icon = undefined;