@magic-xpa/angular 4.1300.0-dev4130.304 → 4.1300.0-dev4130.307

package/README.md

@@ -1,5 +1,5 @@
-# Magic-xpa/angular
-
-This package is part of Magic xpa Web Application Framework. 
-It is used to easily create modern business apps powered by Angular to provide a rich user experience and meet the increasingly complex enterprise business expectations for digital transformation. 
-  
+# Magic-xpa/angular
+
+This package is part of Magic xpa Web Application Framework. 
+It is used to easily create modern business apps powered by Angular to provide a rich user experience and meet the increasingly complex enterprise business expectations for digital transformation. 
+  

package/fesm2022/magic-xpa-angular.mjs

@@ -1,6 +1,6 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Injector, createNgModule, ViewContainerRef, ChangeDetectionStrategy, Component, Directive, EventEmitter, HostListener, Output, Input, ViewChild, ElementRef, input, output, viewChild, ChangeDetectorRef, InjectionToken, DestroyRef, Renderer2, Pipe, effect, forwardRef, NgModule } from '@angular/core';
+import { Injectable, inject, Injector, createNgModule, ViewContainerRef, ChangeDetectionStrategy, Component, Directive, EventEmitter, HostListener, Output, Input, ViewChild, ElementRef, input, output, viewChild, ChangeDetectorRef, viewChildren, InjectionToken, DestroyRef, Renderer2, Pipe, effect, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DatePipe, CommonModule, formatDate } from '@angular/common';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
@@ -1138,7 +1138,7 @@ class MagicViewContainerRef {
             }]
     }], () => [], null); })();
 
-const _c0$3 = ["modalheader"];
+const _c0$4 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -1455,7 +1455,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     }
     /** @nocollapse */ static ɵfac = function MagicOverlayContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainer)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5)(_c1$1, 5);
+            i0.ɵɵviewQuery(_c0$4, 5)(_c1$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
@@ -1571,6 +1571,56 @@ class OverlayContainerMagicProvider {
         type: Injectable
     }], null, null); })();
 
+/**
+ * Sets of buttons that can be displayed in the confirmation box.
+ * Values match the button codes received from the server (Styles.MSGBOX_BUTTON_xxx)
+ */
+var MagicConfirmationButtons;
+(function (MagicConfirmationButtons) {
+    MagicConfirmationButtons[MagicConfirmationButtons["Ok"] = 0] = "Ok";
+    MagicConfirmationButtons[MagicConfirmationButtons["OkCancel"] = 1] = "OkCancel";
+    MagicConfirmationButtons[MagicConfirmationButtons["AbortRetryIgnore"] = 2] = "AbortRetryIgnore";
+    MagicConfirmationButtons[MagicConfirmationButtons["YesNoCancel"] = 3] = "YesNoCancel";
+    MagicConfirmationButtons[MagicConfirmationButtons["YesNo"] = 4] = "YesNo";
+    MagicConfirmationButtons[MagicConfirmationButtons["RetryCancel"] = 5] = "RetryCancel";
+})(MagicConfirmationButtons || (MagicConfirmationButtons = {}));
+/**
+ * Button pressed in the confirmation box.
+ * Values match the result codes returned to the server (Styles.MSGBOX_RESULT_xxx)
+ */
+var MagicConfirmationResult;
+(function (MagicConfirmationResult) {
+    MagicConfirmationResult[MagicConfirmationResult["Ok"] = 1] = "Ok";
+    MagicConfirmationResult[MagicConfirmationResult["Cancel"] = 2] = "Cancel";
+    MagicConfirmationResult[MagicConfirmationResult["Abort"] = 3] = "Abort";
+    MagicConfirmationResult[MagicConfirmationResult["Retry"] = 4] = "Retry";
+    MagicConfirmationResult[MagicConfirmationResult["Ignore"] = 5] = "Ignore";
+    MagicConfirmationResult[MagicConfirmationResult["Yes"] = 6] = "Yes";
+    MagicConfirmationResult[MagicConfirmationResult["No"] = 7] = "No";
+})(MagicConfirmationResult || (MagicConfirmationResult = {}));
+/**
+ * Buttons displayed for each set of buttons, in display order
+ */
+const ButtonSets = {
+    [MagicConfirmationButtons.Ok]: [MagicConfirmationResult.Ok],
+    [MagicConfirmationButtons.OkCancel]: [MagicConfirmationResult.Ok, MagicConfirmationResult.Cancel],
+    [MagicConfirmationButtons.AbortRetryIgnore]: [MagicConfirmationResult.Abort, MagicConfirmationResult.Retry, MagicConfirmationResult.Ignore],
+    [MagicConfirmationButtons.YesNoCancel]: [MagicConfirmationResult.Yes, MagicConfirmationResult.No, MagicConfirmationResult.Cancel],
+    [MagicConfirmationButtons.YesNo]: [MagicConfirmationResult.Yes, MagicConfirmationResult.No],
+    [MagicConfirmationButtons.RetryCancel]: [MagicConfirmationResult.Retry, MagicConfirmationResult.Cancel]
+};
+/**
+ * Text of each button
+ */
+const ButtonTexts = {
+    [MagicConfirmationResult.Ok]: 'OK',
+    [MagicConfirmationResult.Cancel]: 'Cancel',
+    [MagicConfirmationResult.Abort]: 'Abort',
+    [MagicConfirmationResult.Retry]: 'Retry',
+    [MagicConfirmationResult.Ignore]: 'Ignore',
+    [MagicConfirmationResult.Yes]: 'Yes',
+    [MagicConfirmationResult.No]: 'No'
+};
 /**
  * This is a base class for the magic confirm components
  */
