@po-ui/ng-components 15.2.0 → 15.3.0

package/fesm2020/po-ui-ng-components.mjs

@@ -2217,7 +2217,7 @@ class PoButtonBaseComponent {
 PoButtonBaseComponent.ɵfac = function PoButtonBaseComponent_Factory(t) { return new (t || PoButtonBaseComponent)(); };
 PoButtonBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoButtonBaseComponent, hostVars: 3, hostBindings: function PoButtonBaseComponent_HostBindings(rf, ctx) { if (rf & 2) {
         i0.ɵɵattribute("p-danger", ctx.danger)("p-size", ctx.size)("p-kind", ctx.kind);
-    } }, inputs: { label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], danger: ["p-danger", "danger"], size: ["p-size", "size"], kind: ["p-kind", "kind"], disabled: ["p-disabled", "disabled"] }, outputs: { click: "p-click" } });
+    } }, inputs: { label: ["p-label", "label"], icon: ["p-icon", "icon"], loading: ["p-loading", "loading"], small: ["p-small", "small"], danger: ["p-danger", "danger"], size: ["p-size", "size"], kind: ["p-kind", "kind"], disabled: ["p-disabled", "disabled"], ariaLabel: ["p-aria-label", "ariaLabel"] }, outputs: { click: "p-click" } });
 __decorate([
     InputBoolean()
 ], PoButtonBaseComponent.prototype, "small", null);
@@ -2262,6 +2262,9 @@ __decorate([
         }], disabled: [{
             type: Input,
             args: ['p-disabled']
+        }], ariaLabel: [{
+            type: Input,
+            args: ['p-aria-label']
         }] }); })();
 
 /**
@@ -2457,7 +2460,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 9, consts: [["type", "button", 1, "po-button", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 10, consts: [["type", "button", 1, "po-button", 3, "disabled", "click"], ["button", ""], ["class", "po-button-loading-icon", 4, "ngIf"], ["class", "po-button-icon", 3, "p-icon", 4, "ngIf"], ["class", "po-button-label", 4, "ngIf"], [1, "po-button-loading-icon"], ["p-neutral-color", ""], [1, "po-button-icon", 3, "p-icon"], [1, "po-button-label"]], template: function PoButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "button", 0, 1);
         i0.ɵɵlistener("click", function PoButtonComponent_Template_button_click_0_listener() { return ctx.onClick(); });
         i0.ɵɵtemplate(2, PoButtonComponent_div_2_Template, 2, 0, "div", 2);
@@ -2467,7 +2470,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } if (rf & 2) {
         i0.ɵɵclassProp("po-button-sm", ctx.small);
         i0.ɵɵproperty("disabled", ctx.disabled || ctx.loading);
-        i0.ɵɵattribute("p-size", ctx.size)("p-kind", ctx.kind)("p-danger", ctx.danger);
+        i0.ɵɵattribute("p-size", ctx.size)("p-kind", ctx.kind)("p-danger", ctx.danger)("aria-label", ctx.ariaLabel);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.loading);
         i0.ɵɵadvance(1);
@@ -2477,7 +2480,7 @@ PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonC
     } }, dependencies: [i1.NgIf, PoLoadingIconComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonComponent, [{
         type: Component,
-        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #button\r\n  class=\"po-button\"\r\n  type=\"button\"\r\n  [attr.p-size]=\"size\"\r\n  [attr.p-kind]=\"kind\"\r\n  [attr.p-danger]=\"danger\"\r\n  [class.po-button-sm]=\"small\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\r\n    <po-loading-icon p-neutral-color></po-loading-icon>\r\n  </div>\r\n\r\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\r\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\r\n</button>\r\n" }]
+        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #button\r\n  class=\"po-button\"\r\n  type=\"button\"\r\n  [attr.p-size]=\"size\"\r\n  [attr.p-kind]=\"kind\"\r\n  [attr.p-danger]=\"danger\"\r\n  [class.po-button-sm]=\"small\"\r\n  [disabled]=\"disabled || loading\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\r\n    <po-loading-icon p-neutral-color></po-loading-icon>\r\n  </div>\r\n\r\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\r\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\r\n</button>\r\n" }]
     }], null, { buttonElement: [{
             type: ViewChild,
             args: ['button', { static: true }]
@@ -4050,10 +4053,32 @@ class PoCalendarBaseComponent {
         return this.mode === PoCalendarMode.Range;
     }
     setActivateDate(date) {
+        let newData;
+        if (typeof date !== 'string') {
+            const temporaryDate = new Date(date);
+            const year = temporaryDate.getFullYear();
+            const month = ('0' + (temporaryDate.getMonth() + 1)).slice(-2);
+            const day = ('0' + temporaryDate.getDate()).slice(-2);
+            const formattedDate = `${year}-${month}-${day}`;
+            newData = formattedDate + 'T00:00:00';
+        }
+        else {
+            newData = date + 'T00:00:00';
+        }
         const activateDate = date ? date : this.verifyActivateDate();
+        let checkedStart;
+        let checkedEnd;
         if (this.isRange) {
-            const checkedStart = typeof activateDate === 'string' ? this.poDate.convertIsoToDate(activateDate) : new Date(activateDate);
-            const checkedEnd = new Date(new Date(checkedStart).setMonth(checkedStart.getMonth() + 1));
+            if (new Date(newData).getDate() > 28) {
+                checkedStart = new Date(activateDate);
+                checkedEnd = new Date(checkedStart.getFullYear(), checkedStart.getMonth() + 1, 0, 23, 59, 59, 999);
+                checkedEnd.setMilliseconds(checkedEnd.getMilliseconds() + 1);
+            }
+            else {
+                checkedStart =
+                    typeof activateDate === 'string' ? this.poDate.convertIsoToDate(activateDate) : new Date(activateDate);
+                checkedEnd = new Date(new Date(checkedStart).setMonth(checkedStart.getMonth() + 1));
+            }
             this.activateDate = { start: checkedStart, end: checkedEnd };
         }
         else {
@@ -4968,13 +4993,27 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
             const { start, end } = this.activateDate;
             if (partType === 'end') {
                 const newYear = month === 0 ? year - 1 : year;
-                newStart = new Date(new Date(start.setMonth(month - 1)).setFullYear(newYear));
-                newEnd = new Date(new Date(end.setMonth(month)).setFullYear(year));
+                const daysInMonth = new Date(newYear, month, 0).getDate();
+                if (year !== newYear) {
+                    newStart = new Date(year, month - 1, Math.min(start.getDate(), daysInMonth));
+                    newEnd = new Date(year, month, Math.min(end.getDate(), daysInMonth));
+                }
+                else {
+                    newStart = new Date(newYear, month - 1, Math.min(start.getDate(), daysInMonth));
+                    newEnd = new Date(newYear, month, Math.min(end.getDate(), daysInMonth));
+                }
             }
             else {
                 const newYear = month === 11 ? year + 1 : year;
-                newEnd = new Date(new Date(end.setMonth(month + 1)).setFullYear(newYear));
-                newStart = new Date(new Date(start.setMonth(month)).setFullYear(year));
+                const daysInMonth = new Date(newYear, month + 1, 0).getDate();
+                if (year !== newYear) {
+                    newEnd = new Date(year, month + 1, Math.min(end.getDate(), daysInMonth));
+                    newStart = new Date(year, month, Math.min(start.getDate(), daysInMonth));
+                }
+                else {
+                    newEnd = new Date(newYear, month + 1, Math.min(end.getDate(), daysInMonth));
+                    newStart = new Date(newYear, month, Math.min(start.getDate(), daysInMonth));
+                }
             }
             this.activateDate = { start: newStart, end: newEnd };
         }
@@ -13364,7 +13403,7 @@ class PoModalBaseComponent {
     }
 }
 PoModalBaseComponent.ɵfac = function PoModalBaseComponent_Factory(t) { return new (t || PoModalBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-PoModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoModalBaseComponent, inputs: { title: ["p-title", "title"], primaryAction: ["p-primary-action", "primaryAction"], secondaryAction: ["p-secondary-action", "secondaryAction"], size: ["p-size", "size"], setClickOut: ["p-click-out", "setClickOut"], hideClose: ["p-hide-close", "hideClose"] }, outputs: { closeModal: "p-close" } });
+PoModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoModalBaseComponent, inputs: { title: ["p-title", "title"], primaryAction: ["p-primary-action", "primaryAction"], secondaryAction: ["p-secondary-action", "secondaryAction"], size: ["p-size", "size"], setClickOut: ["p-click-out", "setClickOut"], hideClose: ["p-hide-close", "hideClose"], icon: ["p-icon", "icon"] }, outputs: { closeModal: "p-close" } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalBaseComponent, [{
         type: Directive
     }], function () { return [{ type: PoLanguageService }]; }, { title: [{
@@ -13388,6 +13427,9 @@ PoModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoModa
         }], hideClose: [{
             type: Input,
             args: ['p-hide-close']
+        }], icon: [{
+            type: Input,
+            args: ['p-icon']
         }] }); })();
 
 const _c0$10 = ["*"];
@@ -13455,69 +13497,82 @@ PoActiveOverlayService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: P
     }], null, null); })();
 
 const _c0$$ = ["modalContent"];
-function PoModalComponent_div_0_a_9_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 13);
-    i0.ɵɵlistener("click", function PoModalComponent_div_0_a_9_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.close(true)); });
-    i0.ɵɵelement(1, "span", 14);
+function PoModalComponent_div_0_po_icon_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-icon", 15);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("p-icon", ctx_r2.icon);
+} }
+function PoModalComponent_div_0_po_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-button", 16);
+    i0.ɵɵlistener("p-click", function PoModalComponent_div_0_po_button_11_Template_po_button_p_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.close(true)); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("p-aria-label", ctx_r3.literals.close);
 } }
-function PoModalComponent_div_0_ng_container_12_Template(rf, ctx) { if (rf & 1) {
+function PoModalComponent_div_0_ng_container_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵprojection(1, 1);
     i0.ɵɵelementContainerEnd();
 } }
-function PoModalComponent_div_0_ng_template_13_po_button_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-button", 17);
-    i0.ɵɵlistener("p-click", function PoModalComponent_div_0_ng_template_13_po_button_1_Template_po_button_p_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r9.secondaryAction.action()); });
+function PoModalComponent_div_0_ng_template_15_po_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-button", 20);
+    i0.ɵɵlistener("p-click", function PoModalComponent_div_0_ng_template_15_po_button_2_Template_po_button_p_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r10.secondaryAction.action()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r8 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("p-danger", ctx_r8.getSecondaryActionButtonDanger())("p-disabled", ctx_r8.secondaryAction.disabled)("p-label", ctx_r8.secondaryAction.label)("p-loading", ctx_r8.secondaryAction.loading);
+    const ctx_r9 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("p-danger", ctx_r9.getSecondaryActionButtonDanger())("p-disabled", ctx_r9.secondaryAction.disabled)("p-label", ctx_r9.secondaryAction.label)("p-loading", ctx_r9.secondaryAction.loading);
 } }
-function PoModalComponent_div_0_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-modal-footer");
-    i0.ɵɵtemplate(1, PoModalComponent_div_0_ng_template_13_po_button_1_Template, 1, 4, "po-button", 15);
-    i0.ɵɵelementStart(2, "po-button", 16);
-    i0.ɵɵlistener("p-click", function PoModalComponent_div_0_ng_template_13_Template_po_button_p_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.primaryAction.action()); });
-    i0.ɵɵelementEnd()();
+function PoModalComponent_div_0_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-modal-footer")(1, "div", 17);
+    i0.ɵɵtemplate(2, PoModalComponent_div_0_ng_template_15_po_button_2_Template, 1, 4, "po-button", 18);
+    i0.ɵɵelementStart(3, "po-button", 19);
+    i0.ɵɵlistener("p-click", function PoModalComponent_div_0_ng_template_15_Template_po_button_p_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.primaryAction.action()); });
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r5.secondaryAction);
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r6.secondaryAction);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-danger", ctx_r5.primaryAction.danger)("p-disabled", ctx_r5.primaryAction.disabled)("p-label", ctx_r5.primaryAction.label)("p-loading", ctx_r5.primaryAction.loading);
+    i0.ɵɵproperty("p-danger", ctx_r6.primaryAction.danger)("p-disabled", ctx_r6.primaryAction.disabled)("p-label", ctx_r6.primaryAction.label)("p-loading", ctx_r6.primaryAction.loading);
 } }
 function PoModalComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+    const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵlistener("keydown.esc", function PoModalComponent_div_0_Template_div_keydown_esc_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.closeModalOnEscapeKey($event)); });
-    i0.ɵɵelementStart(1, "div", 2)(2, "div", 3);
-    i0.ɵɵlistener("mousedown", function PoModalComponent_div_0_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onClickOut($event)); });
-    i0.ɵɵelementStart(3, "div", 4)(4, "div", 5, 6)(6, "div", 7)(7, "div", 8);
-    i0.ɵɵtext(8);
+    i0.ɵɵlistener("keydown.esc", function PoModalComponent_div_0_Template_div_keydown_esc_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.closeModalOnEscapeKey($event)); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵlistener("mousedown", function PoModalComponent_div_0_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.onClickOut($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, PoModalComponent_div_0_a_9_Template, 2, 0, "a", 9);
+    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4)(4, "div", 5, 6)(6, "div", 7)(7, "div", 8);
+    i0.ɵɵtemplate(8, PoModalComponent_div_0_po_icon_8_Template, 1, 1, "po-icon", 9);
+    i0.ɵɵelementStart(9, "div", 10);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, PoModalComponent_div_0_po_button_11_Template, 1, 1, "po-button", 11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 10);
-    i0.ɵɵprojection(11);
+    i0.ɵɵelementStart(12, "div", 12);
+    i0.ɵɵprojection(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, PoModalComponent_div_0_ng_container_12_Template, 2, 0, "ng-container", 11);
-    i0.ɵɵtemplate(13, PoModalComponent_div_0_ng_template_13_Template, 3, 5, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵtemplate(14, PoModalComponent_div_0_ng_container_14_Template, 2, 0, "ng-container", 13);
+    i0.ɵɵtemplate(15, PoModalComponent_div_0_ng_template_15_Template, 4, 5, "ng-template", null, 14, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const _r4 = i0.ɵɵreference(14);
+    const _r5 = i0.ɵɵreference(16);
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
     i0.ɵɵclassMapInterpolate1("po-modal-content po-modal-", ctx_r0.size, "");
     i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r0.icon);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !ctx_r0.hideClose);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r0.modalFooter)("ngIfElse", _r4);
+    i0.ɵɵproperty("ngIf", ctx_r0.modalFooter)("ngIfElse", _r5);
 } }
 const _c1$s = ["*", [["po-modal-footer"]]];
 const _c2$a = ["*", "po-modal-footer"];
@@ -13622,15 +13677,15 @@ PoModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalCom
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$a, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay"], [1, "po-modal-container", "po-pb-2", "po-pt-2", 3, "mousedown"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], ["class", "po-modal-header-close-button", "tabindex", "0", 3, "click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], ["tabindex", "0", 1, "po-modal-header-close-button", 3, "click"], [1, "po-icon", "po-icon-close"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$a, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay", 3, "mousedown"], [1, "po-modal-container", "po-pb-2", "po-pt-2"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], [3, "p-icon", 4, "ngIf"], [1, "po-text-ellipsis"], ["p-icon", "po-icon po-icon-close", "p-kind", "tertiary", 3, "p-aria-label", "p-click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], [3, "p-icon"], ["p-icon", "po-icon po-icon-close", "p-kind", "tertiary", 3, "p-aria-label", "p-click"], [1, "po-modal-footer-basic"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef(_c1$s);
-        i0.ɵɵtemplate(0, PoModalComponent_div_0_Template, 15, 7, "div", 0);
+        i0.ɵɵtemplate(0, PoModalComponent_div_0_Template, 17, 8, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", !ctx.isHidden);
-    } }, dependencies: [i1.NgIf, PoButtonComponent, PoModalFooterComponent], encapsulation: 2 });
+    } }, dependencies: [i1.NgIf, PoButtonComponent, PoIconComponent, PoModalFooterComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-modal', template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\r\n  <div class=\"po-modal-overlay\">\r\n    <div class=\"po-modal-container po-pb-2 po-pt-2\" (mousedown)=\"onClickOut($event)\">\r\n      <div class=\"po-modal-vertical-align\">\r\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\r\n          <div class=\"po-modal-header\">\r\n            <div class=\"po-modal-title po-text-ellipsis\">\r\n              {{ title }}\r\n            </div>\r\n\r\n            <a *ngIf=\"!hideClose\" class=\"po-modal-header-close-button\" tabindex=\"0\" (click)=\"close(true)\">\r\n              <span class=\"po-icon po-icon-close\"></span>\r\n            </a>\r\n          </div>\r\n\r\n          <div class=\"po-modal-body\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\r\n            <ng-content select=\"po-modal-footer\"></ng-content>\r\n          </ng-container>\r\n\r\n          <ng-template #defaultModalFooterTemplate>\r\n            <po-modal-footer>\r\n              <po-button\r\n                *ngIf=\"secondaryAction\"\r\n                [p-danger]=\"getSecondaryActionButtonDanger()\"\r\n                [p-disabled]=\"secondaryAction.disabled\"\r\n                [p-label]=\"secondaryAction.label\"\r\n                [p-loading]=\"secondaryAction.loading\"\r\n                p-kind=\"secondary\"\r\n                (p-click)=\"secondaryAction.action()\"\r\n              >\r\n              </po-button>\r\n\r\n              <po-button\r\n                class=\"po-button-modal-first-action\"\r\n                [p-danger]=\"primaryAction.danger\"\r\n                [p-disabled]=\"primaryAction.disabled\"\r\n                [p-label]=\"primaryAction.label\"\r\n                [p-loading]=\"primaryAction.loading\"\r\n                p-kind=\"primary\"\r\n                (p-click)=\"primaryAction.action()\"\r\n              >\r\n              </po-button>\r\n            </po-modal-footer>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-modal', template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\r\n  <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\r\n  <div class=\"po-modal-container po-pb-2 po-pt-2\">\r\n    <div class=\"po-modal-vertical-align\">\r\n      <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\r\n        <div class=\"po-modal-header\">\r\n          <div class=\"po-modal-title po-text-ellipsis\">\r\n            <po-icon *ngIf=\"icon\" [p-icon]=\"icon\"></po-icon>\r\n            <div class=\"po-text-ellipsis\">\r\n              {{ title }}\r\n            </div>\r\n          </div>\r\n          <po-button\r\n            *ngIf=\"!hideClose\"\r\n            [p-aria-label]=\"literals.close\"\r\n            p-icon=\"po-icon po-icon-close\"\r\n            (p-click)=\"close(true)\"\r\n            p-kind=\"tertiary\"\r\n          >\r\n          </po-button>\r\n        </div>\r\n\r\n        <div class=\"po-modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\r\n          <ng-content select=\"po-modal-footer\"></ng-content>\r\n        </ng-container>\r\n\r\n        <ng-template #defaultModalFooterTemplate>\r\n          <po-modal-footer>\r\n            <div class=\"po-modal-footer-basic\">\r\n              <po-button\r\n                *ngIf=\"secondaryAction\"\r\n                [p-danger]=\"getSecondaryActionButtonDanger()\"\r\n                [p-disabled]=\"secondaryAction.disabled\"\r\n                [p-label]=\"secondaryAction.label\"\r\n                [p-loading]=\"secondaryAction.loading\"\r\n                p-kind=\"secondary\"\r\n                (p-click)=\"secondaryAction.action()\"\r\n              >\r\n              </po-button>\r\n\r\n              <po-button\r\n                class=\"po-button-modal-first-action\"\r\n                [p-danger]=\"primaryAction.danger\"\r\n                [p-disabled]=\"primaryAction.disabled\"\r\n                [p-label]=\"primaryAction.label\"\r\n                [p-loading]=\"primaryAction.loading\"\r\n                p-kind=\"primary\"\r\n                (p-click)=\"primaryAction.action()\"\r\n              >\r\n              </po-button>\r\n            </div>\r\n          </po-modal-footer>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
     }], function () { return [{ type: PoActiveOverlayService }, { type: PoLanguageService }]; }, { modalContent: [{
             type: ViewChild,
             args: ['modalContent', { read: ElementRef }]
@@ -13647,16 +13702,16 @@ class PoModalModule {
 }
 PoModalModule.ɵfac = function PoModalModule_Factory(t) { return new (t || PoModalModule)(); };
 PoModalModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PoModalModule });
-PoModalModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoButtonModule] });
+PoModalModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, PoButtonModule, PoIconModule] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalModule, [{
         type: NgModule,
         args: [{
-                imports: [CommonModule, PoButtonModule],
+                imports: [CommonModule, PoButtonModule, PoIconModule],
                 declarations: [PoModalComponent, PoModalFooterComponent],
                 exports: [PoModalComponent, PoModalFooterComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoModalModule, { declarations: [PoModalComponent, PoModalFooterComponent], imports: [CommonModule, PoButtonModule], exports: [PoModalComponent, PoModalFooterComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoModalModule, { declarations: [PoModalComponent, PoModalFooterComponent], imports: [CommonModule, PoButtonModule, PoIconModule], exports: [PoModalComponent, PoModalFooterComponent] }); })();
 
 class PoProgressBarComponent {
     get valueScale() {
@@ -31476,7 +31531,9 @@ class PoNumberBaseComponent extends PoInputGeneric {
             'Up',
             'Down',
             'Tab',
-            'Delete'
+            'Delete',
+            'Home',
+            'End'
         ];
         return controlKeys.indexOf(event.key) !== -1;
     }
@@ -35053,13 +35110,15 @@ function PoDynamicViewComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-info", 9);
 } if (rf & 2) {
     const field_r12 = ctx.$implicit;
-    i0.ɵɵproperty("ngClass", field_r12.cssClass)("p-label", field_r12.label)("p-value", field_r12.value);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", field_r12.cssClass)("p-label", field_r12.label)("p-value", ctx_r2.setFieldValue(field_r12));
 } }
 function PoDynamicViewComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-tag", 10);
 } if (rf & 2) {
     const field_r13 = ctx.$implicit;
-    i0.ɵɵproperty("ngClass", field_r13.cssClass)("p-color", field_r13.color)("p-icon", field_r13.icon)("p-inverse", field_r13.inverse)("p-label", field_r13.label)("p-value", field_r13.value);
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", field_r13.cssClass)("p-color", field_r13.color)("p-icon", field_r13.icon)("p-inverse", field_r13.inverse)("p-label", field_r13.label)("p-value", ctx_r4.setFieldValue(field_r13));
 } }
 function PoDynamicViewComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-image", 11);
@@ -35101,6 +35160,15 @@ class PoDynamicViewComponent extends PoDynamicViewBaseComponent {
             this.updateValuesAndFieldsOnLoad();
         }
     }
+    setFieldValue(field) {
+        if (field.options) {
+            const selectedOption = field.options.find(option => option.value === field.value);
+            return selectedOption ? selectedOption.label : field.value;
+        }
+        else {
+            return field.value;
+        }
+    }
     async getValuesAndFieldsFromLoad() {
         let valueAndFieldsFromLoad;
         if (typeof this.load === 'string') {
@@ -35154,7 +35222,7 @@ PoDynamicViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDy
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, PoDividerComponent, PoInfoComponent, PoTagComponent, PoImageComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicViewComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-view', template: "<div class=\"po-dynamic-view po-row\" *ngIf=\"visibleFields.length\">\r\n  <ng-template ngFor let-field [ngForOf]=\"visibleFields\">\r\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        !field.tag && !field.image ? poInfo : !field.image ? poTag : poImage;\r\n        context: { $implicit: field }\r\n      \"\r\n    >\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #poInfo let-field>\r\n  <po-info [ngClass]=\"field.cssClass\" [p-label]=\"field.label\" [p-value]=\"field.value\"> </po-info>\r\n</ng-template>\r\n\r\n<ng-template #poTag let-field>\r\n  <po-tag\r\n    [ngClass]=\"field.cssClass\"\r\n    [p-color]=\"field.color\"\r\n    [p-icon]=\"field.icon\"\r\n    [p-inverse]=\"field.inverse\"\r\n    [p-label]=\"field.label\"\r\n    [p-value]=\"field.value\"\r\n  >\r\n  </po-tag>\r\n</ng-template>\r\n\r\n<ng-template #poImage let-field>\r\n  <po-image [p-alt]=\"field.alt\" [p-height]=\"field.height\" [p-src]=\"field.value\"> </po-image>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-dynamic-view', template: "<div class=\"po-dynamic-view po-row\" *ngIf=\"visibleFields.length\">\r\n  <ng-template ngFor let-field [ngForOf]=\"visibleFields\">\r\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        !field.tag && !field.image ? poInfo : !field.image ? poTag : poImage;\r\n        context: { $implicit: field }\r\n      \"\r\n    >\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #poInfo let-field>\r\n  <po-info [ngClass]=\"field.cssClass\" [p-label]=\"field.label\" [p-value]=\"setFieldValue(field)\"> </po-info>\r\n</ng-template>\r\n\r\n<ng-template #poTag let-field>\r\n  <po-tag\r\n    [ngClass]=\"field.cssClass\"\r\n    [p-color]=\"field.color\"\r\n    [p-icon]=\"field.icon\"\r\n    [p-inverse]=\"field.inverse\"\r\n    [p-label]=\"field.label\"\r\n    [p-value]=\"setFieldValue(field)\"\r\n  >\r\n  </po-tag>\r\n</ng-template>\r\n\r\n<ng-template #poImage let-field>\r\n  <po-image [p-alt]=\"field.alt\" [p-height]=\"field.height\" [p-src]=\"field.value\"> </po-image>\r\n</ng-template>\r\n" }]
     }], function () { return [{ type: i1.CurrencyPipe }, { type: i1.DatePipe }, { type: i1.DecimalPipe }, { type: PoTimePipe }, { type: i1.TitleCasePipe }, { type: PoDynamicViewService }]; }, null); })();
 
 /**
@@ -48065,4 +48133,3 @@ function initializeLanguageDefault(config, languageService) {
 
 export { ForceOptionComponentEnum, I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRichTextComponent, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnSortType, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poTabsLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map
-//# sourceMappingURL=po-ui-ng-components.mjs.map