@@ -1583,21 +1633,24 @@ class BaseMagicConfirmComponent {
      * message of the component
      */
     message;
+    /**
+     * set of buttons to display
+     */
+    buttons = MagicConfirmationButtons.Ok;
     /**
      * onClose Event - to be raised when the component is closed
-     * should pass true when OK is pressed and false when cancel is pressed
+     * passes the button that was pressed
      */
     onClose = new EventEmitter();
     /**
      * raises close Event
-     * @param result true when OK is pressed and false when cancel is pressed
-     *
+     * @param result the button that was pressed.
      */
     OnClose(result) {
         this.onClose.emit(result);
     }
     /** @nocollapse */ static ɵfac = function BaseMagicConfirmComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMagicConfirmComponent)(); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message", buttons: "buttons" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
@@ -1606,10 +1659,12 @@ class BaseMagicConfirmComponent {
             type: Input
         }], message: [{
             type: Input
+        }], buttons: [{
+            type: Input
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 65 }); })();
 
 /**
  * This is a base class for the magic alert components
@@ -1669,7 +1724,7 @@ class MagicFocusDirective {
             }]
     }], () => [], null); })();
 
-const _c0$2 = ["overlayContainerWrapper"];
+const _c0$3 = ["overlayContainerWrapper"];
 class MagicOverlayContainerWrapper {
     /**
      *
@@ -1741,6 +1796,8 @@ class MagicOverlayContainerWrapper {
             else {
                 componentRef.setInput('title', this.Parameters().title);
                 componentRef.setInput('message', this.Parameters().message);
+                if (this.OverlayTypeParam() === OverlayType.ConfirmationBox)
+                    componentRef.setInput('buttons', this.Parameters().buttons);
             }
             componentRef.instance.onClose.subscribe((res) => {
                 this.onClose.emit(res);
@@ -1762,7 +1819,7 @@ class MagicOverlayContainerWrapper {
     }
     /** @nocollapse */ static ɵfac = function MagicOverlayContainerWrapper_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.overlayContainerWrapperElementRef, _c0$2, 5);
+            i0.ɵɵviewQuerySignal(ctx.overlayContainerWrapperElementRef, _c0$3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, inputs: { Component: [1, "Component"], Parameters: [1, "Parameters"], OverlayTypeParam: [1, "OverlayTypeParam"] }, outputs: { onClose: "onClose" }, standalone: false, decls: 7, vars: 0, consts: [["overlayContainerWrapper", ""], ["overlayContent", ""], ["tabIndex", "0", "magicFocus", "", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"], [1, "overlay-container-wrapper-background"], ["magicViewContainerRef", ""], ["tabIndex", "0", 1, "overlay-container-wrapper-background", 2, "width", "0px", "height", "0px"]], template: function MagicOverlayContainerWrapper_Template(rf, ctx) { if (rf & 1) {
@@ -1790,83 +1847,80 @@ class MagicOverlayContainerWrapper {
     }], () => [], { Component: [{ type: i0.Input, args: [{ isSignal: true, alias: "Component", required: false }] }], Parameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "Parameters", required: false }] }], OverlayTypeParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "OverlayTypeParam", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], overlayContainerWrapperElementRef: [{ type: i0.ViewChild, args: ['overlayContainerWrapper', { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 46 }); })();
 
+const _c0$2 = ["button"];
+function MagicConfirmationBoxComponent_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 4, 0);
+    i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_For_8_Template_button_click_0_listener() { const result_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose(result_r2)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const result_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("cancel", result_r2 === ctx_r2.Result.Cancel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.buttonTexts[result_r2]);
+} }
 /***
- * This is sample component for the alert message
- */
-class MagicAlertComponent extends BaseMagicAlertComponent {
-    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicAlertComponent_BaseFactory; return function MagicAlertComponent_Factory(__ngFactoryType__) { return (ɵMagicAlertComponent_BaseFactory || (ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent)))(__ngFactoryType__ || MagicAlertComponent); }; })();
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2");
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "p");
-            i0.ɵɵtext(5);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 1);
-            i0.ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
-            i0.ɵɵtext(7, "OK");
-            i0.ɵɵelementEnd()()();
-        } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1("", ctx.message, " ");
-        } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}"] });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAlertComponent, [{
-        type: Component,
-        args: [{ selector: 'sample-magic-alert-component', template: `<div>
-    <div class="mg-message-background">
-      <h2> {{title}}</h2>
-      <p>{{message}} </p>
-
-      <button (click)="OnClose()">OK</button>
-    </div>
-  </div>`, standalone: false, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicAlertComponent, { className: "MagicAlertComponent", filePath: "src/ui/components/magic-alert.component.ts", lineNumber: 49 }); })();
-
-/***
- * This is sample component for the confirmation box
+ * This is the default confirmation box of Magic.
+ * It masks the application behind it until one of the buttons is pressed
  */
 class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
+    Result = MagicConfirmationResult;
+    buttonTexts = ButtonTexts;
+    buttonElements = viewChildren('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonElements" }] : /* istanbul ignore next */ []));
+    /**
+     * buttons to display for the current set of buttons
+     */
+    get buttonResults() {
+        return ButtonSets[this.buttons];
+    }
+    /**
+     * focus the first button, so it can be pressed with Enter
+     */
+    ngAfterViewInit() {
+        // the overlay wrapper sets its own focus after this component is created
+        setTimeout(() => this.buttonElements()[0]?.nativeElement.focus());
+    }
     /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicConfirmationBoxComponent_BaseFactory; return function MagicConfirmationBoxComponent_Factory(__ngFactoryType__) { return (ɵMagicConfirmationBoxComponent_BaseFactory || (ɵMagicConfirmationBoxComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicConfirmationBoxComponent)))(__ngFactoryType__ || MagicConfirmationBoxComponent); }; })();
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 2, consts: [[1, "mg-message-background"], [3, "click"], [1, "cancel", 3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2");
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicConfirmationBoxComponent, selectors: [["sample-magic-confirmation-box"]], viewQuery: function MagicConfirmationBoxComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.buttonElements, _c0$2, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 2, consts: [["button", ""], [1, "mg-message-mask"], [1, "mg-message-background"], [3, "cancel"], [3, "click"]], template: function MagicConfirmationBoxComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             i0.ɵɵtext(4);
             i0.ɵɵelement(5, "br")(6, "br");
-            i0.ɵɵelementStart(7, "button", 1);
-            i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_7_listener() { return ctx.OnClose(true); });
-            i0.ɵɵtext(8, "OK");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "button", 2);
-            i0.ɵɵlistener("click", function MagicConfirmationBoxComponent_Template_button_click_9_listener() { return ctx.OnClose(false); });
-            i0.ɵɵtext(10, "Cancel");
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵrepeaterCreate(7, MagicConfirmationBoxComponent_For_8_Template, 3, 3, "button", 3, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1(" ", ctx.title);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.message, " ");
-        } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel[_ngcontent-%COMP%]{background-color:#c1c1c1}"] });
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.buttonResults);
+        } }, styles: [".mg-message-mask[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#0006}.mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;text-align:center;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel[_ngcontent-%COMP%]{background-color:#c1c1c1}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicConfirmationBoxComponent, [{
         type: Component,
-        args: [{ selector: 'sample-magic-confirmation-box', template: `<div>
-    <div class="mg-message-background">
-      <h2> {{title}}</h2>
-      {{message}}
-      <br>
-      <br>
-
-      <button (click)="OnClose(true)">OK</button>
-      <button class="cancel" (click)="OnClose(false)">Cancel</button>
-    </div>
-  </div>`, standalone: false, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicConfirmationBoxComponent, { className: "MagicConfirmationBoxComponent", filePath: "src/ui/components/magic-confirmation-box.component.ts", lineNumber: 55 }); })();
+        args: [{ selector: 'sample-magic-confirmation-box', template: `<div class="mg-message-mask">
+    <div class="mg-message-background">
+      <h2> {{title}}</h2>
+      {{message}}
+      <br>
+      <br>
+
+      @for (result of buttonResults; track result) {
+        <button #button [class.cancel]="result === Result.Cancel" (click)="OnClose(result)">{{buttonTexts[result]}}</button>
+      }
+    </div>
+  </div>`, standalone: false, styles: [".mg-message-mask{position:fixed;inset:0;background-color:#0006}.mg-message-background{background-color:#f5f5f5;text-align:center;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel{background-color:#c1c1c1}\n"] }]
+    }], null, { buttonElements: [{ type: i0.ViewChildren, args: ['button', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicConfirmationBoxComponent, { className: "MagicConfirmationBoxComponent", filePath: "src/ui/components/magic-confirmation-box.component.ts", lineNumber: 65 }); })();
 
 /**
  * Service managing overlay windows
@@ -1878,22 +1932,9 @@ class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
  */
 class ConfirmationComponentsMagicProvider {
     /**
-     * Return true when use default javascript alert and confirmation or return false to provide custom components
-     *  @returns true is we want to use default javascript alert and confirmation
-     */
-    showDefaultConfirmations() {
-        return true;
-    }
-    /**
-     * Returns component that will replace javascript alert. The component will be used only if showDefaultConfirmations = false
-     *  @returns component that will replace javascript Alert
-     */
-    getAlertComponent() {
-        return MagicAlertComponent;
-    }
-    /**
-     * Returns component that will replace javascript confirmation box. The component will be used only if showDefaultConfirmations = false
-     *  @returns component that will replace javascript confirmation box
+     * Returns the component used to display the confirmation box, for all sets of buttons.
+     * Override it to provide a custom component that extends BaseMagicConfirmComponent
+     *  @returns component used to display the confirmation box
      */
     getConfirmtionComponent() {
         return MagicConfirmationBoxComponent;
@@ -2040,22 +2081,20 @@ class OverlayWindowService {
      * @param style Magic style
      */
     openConfirmationBox(title, msg, style) {
-        //show default confirmations
-        if (this.confirmationComponentsMagicProvider.showDefaultConfirmations()) {
-            let res = confirmationBox.showConfirmationBox(title, msg, style);
-            this.finishConfirmation(style, res);
-        }
-        else {
-            //show custom confirmations
-            let comp = confirmationBox.isConfirmBox(style) ? this.confirmationComponentsMagicProvider.getConfirmtionComponent() : this.confirmationComponentsMagicProvider.getAlertComponent();
-            let overlayType = confirmationBox.isConfirmBox(style) ? OverlayType.ConfirmationBox : OverlayType.Alert;
-            let componentRef = this.createModalComponent({ title: title, message: msg }, comp, overlayType);
-            componentRef.instance.onClose.subscribe((res) => {
-                this.overlayWindowsContainerViewRef.remove();
-                this.overlayWindowFocusManager.popDialog();
-                this.finishConfirmation(style, res);
-            });
-        }
+        let overlayType;
+        //show default confirmations - the confirmation box, for all sets of buttons
+        let comp = this.confirmationComponentsMagicProvider.getConfirmtionComponent();
+        overlayType = OverlayType.ConfirmationBox;
+        // style holds both the buttons and the icon: the lowest 4 bits are the button set (Styles.MSGBOX_BUTTON_xxx),
+        // and the next 4 bits are the icon (Styles.MSGBOX_ICON_xxx), e.g., YES_NO | ICON_QUESTION = 0x04 | 0x20 = 0x24.
+        // "& 0x0F" keeps only the lowest 4 bits, so 0x24 & 0x0F = 0x04 = MagicConfirmationButtons.YesNo
+        let buttons = style & 0x0F;
+        let componentRef = this.createModalComponent({ title: title, message: msg, buttons: buttons }, comp, overlayType);
+        componentRef.instance.onClose.subscribe((res) => {
+            this.overlayWindowsContainerViewRef.remove();
+            this.overlayWindowFocusManager.popDialog();
+            this.sendConfirmationResult(res);
+        });
     }
     /**
      * This method is called on close of the confirmation
@@ -2063,8 +2102,15 @@ class OverlayWindowService {
      * @param result
      */
     finishConfirmation(style, result) {
+        this.sendConfirmationResult(confirmationBox.convertToExcpectedResultBox(style, result));
+    }
+    /**
+     * Sends the button pressed in the confirmation to the engine
+     * @param result the button pressed
+     */
+    sendConfirmationResult(result) {
         let guiEvent = getGuiEventObj("confirmationClosed", null, 0);
-        guiEvent.keyCode = confirmationBox.convertToExcpectedResultBox(style, result);
+        guiEvent.keyCode = result;
         this.engineMagicService.insertEvent(guiEvent);
     }
     /**
@@ -6701,6 +6747,42 @@ class NonMagicControlDirective {
             args: ['NonMagicControl']
         }] }); })();
 
+/***
+ * This is sample component for the alert message
+ */
+class MagicAlertComponent extends BaseMagicAlertComponent {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMagicAlertComponent_BaseFactory; return function MagicAlertComponent_Factory(__ngFactoryType__) { return (ɵMagicAlertComponent_BaseFactory || (ɵMagicAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MagicAlertComponent)))(__ngFactoryType__ || MagicAlertComponent); }; })();
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicAlertComponent, selectors: [["sample-magic-alert-component"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 2, consts: [[1, "mg-message-background"], [3, "click"]], template: function MagicAlertComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2");
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "p");
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 1);
+            i0.ɵɵlistener("click", function MagicAlertComponent_Template_button_click_6_listener() { return ctx.OnClose(); });
+            i0.ɵɵtext(7, "OK");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.title);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.message, " ");
+        } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAlertComponent, [{
+        type: Component,
+        args: [{ selector: 'sample-magic-alert-component', template: `<div>
+    <div class="mg-message-background">
+      <h2> {{title}}</h2>
+      <p>{{message}} </p>
+
+      <button (click)="OnClose()">OK</button>
+    </div>
+  </div>`, standalone: false, styles: [".mg-message-background{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicAlertComponent, { className: "MagicAlertComponent", filePath: "src/ui/components/magic-alert.component.ts", lineNumber: 49 }); })();
+
 class Time24MagicPipe {
     _task = inject(TaskMagicService);
     constructor() {
@@ -7167,5 +7249,5 @@ class ModalFormDefinition {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicChangeDetectionService, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModalProperties, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, SubscriberService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
+export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, ButtonSets, ButtonTexts, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicChangeDetectionService, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicConfirmationButtons, MagicConfirmationResult, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModalProperties, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, SubscriberService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
 //# sourceMappingURL=magic-xpa-angular.mjs.map